在 NextJS 中动态修改 Ant Design 主题
这是一篇最后编辑于 6 年前 的文章，其内容可能与目前实际情况差异较大，请注意甄别
Ant Design 动态主题
使用antd-theme-generator来动态修改 Ant Design 主题
特别提醒
暗色主题下仍然有些许 bug 存在，比如ant-menu-item-selected的背景色太浅。产生该问题的原因是 antd-theme-generator 只会替换 less 的颜色变量值，不会直接替换变量。如果有必要，可以自行覆盖相应样式
使用方法
安装
npm i next-dynamic-antd-theme yarn add next-dynamic-antd-theme
查看样例项目
const generateTheme = require('next-dynamic-antd-theme/plugin'); const withAntdTheme = generateTheme({ antDir: path.join(__dirname, './node_modules/antd'), stylesDir: path.join(__dirname, './theme'), varFile: path.join(__dirname, './theme/vars.less'), mainLessFile: path.join(__dirname, './theme/main.less'), outputFilePath: path.join(__dirname, './.next/static/color.less'), }); module.exports = withPlugins([withAntdTheme /* ... */], { // xxx });
<body> <link rel="stylesheet/less" type="text/css" href={`${getConfig().publicRuntimeConfig.prefix}_next/static/color.less`} /> <script dangerouslySetInnerHTML={{ __html: `window.less = { async: false, env: 'production' };`, }} ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js" ></script> <Main /> <NextScript /> </body>
在任意你想修改主题的地方
import changeTheme from 'next-dynamic-antd-theme'; changeTheme({ '@primary-color': '#ff0000' }); // primary-color as red changeTheme('default'); // Ant Design default theme changeTheme('dark'); // Ant Design Dark theme
截图
