What is a skin change?

Changing the theme or color scheme of a page simply means changing the CSS.

What is the skin changing effect achieved by the project?

  1. Support two theme color switch: dark and turquoise
  2. Generate themes using Webpack
  3. The page does not refresh when switching themes
  4. Support multiple formats, such as CSS, LESS, SASS (project using less)

Implementation steps

1. Create theme folders

Add three theme files under themes folder and write the default theme to default.less.

//default.js
@import './dark.less'; // Dark theme as the default color
Copy the code

2. Extract variables (dark. Less and green. Less)

Extract the theme color to ‘color variable’ and assign it to ‘style variable’.

Color variable Style variables Note: The main reason why the project uses less is as follows: we use a large number of components in DPL. DPL is based on ANTD. To cover the colors in DPL, we only need to know the corresponding variable in ANTD and modify it.

// Menu backgroud in antD
//dafault.less
@component-background: #fff;
@menu-bg: @component-background;
Copy the code

Really use style variables:

// portalMenu.less
@import '/xx/xx/default.less';
.menu-copy-right {
	background: @menu-bg;	
 }
Copy the code

3. Install and configure themes-switch

Installation:

npm install themes-switch --save
Copy the code

Configuration in webpack.config.js:

const ThemesGeneratorPlugin = require('themes-switch/ThemesGeneratorPlugin');

module.exports = {
 
  plugins: [
    new ThemesGeneratorPlugin({
      srcDir: 'src'.// Code directory
      themesDir: 'src/assets/themes'.// Theme directory
      outputDir: 'static/css'.// Generated file directory
      defaultStyleName: 'default.less' // The default theme file}})];Copy the code

ThemesGeneratorPlugin scans the specified theme directory and automatically generates separate files for all themes. The following image shows the theme file in Build /static/ CSS.

4. Use changeTheme to switch themes

import { changeTheme } from 'themes-switch';

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

// Implementation in the project
const THEMES = process.themes; // To get the topic information
this.themeChanger = autorun(() = > {
    const {theme} = sessionStore; // Theme changes in the sessionStore every time you switch themes
    cosnt themeKey = THEME_KEYS[theme]; //constants
    if (typeof THEMES === 'object') { changeTheme(themeKey, THEMES[themeKey]); }});Copy the code

What does changeTheme do? Take a look at the source code

var THEME_KEY = 'theme';
var PLUGIN_KEY = 'pkey';
var PLUGIN_VALUE = 'themes-switch';

function changeTheme(theme, themeUrl, onLoad) {
  var head = document.head || document.getElementsByTagName('head') [0];
  var links = head.getElementsByTagName('link');
  var oldTheme;

  if (links && links.length > 0) {
    for (var i = 0; i < links.length; i++) {
      if (getAttribute(links[i], PLUGIN_KEY) === PLUGIN_VALUE) {
        oldTheme = links[i];
        break; }}}var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = themeUrl;
  setAttribute(link, THEME_KEY, theme);
  setAttribute(link, PLUGIN_KEY, PLUGIN_VALUE);
  head.appendChild(link);

  link.onload = function () {
    removeNode(oldTheme);

    if(onLoad) { onLoad(link); }}; }Copy the code

Refer to the link: www.npmjs.com/package/the…