Display Themes

Screenshots on this page are taken from the Chinese UI. Menu, field and button names in the text use the English UI labels.

The system provides the DynamicTheme object for customizing the branding elements and overall style of the UI without modifying frontend code, including the page title, logo, favicon, theme color and layout, as well as the home page after login.

Target Audience

This document is intended for developers and implementers of the system.

Maintaining Themes

Themes are maintained under the menu System Config > UI > Themes. The system has one built-in theme named "默认风格" (default style); the screenshot below shows the edit form of "默认风格":

Field	Description
Name (name)	Theme name; unique, cannot be changed after creation
Description (description)	Description
Title (title)	The system name in the upper-left corner and the title of the login page, for example "牧言低代码开发平台演示系统"
Favicon (favicon)	The website icon on the browser tab
Logo (logo)	The logo in the upper-left corner
Square logo (squareLogo)	The logo shown on the login page
Theme Settings (themeSettings)	JSON configuration of the UI layout and theme color; see below
Home page (landingPage)	The form (DynamicForm) shown as the home page after login. The edit form does not have this field; set it through CSV or the data API (the CSV column is landingPage.name, filled with the form name; this column is not in the default header below, so add it yourself when needed). When empty, the system's default home page is shown
Background Image (backgroundImage)	Not used by the frontend in the current version
CSS Definition (css)	The frontend does not load the styles in this field in the current version
SSO Enable Logic (ssoEnableLogic)	Not used by the frontend in the current version

The header of the CSV seed data is as follows ((F) means the value of the column is a file path, and the platform imports the content of the file):

name(*),description,css(F),active,title,squareLogo,favicon,backgroundImage,logo,themeSettings(F)

Theme Settings (themeSettings)

themeSettings is a JSON object. The frontend merges it into the configuration of the Ant Design Pro layout (ProLayout), and its token is merged into the Ant Design theme token. For the available keys, see the ProLayout documentation (opens new window) and Ant Design theme customization (opens new window). The configuration of "默认风格" is as follows:

{
  "pwa": true,
  "token": {},
  "layout": "mix",
  "navTheme": "light",
  "colorWeak": false,
  "components": {},
  "fixSiderbar": true,
  "fixedHeader": false,
  "colorPrimary": "#1890ff",
  "contentWidth": "Fluid"
}

Commonly used keys:

Key	Description
layout	Layout mode: side (side menu), top (top menu), mix (mixed)
navTheme	Menu theme: light, realDark
colorPrimary	Primary color
fixSiderbar / fixedHeader	Whether to fix the sidebar / header
contentWidth	Width of the content area: Fluid (fluid), Fixed (fixed width, only effective with the top layout)
token	Ant Design theme token, for example {"colorPrimary": "#00b96b", "borderRadius": 4}

Activating a Theme

Only one theme can be active at a time. In the theme list, expand the dropdown menu at the end of a theme's row, click "Active", and click "OK" in the confirmation dialog to make it take effect. This action requires the current user to have the DEVELOPER role. The confirmation dialog has the title Active and the message "Active theme(s)? active theme will be shown in UI".

Once a theme becomes active, the built-in object hooks (DynamicTheme:afterUpdate, DynamicTheme:afterCreate) automatically mark the other themes as inactive. Therefore, creating or saving a theme whose active is true through CSV seed data or the data API has the same effect as clicking "Active".

The frontend reads the title, image URLs, home page and themeSettings of the currently active theme through the API GET /theme/info, which requires no login (the path omits the /api prefix, see Address Prefix). Refresh the page to see the new theme.

Since 1.0, customizing styles by injecting CSS selectors per form or field has been removed (adjust the UI style through themeSettings).