提示：以下是本篇文章正文内容，主要描述使用 css/less 动态更换主题色（换肤功能）

前言

提示：使用 css/less 动态更换主题色（换肤功能），方法共通，不限制技术栈：

其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求，这时候就需要通过动态更改主题色来实现预期的效果；

一、CSS中原生变量“--”和var()

示例：开始之前先稍微了解一下变量“--”和var()，在动态改变主题色中会经常用到这两个变量

@表示我们定义的的变量名称

css中原生的变量定义语法是：--@

例如定义一个边框颜色变量： --border-color: #D9EEE2;

css中变量使用语法是：var(--@)

例如使用定义的边框颜色变量：border: 0.1rem solid var(--border-color);

二、使用步骤

1、自定义样式变量，定义css方法（可以定义多个css样式）

要注意的是不管定义了几个主题色，都要确保定义的变量名保持一致。

// theme.less
/*
 *这里为我们自定义主题色，可以根据自己的需求定义多组样式
 *
*/
// 主题类型定义
:root {
  // 背景色
  --bg-color: #D9EEE2;
  --border-color: #D9EEE2;
  // 很多图标、border都用这个颜色
  --icon-color: #108372;
  // 按钮背景色
  --button-bg-color: var(--dominant-color);
  // 选中字体和图表颜色
  --active-font-color: #037181;
  // hover字体和图表颜色
  --hover-font-color: var(--dominant-color);
  // logo
  --logo: url('你的图片路径')  no-repeat center center;
 ...
 ...
 ...
}
/* 这里假设为我们自定义的主题  */
:root[theme = 'defined'] {
  // 背景色
  --bg-color: pink;
  --border-color: pink;
  // 很多图标、border都用这个颜色
  --icon-color: pink;
  // 按钮背景色
  --button-bg-color: pink;
  // 选中字体和图表颜色
  --active-font-color: pink;
  // hover字体和图表颜色
  --hover-font-color: var(--dominant-color);
  // logo
  --logo: url('你的图片路径')  no-repeat center center;
 ...
 ...
 ...
}

2、使用已定义的变量

使用其实很简单，只要根据主题色动态改变的地方通过var()引用已经定义的样式变量就可以；

/*
 *  这里举个简单的例子 child.less(这里就是项目中引用的css文件)
 */
.root{
  .main{
    background：var(--bg-color);
    border:1px solid var(--border-color);
    
    ...
    
  }
    ...
}

3、用户操作，切换对应的主题

通过设置属性自动匹配选择颜色主题，会修改对应的样式；

1）、首先你跟据需求在特定位置定义好主题切换功能键；

这里是定义的结构体，仅作参考（你可以根据自己项目的框架使用对应的组件都是ok的，没啥特殊要求）

    
      
        
          
          主题
        
      
    

// 这里的items就是你要定义的主题的种类，没有key代表一个主题色标识
  const menu = (
    
  );

/*主题色选择后的回调*/
const setThemeFun =(e)=>{
// 这里其实就是将主题表示存在state里，在menu中展示，  默认 const [theme, setTheme] = useState(['default']);
 setTheme([e.key]); 
 //通过修改属性，会用对应的样式
 document.documentElement.setAttribute('theme', e.key);
}

// 在你需要的时候存在来
localStorage.setItem('theme', e.key);
//特定情况取出来使用就可以了
const defaultTheme = localStorage.getItem('theme');
 if (defaultTheme) {
      setTheme([defaultTheme]);
      document.documentElement.setAttribute('theme', defaultTheme);
 }