从0开始搭建后台管理系统-03（自定义主题）

1. 介绍

在官网、后台管理、文档页等长时间浏览的页面，都会内置多套样式。可以缓解视觉疲劳、审美疲劳。主题最基本就是明亮和黑暗，一个日间使用一个夜间使用，当然也可以写几套活力一点的颜色。本篇文章介绍如何在vue中使用自定义主题。

2. 详解

2.1 思路

本框架的主题切换采用的是：

1. 将颜色变量都挂载在HTML元素中，通过--theme-color:#fafafa;这种方式定义CSS全局颜色变量，属性名必须以--开头。
2. 再将变量赋值给less，@theme-color: var(--theme-color);，在同过@theme-color去使用该变量。
3. vite中配置预加载的css变量，不然会导致获取不到，如下：

css:{
      preprocessorOptions:{
          less:{
              math:true,
              javascriptEnabled:true,
              additionalData: `@import "./src/assets/style/preload/index.less";` // 预加载
          }
      }
    },

1. 解决其他插件的样式，像elementPlus、echarts都有自己的内置主题，可以直接使用
   elementPlus
   echarts主题
   本框架是将这些重新定义了一套，但是echarts比较麻烦，每个图表可能样式不同。

2.2 变量定义

全局css变量，定义了基本颜色、label颜色、侧边栏颜色。也可以不用定义这么多。
暗黑模式减少了对比度：值是 0% 将使图像变灰；值是 100%，则无影响；防止有些地方未定义样式刺眼。该属性只对亮色影响。

/* src > assets > style > preload > variables.css */
:root {
    --header-height:50px;
    --tag-height:34px;
    --aside-max-width:220px;
    --aside-min-width:64px;
}

html.dark {
    --theme-bg-color: #121212;
    --theme-color: #272727;
    --theme-font-color: #e2e2e2;
    --theme-active-color: #9DB2BF;
    --theme-line-color:#555555;

    /* label */
    --theme-label-active-color: #555555;
    --theme-label-active-font-color:#e2e2e2;

    /*    侧边栏*/
    --theme-aside-bg-color:#1f1f1f;
    --theme-aside-active-bg-color: #063e71;
    --theme-aside-font-color:#cccccc;
    --theme-aside-active-font-color:#ffffff;

    filter:saturate(0.5);
}


html.light {
    --theme-color: #fafafa;
    --theme-bg-color: #e0e0e0;
    --theme-font-color: #262626;
    --theme-active-color: #9DB2BF;
    --theme-line-color:#e2e2e2;

    /* label */
    --theme-label-active-color: #409eff;
    --theme-label-active-font-color:#fff;

/*    侧边栏*/
    --theme-aside-bg-color:#001527;
    --theme-aside-active-bg-color: #063e71;
    --theme-aside-font-color:#cccccc;
    --theme-aside-active-font-color:#ffffff;
}

/* src > assets > style > preload > variables.less */
// global variable
@header-height:var(--header-height);
@tag-height: var(--tag-height);
@aside-max-width:var(--aside-max-width);
@aside-min-width:var(--aside-min-width);

// theme common variable
@theme-color: var(--theme-color);
@theme-bg-color: var(--theme-bg-color);
@theme-font-color: var(--theme-font-color);
@theme-active-color: var(--theme-active-color);
@theme-line-color:var(--theme-line-color);

// theme label variable
@theme-label-active-color: var(--theme-label-active-color);
@theme-label-active-font-color:var(--theme-label-active-font-color);


// theme aside variable
@theme-aside-bg-color:var(--theme-aside-bg-color);
@theme-aside-active-bg-color:var(--theme-aside-active-bg-color);
@theme-aside-font-color:var(--theme-aside-font-color);
@theme-aside-active-font-color:var(--theme-aside-active-font-color);

2.3 变量预加载

定义一个预加载的文件入口

// src > assets > style > preload > index.less
@import "./variables.less";
@import "./elementPlus.less";

export default defineConfig({
    ...
css:{
      preprocessorOptions:{
          less:{
              math:true,
              javascriptEnabled:true,
              additionalData: `@import "./src/assets/style/preload/index.less";`
          }
      }
    },
})

2.4 修改elementPlus主题

以侧边栏为例，因为是改了--el-menu-... 的全局属性，同样需要预加载才能实现。

/** 侧边栏 */
.el-menu {
  width: 100%;
  height: calc(100% - @header-height);
  border: 0!important;
  white-space: nowrap;
  --el-menu-text-color:@theme-aside-font-color;
  --el-menu-hover-bg-color:@theme-aside-active-bg-color;
  --el-menu-bg-color:@theme-aside-bg-color;
  --el-menu-active-color:@theme-aside-active-font-color;
}
.el-popper{
border: 0;
}

.el-card{
  color:@theme-font-color!important;
  border:1px solid @theme-line-color!important;
  background-color:@theme-color!important;
 .el-card__header{
    border-bottom: 1px solid @theme-line-color!important;
  }
  .el-card__body{
    padding: 0;
  }
}

.el-table__inner-wrapper{
  background-color: @theme-color!important;
}

2.5 使用

由于用additionalData配置过，在本框架任意位置都可以直接使用变量，如:

.tag {
      padding: 2px 3px;
      height: min-content;
      background-color: @theme-label-active-color;
      color: @theme-label-active-font-color;
      border-radius: 2px;
    }

3.本框架其他文章链接

GitHub开源链接：GitHub - grxynl/vue3-admin-template: vue3+TypeScript+pinia 后台管理系统模板
从0开始搭建后台管理系统（首篇）
从0开始搭建后台管理系统-01（Login登录）
从0开始搭建后台管理系统-02（Layout布局）（上篇）
从0开始搭建后台管理系统-02（Layout布局）（下篇）

4. 结束语

本框架完全免费，框架尚有不足，供前端爱好者一起讨论，一起学习。 源码和文档都制作不易，如果觉得您还可以的话，求一个stars，这是对我最大的支持，也是本框架前进的最大动力。