antd-theming-engine
Sort of a theme engine for Ant Design
Usage
Webpack Less Plugin
Import PostImportPrefixCleanUp in your webpack.config
const PostImportPrefixCleanUp = require('./PostImportPrefixCleanUp.js');
Add it to your less-loader
plugin with all prefixes in a array. Each prefix is a "mark" for a theme.
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
plugins: [
new PostImportPrefixCleanUp({
wrappers: [
'[data-antd-theme="blue-jeans"]',
'[data-antd-theme="dark-orange"]',
'[data-antd-theme="default"]',
'[data-antd-theme="light-green"]'
]
})
]
}
}
Styles & React Component
-
Inside the folder
themes/styles
create a style file as desired. -
Add a key/value reference to each one of the themes in the
themes/getTheme.js
. -
Import component
<ThemeProvider />
and use to wrap components you want to get a specific theme applied to.
The react component has two behaviors:
useHtmlRoot
set to false. This will wrap all components in a div. This is useful to use multiple themes at the same timeuseHtmlRoot
set to true. This will apply the mark to thehtml
element so the entire application uses the same theme, therefore only one theme at a time.
Example
<ThemeProvider theme="light-green" useHtmlRoot>
<div> My Ant.Design application </div>
</ThemeProvider