Skip to main content
Version: 13.x (Current)

Antd Theme Manager

The Antd Theme Manager is a logical web component (does not render) that can be included in applications layout to inject an Ant Design compatible theme. This component is analogous to mlc-antd-theme-manager component from micro-lc.

The web component calculates the CSS variables needed by Ant Design Dynamic Theme from a set of base colors (namely: primary, info, success, processing, error, and warning colors). These variables are then injected globally through micro-lc API setStyle method.

How to configure

The Antd Theme Manager component should be provided with variables that describe an Ant Design compatible theme. Property primaryColor sets the primary color of the theme and is usually provided.

{
"tag": "bk-antd-theme-manager",
"properties": {
"themingUrl": "/theme-info",
"primaryColor": "771e1e"
}
}

Set variables - fetch data dynamically

Properties primaryColor, infoColor, successColor, processingColor, errorColor, warningColor, fontFamily can be set to describe the theme of the page.

There are two options for setting each property: a string value or an object with the keys path and, optionally, default. If a string value is used, it initializes the property directly.

However, if the themingUrl property is provided, the corresponding property is initialized by applying the path (in JavaScript notation) to the current user's object-like representation. The user information is obtained during bootstrap using property themingUrl as endpoint.

Examples

With a configuration like:

{
"tag": "bk-antd-theme-manager",
"properties": {
"themingUrl": "/theme-info",
"infoColor": "#F9C939",
"primaryColor": {
"path": "colors.primary"
},
"successColor": {
"path": "colors.success"
},
"processingColor": {
"path": "colors.processing"
},
"errorColor": {
"path": "colors.error",
"default": "#25B864"
}
}
}

and assuming that a GET to the endpoint /theme-info returns

{
"colors": {
"primary": "#43FA54",
"success": "#46C872"
}
}

Theming variables would be initialized to:

{
"primaryColor": "#43FA54",
"infoColor": "#F9C939",
"successColor": "#46C872",
"errorColor": "#25B864",
"processingColor": "#1890FF",
"warningColor": "#FAAD14",
"fontFamily": "'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
}

Particularly:

  • primaryColor is retrieved from the response of the GET call to /theme-info

  • infoColor is set to the value provided in the configuration

  • successColor is retrieved from the response of the GET call to /theme-info

  • errorColor cannot be retrieved from the response of the GET call to /theme-info, so is set to the provided default in the configuration

  • processingColor cannot be retrieved from the response of the GET call to /theme-info, so is set to the default value of the processingColor property

  • warningColor is set to the default value of the warningColor property

  • fontFamily is set to the default value of the fontFamily property

API

Properties & Attributes

propertyattributetypedefaultdescription
varsPrefix-string | string[]'micro-lc'prefix to apply to css variables
themingUrltheming-urlstring-optional endpoint to call to initialize theming variables
primaryColorprimary-colorVariable'#1890FF'primary color
infoColorinfo-colorVariable'#1890FF'info color
successColorsuccess-colorVariable'#52C41A'success color
processingColorprocessing-colorVariable'#1890FF'processing color
errorColorerror-colorVariable'#FF4D4F'error color
warningColorwarning-colorVariable'#FAAD14'warning color
fontFamilyfont-familyVariable"'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"fonts

Variable

type Variable = string | {
path: string
default?: string
}

Listens to

None

Emits

None