一、前端换肤几种方法

通过切换 `css` 选择器的方式实现主题样式的切换

实现多套 CSS 主题样式，根据用户切换操作，通过 `link` 标签动态加载不同的主题样式

export default function setTheme(theme = 'ligth') {
  let link = document.querySelector('#theme-link')
  let href = "/theme/" + theme + ".css"
  
  if (!link) {
    let head = document.querySelector('head')
    link = document.createElement('link')
    link.id = '#theme-link'
    link.rel = "stylesheet"
    link.href = href
    head.appendChild(link)
  } else {
    link.href = href
  }
}

CSS 变量实现

通过 body.style.setProperty(key, value) 动态修改 body 上的 CSS 变量，使得页面上的其他部分可以应用最新的 CSS 变量对应的样式

<style scoped>
.header {
  ...省略
  color: var(--theme-color);
  border-bottom: 1px solid var(--theme-boder-color);
  background-color: var(--theme-bg);
}
</style>

二、antd与element-ui

element-ui

writeNewStyle() { 
  let cssText = this.originalStyle;       
  Object.keys(this.colors).forEach(key => {     
     cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + this.colors[key]); 
  });                                                                         
  if (this.originalStylesheetCount === document.styleSheets.length) { 
     const style = document.createElement('style');  
     style.innerText = cssText; 
     document.head.appendChild(style);  
   } else {  
     document.head.lastChild.innerText = cssText;       
   }                                                       
},

开发过程中可以增加element-variables.scss，写入以下内容：

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

antd

ant.design 官网中切换主题，是在 html 标签加里 color-scheme 和在 body 里添加自定义标签 data-theme="dark"，和:root 配合改变

开发过程中可以

1，配置webpack less-loader变量
2，配置less变量文件进行覆盖

@import '~antd/es/style/themes/default.less';
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 覆盖上面定义的变量

3，动态样式

// 替换引入 antd.variable.min.css
 -- import 'antd/dist/antd.min.css';
 ++ import 'antd/dist/antd.variable.min.css';

 // 调用 ConfigProvider 配置方法设置主题色：
import { ConfigProvider } from 'antd';
  ConfigProvider.config({
      theme: {
        primaryColor: '#25b864',
      },
  });

参考文章

前端换肤的N种方案

欢迎关注我的前端自检清单，我和你一起成长

前端换肤

一、前端换肤几种方法

通过切换 css 选择器的方式实现主题样式的切换

实现多套 CSS 主题样式，根据用户切换操作，通过 link 标签动态加载不同的主题样式