cc-next-dynamic-antd-theme

Package Overview

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

License

Install Socket

Detect and block malicious and high-risk dependencies

Install

cc-next-dynamic-antd-theme

A plugin for next to change ant design theme dynamicly

latest

Source

npm

Version: 0.0.6

Version published: 2 years ago

Weekly downloads: 21

Maintainers: 1

Weekly downloads

Created: 2 years ago

Source

next-dynamic-antd-theme

demo

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)

Usage

npm i next-dynamic-antd-theme

yarn add next-dynamic-antd-theme

See example

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

_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>

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

Screenshot

License

MIT

Keywords

antd

ant design

theme

FAQs

What is cc-next-dynamic-antd-theme?

Is cc-next-dynamic-antd-theme popular?

Is cc-next-dynamic-antd-theme well maintained?

Package last updated on 15 Aug 2023

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.

Install