前端–网站换色方案

一，开发环境

• 框架：vue
• css：less

二，前言

最近在处理业务的时候，遇到一个需求，要求前端能够根据接口返回类型，更改网站配色方案，思考了一下，市面上有许多换色的案例（如：花裤衩大佬的vue-element-admin），但是由于自己项目并不是比较复杂，所以自己打算重新找方案写个适合自己项目并且容易理解的。

三，如何开始？

1，安装less

$ npm install -g less

全局安装less之外，我们还需要使用到less.min.js
这里贴上地址，需要可以自己下载 less.min.js

2,配置自己的主题色

我们在项目的工具文件夹新建一个themeColor.js文件，配置颜色方案

/*
 * @Description: 主题切换
 * @Author: TQF
 * @Date: 2021-6-29 16:55:06
 * @LastEditors: TQF
 * @LastEditTime: 2021-7-03 14:44:27
 */
const lesscolor = {
  black: {
    '@nav_background': '#262F3E',
    '@Sidebar_background': '#fff', // 左侧背景颜色
    '@Sidebar_active_background': '#F4F6FA', // 选中背景颜色
    '@Sidebar_text_color': '#707070',
    '@Sidebar_text_active': '#457BF7',
    '@nav_text': '#bdc2c4',
    '@nav_text_active': '#fff',
  },
  blue: {
    '@nav_background': '#0085FF',
    '@Sidebar_background': '#E9F5FF',
    '@Sidebar_active_background': '#D3EBFF',
    '@Sidebar_text_color': '#424E67',
    '@Sidebar_text_active': '#0085FF',
    '@nav_text': '#b3daff',
    '@nav_text_active': '#fff',
  },
}
//导出修改颜色方法
export async function changeThemeless(type = 'white') {
  const _lesscolor = lesscolor[type] || lesscolor['white']
  window.less && window.less.modifyVars(_lesscolor)
}

复制代码

在项目public中引入less.min.js 和创建一个全局的配色css文件，如：

我们看一下theme.css的内容

@charset "utf-8";

@nav_background: #457BF7; // 背景颜色

.nav_color_mixin(@value, @type) when (@value =#457BF7),
(@value =#0085FF),
(@value =#262F3E) {
  @{type}: @value  !important;
}

.nav_color_mixin(@value, @type) when (default()) {
  @{type}: #457BF7 !important;
}

@Sidebar_background: #E9F5FF; // 左侧背景颜色
@Sidebar_active_background: #457BF7; // 选中背景颜色
@Sidebar_text_color: #424E67; // 选中背景颜色
@Sidebar_text_active: #424E67; // 选中背景颜色
@nav_text: #bdc2c4; //导航字体颜色
@nav_text_active: #fff; //导航激活的颜色

@text_color_logo: #fff; // logo文字颜色
@text_color_logo_text: #fff; // logo文字颜色

@margin_top: 10px; // 顶部距离

// 顶部导航部分
// 顶部导航背景色
._nav_theme_bg {
  background-color: @nav_background  !important;
}

._nva_text_color {
  color: @nav_text_active  !important;
}

.nav {
  .el-menu-item {
    color: @nav_text  !important;

    &.is-active {
      color: @nav_text_active  !important;

      span {
        border-bottom: 2px solid @border_menu  !important;
      }
    }
  }
}

// 分页配置
.pagination-container {
  .el-pager li.active {
    color: #fff;
    .nav_color_mixin(@nav_background, background-color)
  }
}

复制代码

其中定义的less属性变量 如 @nav_background 要与之前themeColor.js文件中定义的主题中的变量相同，因为通过js文件中传入的变量会替换当前的属性值，如：
当前theme.css配置的 @nav_background 为 #457BF7

当调用themeColor.js后，会根据你调用的主题，如调用了black配色方案， 会替换为black下的
‘@nav_background’: ‘#262F3E’ 该值。

我们在根据下面定义的class 去调用对应的less变量定义的属性:
如

.nav {
    color： @nav_background  !important;
}
复制代码

在页面节点中去使用该（.nav）类名，就能实现网站自定义换色。

这里只是简单描述，需要自行根据项目，配置类名，配置定义的less变量，然后对应类名去调用对应变量就可以了。

四，如何使用？

一般需要改网站色值我们都是在入口文件就去处理，或者给定选择器，由用户操作之后，在去执行方法修改。

我们在app.vue中使用

五，使用的主要技术less（modifyVars）

modifyVars
根据文档说明，使用modifyVars
会使得渲染结束时你的基础文件,这意味着它将会覆盖任何少文件中定义。

具体用法参考less文档 less