Skip to main content
Version: 2.x

🖼 mlc-antd-theme-manager

Logical web component that can be included in applications layout to inject an Ant Design compatible theme.

caution

It only works on components using Ant Design Dynamic Theme.

https://micro-lc.io/frames/components/mlc-antd-theme-manager/

How it works​

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.

Variables can be scoped using one or more prefixes. For example, the following configuration

micro-lc.config.yaml
layout:
content:
tag: mlc-antd-theme-manager
properties:
varsPrefix:
- prefix-1
- prefix-2
primaryColor: "#25B864"

inject in the Document the following set of variables

:host {
--prefix-1-primary-1: #e9f7ec;
--prefix-1-primary-2: #c5ebd0;
/* ... */
--prefix-2-primary-1: #e9f7ec;
--prefix-2-primary-2: #c5ebd0;
/* ... */
}

Usage​

caution

This component is intended to be used inside micro-lc, since it makes use of micro-lc API.

You can use it standalone, but you will have to manually provide a matching API with the property microlcApi.

The component can be sourced from jsDelivr CDN.

To use the component in micro-lc, declare it as part of the application layout with its properties and attributes.

micro-lc.config.yaml
layout:
sources: https://cdn.jsdelivr.net/npm/@micro-lc/layout@0.1.4/dist/mlc-antd-theme-manager.js
content:
- tag: mlc-antd-theme-manager
properties:
varsPrefix: my-prefix
primaryColor: '#25B864'

Showcase​

Multiple prefixes​

https://micro-lc.io/frames/components/mlc-antd-theme-manager/multiple-prefixes/
Source code
$schema: https://cdn.jsdelivr.net/npm/@micro-lc/interfaces@latest/schemas/v2/config.schema.json
version: 2

layout:
sources: https://cdn.jsdelivr.net/npm/@micro-lc/layout@latest/dist/mlc-layout.js
content:
- tag: mlc-antd-theme-manager
properties:
varsPrefix:
- custom-prefix
- other-custom-prefix
primaryColor: '#25B864'
- tag: mlc-layout
properties:
mode: topBar
logo:
url: /img/favicon.png
menuItems:
- icon:
library: '@ant-design/icons-svg'
selector: HomeOutlined
id: home
label: Home
type: application

applications:
home:
integrationMode: compose
route: ./
config:
content:
- tag: div
attributes:
class: content
content:
- tag: div
attributes:
style: 'color: var(--custom-prefix-primary-color); margin-bottom: 16px'
content: var(--custom-prefix-primary-color)
- tag: div
attributes:
style: 'color: var(--other-custom-prefix-primary-color);'
content: var(--other-custom-prefix-primary-color)

Properties & attributes​

tip

All color properties can be Hex, 8-digit Hex, RGB, RGBA HSL, HSLA, HSV, HSVA, or CSS color name string.

PropertyAttributeTypeDefaultDescription
varsPrefix-string | string[]micro-lcPrefix to apply to the generated set of variables. If more thant one is specified, a set for each prefix will be generated.
primaryColorprimary-colorstring#1890FFAnt Design primary color.
infoColorinfo-colorstring#1890FFAnt Design info color.
successColorsuccess-colorstring#52C41AAnt Design success color.
processingColorprocessing-colorstring#1890FFAnt Design processing color.
errorColorerror-colorstring#FF4D4FAnt Design error color.
warningColorwarning-colorstring#FAAD14Ant Design warning color.
fontFamilyfont-familystring-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'Font family CSS property.

CSS custom properties​

The component sets the following CSS variables:

Name
--micro-lc-primary-1
--micro-lc-primary-2
--micro-lc-primary-3
--micro-lc-primary-4
--micro-lc-primary-5
--micro-lc-primary-6
--micro-lc-primary-7
--micro-lc-primary-8
--micro-lc-primary-9
--micro-lc-primary-10
--micro-lc-primary-color
--micro-lc-primary-color-active
--micro-lc-primary-color-active-deprecated-d-02
--micro-lc-primary-color-active-deprecated-f-30
--micro-lc-primary-color-deprecated-bg
--micro-lc-primary-color-deprecated-border
--micro-lc-primary-color-deprecated-f-12
--micro-lc-primary-color-deprecated-l-20
--micro-lc-primary-color-deprecated-l-35
--micro-lc-primary-color-deprecated-t-20
--micro-lc-primary-color-deprecated-t-50
--micro-lc-primary-color-disabled
--micro-lc-primary-color-hover
--micro-lc-primary-color-outline
--micro-lc-success-color
--micro-lc-success-color-active
--micro-lc-success-color-deprecated-bg
--micro-lc-success-color-deprecated-border
--micro-lc-success-color-disabled
--micro-lc-success-color-hover
--micro-lc-success-color-outline
--micro-lc-info-color
--micro-lc-info-color-active
--micro-lc-info-color-deprecated-bg
--micro-lc-info-color-deprecated-border
--micro-lc-info-color-disabled
--micro-lc-info-color-hover
--micro-lc-info-color-outline
--micro-lc-warning-color
--micro-lc-warning-color-active
--micro-lc-warning-color-deprecated-bg
--micro-lc-warning-color-deprecated-border
--micro-lc-warning-color-disabled
--micro-lc-warning-color-hover
--micro-lc-warning-color-outline
--micro-lc-error-color
--micro-lc-error-color-active
--micro-lc-error-color-deprecated-bg
--micro-lc-error-color-deprecated-border
--micro-lc-error-color-disabled
--micro-lc-error-color-hover
--micro-lc-error-color-outline
--micro-lc-font-family