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

property	attribute	type	default	description
varsPrefix	-	string | string[]	'micro-lc'	prefix to apply to css variables
themingUrl	theming-url	string	-	optional endpoint to call to initialize theming variables
primaryColor	primary-color	Variable	'#1890FF'	primary color
infoColor	info-color	Variable	'#1890FF'	info color
successColor	success-color	Variable	'#52C41A'	success color
processingColor	processing-color	Variable	'#1890FF'	processing color
errorColor	error-color	Variable	'#FF4D4F'	error color
warningColor	warning-color	Variable	'#FAAD14'	warning color
fontFamily	font-family	Variable	"'-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