cc-next-dynamic-antd-theme
Advanced tools
A plugin for next to change ant design theme dynamicly
Using cc-antd-theme-generator to change Ant Design theme dynamic for Next.js
Warning!
There are some problems in dark theme, for example the color of ant-menu-item-selected background-color (You can override these unexcepted color)
npm i next-dynamic-antd-theme
yarn add next-dynamic-antd-theme
See example
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>
where you want to change theme
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
FAQs
A plugin for next to change ant design theme dynamicly
The npm package cc-next-dynamic-antd-theme receives a total of 13 weekly downloads. As such, cc-next-dynamic-antd-theme popularity was classified as not popular.
We found that cc-next-dynamic-antd-theme demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.