npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

antd-theme-webpack-plugin

v1.3.9

Published

A webpack plugin to provide Dynamic Theme for Ant Design

Downloads

21,160

Readme

antd-theme-webpack-plugin

This webpack plugin is to generate color specific less/css and inject into your index.html file so that you can change Ant Design specific color theme in browser.

Live Theme Demo:

https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

https://antd-live-theme.firebaseapp.com/

In order to integrate with your webpack configurations, install the package and add following code in your webpack config file.

Install

  • npm install -D antd-theme-webpack-plugin
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html',
  generateOnce: false,
  lessUrl: "https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js",
  publicPath: "",
  customColorRegexArray: [], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
}

const themePlugin = new AntDesignThemePlugin(options);
// in config object
plugins: [
    themePlugin
  ]

Add this plugin in plugins array.

| Property | Type | Default | Descript | | --- | --- | --- | --- | | antDir | string | - | This is path to antd directory in your node_modules | | stylesDir | string | - | This is path to your custom styles root directory, all files with .less extension in this folder and nested folders will be processed | | varFile | string | - | Path to your theme related variables file | | themeVariables | array | ['@primary-color'] | List of variables that you want to dynamically change | | indexFileName | string | index.html | File name of your main html file, in most cases it is index.html which is default | | lessUrl | string | https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js | less.js cdn or file path | | publicPath | string | '' | This string will be prepended to /color.less in index.html file in case | | generateOnce | boolean | false | Everytime webpack will build new code due to some code changes in development, this plugin will run again unless you specify this flag as true which will just compile your styles once | | customColorRegexArray | array | ['color', 'lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'hsv', 'tint', 'shade', 'greyscale', 'multiply', 'contrast', 'screen', 'overlay'].map(name => new RegExp(${name}\(.*\)))] | This array is to provide regex which will match your color value, most of the time you don't need this |


If you `index.html` file is not being generated by build process then add following code in your `index.html` or whatever is the name of html main file and add `indexFileName: false` in options/config. This way you can better place your below script in your html file according to your needs.

Enable Javascript for less-loader

You need to enable javascript for less-loader.

{
  javascriptEnabled: true
}

For those who are using react-app-rewire-less with react-app-rewired, enable javascript like this

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: {
      '@primary-color': '#002251'
    },
    javascriptEnabled: true
  })(config, env);
  config.plugins.push(new AntDesignThemePlugin(options));
  return config;
};

Configurations using customize-cra

https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/examples/customize-cra/config-overrides.js

Light/Dark Theme Switch

Here is a demo to switch between light and dark themes dynamically. https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

And here is code for this demo https://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples/customize-cra

Note: you don't necessarily

CHANGELOG