themes-switch

Features

• Multiple themes supported via custom variables.
• Generating themes via webpack.
• Themes switch without page reload.
• Supported formats: css, less, postcss, sass.

For Hot reload

• Hot-reload is supported in v1.1.x, new theme files will be generated when a reload is triggered.
• When hot-reload is enabled, the temp directory will not be cleared if webpack-dev-server was running.
• To improve performance, dynamic addition of new theme files is not supported, please restart the server when adding new files.

For Webpack v3

• Webpack v3 is no longer supported from v1.1.x, please use v1.0.x instead.
• In the version v1.0.7 themes-switch replaces extract-text-webpack-plugin with mini-css-extract-plugin, and upgrade peerDependency to Webpack 4.3.x. Now the option themesLoader is deprecated. If you are using Webpack 3.x and extract-text-webpack-plugin, view the docs here.

Installation

npm install themes-switch --save-dev

Usage

• Config themes-switch in webpack.config.js, and put MiniCssExtractPlugin.loader in your less/sass/postcss/css loaders.

const ThemesGeneratorPlugin = require('themes-switch/ThemesGeneratorPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    filename: '[name]-[contenthash].js',
    chunkFilename: '[name]-[contenthash].js',
    path: `${__dirname}/build`,
    publicPath: ''
  },
  module: {
    rules: [
      // ...
      {
        test: /\.(less|css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    new ThemesGeneratorPlugin({
      srcDir: 'src',
      themesDir: 'src/assets/themes',
      outputDir: 'static/css',
      defaultStyleName: 'default.less'
    })
  ]
};

• Create following directory for themes, and set it to option themesDir:

src
  - themes
    - dark.less
    - default.less
    - light.less

• Import your default theme into default.less:

@import 'light.less';

• Specify theme variables:

@color-main: #222A42;
@color-text: #FFF;

• Import default.less when using theme variables:

@import 'default.less';

.main {
  background: @color-main;
}

• ThemesGeneratorPlugin scans files in themesDir and files that import default.less, then generates separated files for all themes automatically.

• You can access the themes info via process.themes in your code, value such as { 'theme-dark': 'css/dark.css', 'theme-light': 'css/light.css' }, or call getThemes method directly.

import { getThemes } from 'themes-switch';

// ...
const themes = getThemes();
// ...

• Call switchTheme method to switch to new theme by pass theme name.

Switch themes in your code

import { switchTheme } from 'themes-switch';

// ...
switchTheme({ theme: 'themes-dark' });
// ...

Options

Methods

switchTheme

switchTheme({ theme: 'themes-dark', onLoad: onLoadFunc });

Options

• theme: new theme name, such as theme-dark.
• onLoad: callback when new link was loaded.

changeTheme

changeTheme('themes-dark', 'css/dark.css', onLoadFunc);

Options

• theme: new theme name, such as theme-dark.
• themeUrl: new theme url, such as css/dark.css. You can get the value from process.themes
• onLoad: callback when new link was loaded.

getThemes

const themes = getThemes();
// { 'theme-dark': 'css/dark.css', 'theme-light': 'css/light.css' }

ThemesGeneratorPlugin.clearTemp

It will delete temp directory. You can call the method as needed, e.g. when you stop webpack-dev-server in development mode.

Changelog

1.1.0

2022-08-10

• Support Webpack v5
• Support hot-reload, add new option enableHotReload
• Remove compatibility code for Webpack v3

⚠ BREAKING CHANGES

• Webpack v3 is no longer supported, please use 1.0.x instead.

1.0.11

2021-01-04

• Fix the compatibility problem when using MiniCssExtractPlugin v1.x

1.0.9

2020-12-01

• Support to configure ignore files in the theme directory, add new option ignoredFilesInThemesDir
• No longer need to manually configure the import order, remove option importAfterVariables
• Add new option usePureCSS to clearly identify whether to use postcss or pure css

1.0.8

2019-11-18

• Fix the problem of context and public path when setting style entry

1.0.7

2019-11-12

• Update the peer dependent Webpack version to >= 4.3.x
• Replace extract-text-webpack-plugin with mini-css-extract-plugin for Webpack v4
• Remove option themesLoader
• No longer need to remove old theme manually when switching themes
• The existing MiniCssExtractPlugin configuration will be reused

1.0.6

2019-05-05

• Fix the problem when using rules.resource

1.0.5

2018-07-19

• Support Webpack v4
• Fix the problem when switching themes in IE