react+antDesign+antd-theme-generator реализует функцию создания скинов онлайн-темы

React.js

Архитектура проекта

create-react-app + antDesign + redux

иллюстрировать

公司需要开发一个线上换肤功能,考虑复杂性,还是觉得通过插件可以直接改变antDesign的primary值,实现改一个颜色就能全局更换antDesign组件的颜色Здесь реализовано с помощью antd-theme-generator `Тест Pro эффективен

Установить

antd-theme-generator

`Нужно использовать с меньшим

содержание

Добавьте color.js в корневой каталог

const path = require('path');
const { generateTheme } = require('antd-theme-generator');

const options = {
  stylesDir: path.join(__dirname, './src/styles'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: [
    //需要动态切换的主题变量
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background'
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less') //页面引入的主题变量文件
};

generateTheme(options)
  .then(less => {
    console.log('Theme generated successfully');
  })
  .catch(error => {
    console.log('Error', error);
  });

Добавьте style/index.less+style/variables.less в папку src.

файл index.less пуст

файл variable.less

@import '~antd/lib/style/themes/default.less'; //引入antd的变量文件，实现变量的覆盖

@primary-color: '#202777';
@layout-header-padding: '0px';
:root {
--PC: @primary-color;
}

Добавьте глобальную конфигурацию less в файл index.html.

Добавьте глобальную конфигурацию переменной less в index.html, чтобы метод modmodifyVars для less можно было использовать глобально, и переопределите переменные в default.less при переключении тем:

 <body>
    <link
      rel="stylesheet/less"
      type="text/css"
      href="%PUBLIC_URL%/color.less"
      rel="external nofollow"
    />
    <script>
      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>
    <div id="root" style="height: 100%;"></div>
  </body>

Команда изменения файла package.json

"scripts": {
 "start": "node color && node scripts/start.js",
 "build": "node color && node scripts/build.js",
 "test": " node color && node scripts/test.js"
},

метод переключения

Измените значение цвета @primary-color, чтобы переключить цвет темы, где вы можете сохранить значение цвета в хранилище, и вы можете сначала вызывать этот метод при переключении страниц.

  getTheme = data => {
    window.less
      .modifyVars({
        '@primary-color': this.state.styleList[data].color,
        '@layout-header-padding': '0px'
      })
      .then(() => {
        this.setState({ style: data });
      })
      .catch(error => {
        console.log(error);
      });
  };
Категории