仲灏小栈

主题

vue element-ui 换肤功能开发

仲灏2021-12-30约 1 分钟

<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/037c03.md for this page in Markdown format</div>

此功能基于

vue 2.6

element-ui 2.13.2

实现

快速切换主题 使用命令行主题工具进行深层次的主题定制

实现原理 ​

  • 主题的css通过public/index.html中的link标签中引入
  • 切换事件中就切换link标签中的css地址即可
    • 避免加载缓慢的问题，提前构建好主题css文件，放置在src/assets或者public文件夹下
  • 结果：

image-20220112165109453

开始实现 ​

使用官方的深度主题构建工具element-theme

  • 克隆仓库 git clone https://github.com/ElementUI/element-theme.git

  • node版本切换到10; 我用的10.24.1

  • 安装好依赖 npm i

  • 安装主题包 npm i element-theme -D

  • 增加npm脚本

    • json
      "scripts": {
    ...
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
   	...
  },

  • 初始化变量文件

    • npm run et:init

    就可以看到多出一个 element-variables.css的文件

  • 然后只需要调整好几个颜色变量即可，使用官方在线构建更准确如果是暗黑模式，就需要把颜色反过来。如

    • image-20220112135601646

    • 然后下载，把其中的json文件中颜色值替换到element-variables.css

    • scss
      /* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #50D6FF !default;
/// color|1|Background Color|4
$--color-white: #121B33 !default;
/// color|1|Background Color|4
$--color-black: #243666 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
/// color|1|Functional Color|1
$--color-success: #16EE9F !default;
/// color|1|Functional Color|1
$--color-warning: #F7D230 !default;
/// color|1|Functional Color|1
$--color-danger: #FE5858 !default;
/// color|1|Functional Color|1
$--color-info: #B2BFD9 !default;

$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;

$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|1|Font Color|2
$--color-text-primary: #DEE7FF !default;
/// color|1|Font Color|2
$--color-text-regular: #BED0FF !default;
/// color|1|Font Color|2
$--color-text-secondary: #919AB3 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #8091BE !default;
/// color|1|Border Color|3
$--border-color-base: #414D6E !default;
/// color|1|Border Color|3
$--border-color-light: #4E5C7F !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #647092 !default;

// Background
/// color|1|Background Color|4
$--background-color-base: #243666 !default;

  • 然后就是构建主题包了 npm run et

element

  • 构建完成后把包放到 public/theme/[名称] 下面

  • 最后用函数去手动引入就好了

    js
    themeColorChangeHandle (val) {
      var styleList = [
        {
          id: 'J_elementTheme',
          url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
        },
      ]
      for (var i = 0; i < styleList.length; i++) {
        var el = document.querySelector(`#${styleList[i].id}`)
        if (el) {
          el.href = styleList[i].url
          continue
        }
        el = document.createElement('link')
        el.id = styleList[i].id
        el.href = styleList[i].url
        el.rel = 'stylesheet'
        document.querySelector('head').appendChild(el)
      }
    }

    问题 ​

  • 出错：ReferenceError: primordials is not defined

    • node版本过高， 降级node到10就差不多了

    • （不想降级node可使用这个方案）

      • 根目录下新建npm-shrinkwrap.json, 其内容如下

      • json
        {
  "dependencies": {
    "graceful-fs": {
        "version": "4.2.2"
     }
  }
}