在 NextJS 中动态修改 Ant Design 主题

<h1 id="ant-design-">Ant Design 动态主题</h1>
<a href="https://github.com/OhYee/next-dynamic-antd-theme">Github开源项目</a> 
<a href="https://www.npmjs.com/package/next-dynamic-antd-theme">NPM项目地址</a> 
<a href="https://ohyee.github.io/next-dynamic-antd-theme/">Demo</a>
使用<a href="https://github.com/mzohaibqc/antd-theme-generator">antd-theme-generator</a>来动态修改 Ant Design 主题
特别提醒 
暗色主题下仍然有些许 bug 存在，比如<code>ant-menu-item-selected</code>的背景色太浅。产生该问题的原因是 antd-theme-generator 只会替换 less 的颜色变量值，不会直接替换变量。如果有必要，可以自行覆盖相应样式
<h2 id="heading">使用方法</h2>
安装
<pre style="background-color:#fff">npm i next-dynamic-antd-theme

yarn add next-dynamic-antd-theme
</pre>查看<a href="https://github.com/OhYee/next-dynamic-antd-theme/blob/master/example">样例项目</a>
<a href="https://github.com/OhYee/next-dynamic-antd-theme/blob/master/example/next.config.js">next.config.js</a>
<pre style="background-color:#fff">const generateTheme = require(&#39;next-dynamic-antd-theme/plugin&#39;);

const withAntdTheme = generateTheme({
 antDir: path.join(__dirname, &#39;./node_modules/antd&#39;),
 stylesDir: path.join(__dirname, &#39;./theme&#39;),
 varFile: path.join(__dirname, &#39;./theme/vars.less&#39;),
 mainLessFile: path.join(__dirname, &#39;./theme/main.less&#39;),
 outputFilePath: path.join(__dirname, &#39;./.next/static/color.less&#39;),
});

module.exports = withPlugins([withAntdTheme /* ... */], {
 // xxx
});
</pre><a href="https://github.com/OhYee/next-dynamic-antd-theme/blob/master/example/pages/_document.tsx">pages/_document.tsx</a>
<pre style="background-color:#fff">&lt;body&gt;
 &lt;link
 rel=&#34;stylesheet/less&#34;
 type=&#34;text/css&#34;
 href={`${getConfig().publicRuntimeConfig.prefix}_next/static/color.less`}
 /&gt;
 &lt;script
 dangerouslySetInnerHTML={{
 __html: `window.less = { async: false, env: &#39;production&#39; };`,
 }}
 &gt;&lt;/script&gt;
 &lt;script
 type=&#34;text/javascript&#34;
 src=&#34;https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js&#34;
 &gt;&lt;/script&gt;
 &lt;Main /&gt;
 &lt;NextScript /&gt;
&lt;/body&gt;
</pre>在任意你想修改主题的地方
<pre style="background-color:#fff">import changeTheme from &#39;next-dynamic-antd-theme&#39;;

changeTheme({ &#39;@primary-color&#39;: &#39;#ff0000&#39; }); // primary-color as red
changeTheme(&#39;default&#39;); // Ant Design default theme
changeTheme(&#39;dark&#39;); // Ant Design Dark theme
</pre><h2 id="heading-1">截图</h2>
<div class='image'><a href='https://github.com/OhYee/next-dynamic-antd-theme/raw/master/img/default.png' target='_blank' rel='noopener noreferrer'><img src="https://github.com/OhYee/next-dynamic-antd-theme/raw/master/img/default.png" /></a></div> 
<div class='image'><a href='https://github.com/OhYee/next-dynamic-antd-theme/raw/master/img/red.png' target='_blank' rel='noopener noreferrer'><img src="https://github.com/OhYee/next-dynamic-antd-theme/raw/master/img/red.png" /></a></div> 
<div class='image'><a href='https://github.com/OhYee/next-dynamic-antd-theme/raw/master/img/dark.png' target='_blank' rel='noopener noreferrer'><img src="https://github.com/OhYee/next-dynamic-antd-theme/raw/master/img/dark.png" /></a></div>