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

查看样例项目

next.config.js

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
});

pages/_document.tsx

<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

Ant Design 动态主题

Ant Design 动态主题

使用方法

截图