SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfineui-custom-theme

fineui-custom-theme

General & other

View repository

Updated 10-16 08:39

About this skill

Create a FineUI custom theme

Deliver theme files that can be loaded by a real application. First check the current application's static resource directory, existing themes, and generator, then decide how to change the color scheme; do not require users to obtain the FineUI framework source code.

Workflow

  1. Determine the style and scope. Respect the color scheme specified by the user; if none is specified, propose a clear plan based on existing themes, describing the content background, body text, accent color, selected state, and corner radius. Do not treat the example color schemes included with this skill as fixed requirements.
  2. Locate the application directory. Pro is res/themes/; Core is wwwroot/res/themes/; Java is src/main/resources/static/res/themes/; the pure F.js example is res/themes/. Use the project's actual directory as the standard.
  3. Create a new theme. Use lowercase English letters, numbers, and underscores or hyphens for the name, such as plum_mint. Keep existing directories, copy this project's custom_default/theme.config or a suitable theme configuration, then modify the six groups of base states and derived items. For a complete example, see assets/plum_mint/theme.config; for an optional native dark appearance, see assets/plum_mint/theme-extra.css。
  4. Generate styles. In the application's res/themes , run node generate-theme.mjs 主题名in the corresponding directory. Check the files that are actually generated; if generation fails, keep the original files and check the paths and configuration. To preview while making changes, use node generate-theme.mjs --watch 主题名, or double-click 生成并监听主题.bat. Watching is only responsible for generation; the browser still needs to be refreshed.
  5. Integrate into the application. Set the custom theme according to the stack differences of references/integration.md . Prefer using the existing theme initialization entry point, and avoid adding duplicate PageManager or initializers. Check whether the old Theme Cookie overrides the configuration.
  6. Run and verify. Start the real example, confirm that the theme style request succeeds and the computed styles match the configuration; test table selection/deselection, form focus and validation, dropdown overlays, the date panel, primary buttons, and message boxes. Before taking screenshots, wait for the page to finish rendering; button text must be complete; if there are iframes, check the parent page and child page separately. For projects that cannot be run, explain truthfully; do not use static collages instead of runtime verification.
  7. Deliver. Keep theme.config, the generated theme.css, and, if present, theme-extra.css and images. When the user requests a download, package it as a single theme directory with Chinese installation instructions; do not include framework DLLs/JARs, private source code, or the entire example project. After decompressing, generate once more and compare the styles to confirm that the downloaded package can be reused.

Configuration constraints

  • theme.config Use UTF-8; the format is one per line as key = value; comments start with # and occupy their own line.End-of-line comments are not supported：true # 深色 and will be treated as strings; appending notes after a color will also pollute the output.
  • The base configuration fully retains the six groups of content、header、default、hover、active、error , each group contains border-color、background-color、text-color, plus border-radius。
  • Use hexadecimal colors to define base colors, allowing the generator to calculate light and dark derived colors;primary-background-color、primary-text-color and tabstrip-inkbar-color should be considered together.
  • is-dark-background Controls the generator's handling of derived colors, shadows, etc. for dark backgrounds; it is not a client-side F.isDarkTheme switch and does not guarantee automatic addition of the f-theme-darkbg class.
  • is-dark-active-color Indicates whether the selected state undergoes an obvious foreground/background contrast switch: use emphasis-style selection with true, and use light tinted backgrounds with essentially unchanged text with false. Do not judge merely by the overall lightness/darkness of the theme.
  • theme.css is generated output; do not edit it by hand. A small amount of additional styles is written in theme-extra.css, and the generator merges it into the same theme.css; there is no need to load it separately. Component colors should preferentially reference var(--f-*), avoiding broad selectors that override all controls.
  • Keep the app's built-in generate-theme.mjs、生成并监听主题.bat、README.txt。 Java public examples also provide the generator. Do not delete these customer features as temporary tools, and do not make customers run build commands that exist only in the private framework repository.
  • Check whether the release includes the new files. Legacy Pro projects usually need to register theme files as .csproj 's Content; for Core and Java, check the corresponding static asset output. A successful local HTTP request alone does not prove the release package is complete.

Related skills

  • fineui-theming: global configuration and switching of existing themes.