https://www.npmjs.com/package/antd-theme
app.jsx
import { Button, Select } from 'antd';
import { ThemeProvider, useTheme } from 'antd-theme';
import React from 'react';
import ReactDOM from 'react-dom';
import { SketchPicker } from 'react-color';
const initialTheme = {
name: 'default',
variables: { 'primary-color': '#00ff00' },
};
const ThemeSelect = () => {
const [{ name, variables, themes }, setTheme] = useTheme();
return (
<>
<Select
style={{ width: 100 }}
value={name}
onChange={
(theme) => setTheme({ name: theme, variables })
}
>
{
themes.map(
({ name }) => (
<Select.Option key={name} value={name}>
{name}
</Select.Option>
)
)
}
</Select>
<SketchPicker
color={variables['primary-color']}
onChange={(value) => {
// Will update all css attributes affected by primary-color
setTheme({ name, variables: { 'primary-color': value.hex } });
}}
/>
</>
);
};
const App = () => {
const [theme, setTheme] = React.useState(initialTheme);
return (
<ThemeProvider
theme={theme}
onChange={(value) => setTheme(value)}
>
<ThemeSelect />
<Button type="primary">Button</Button>
</ThemeProvider>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
ご利用の方へ react-app-rewire-less
customize-cra
react-app-rewired、このようなJavaScriptを有効にしている人のために
config-overrides.js
const { override, fixBabelImports, addLessLoader, addPostcssPlugins, adjustStyleLoaders, addWebpackPlugin } = require('customize-cra');
const AntdThemePlugin = require('antd-theme/plugin');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
}),
adjustStyleLoaders(
(loaders) => {
loaders.use[0] = {
loader: AntdThemePlugin.loader
}
}
),
addWebpackPlugin(
new AntdThemePlugin({
themes: [
{
name: 'dark',
filename: require.resolve('antd/lib/style/themes/dark.less'),
},
{
name: 'compact',
filename: require.resolve('antd/lib/style/themes/compact.less'),
},
],
})
),
);