浅析前端一键换肤5种方案：css样式覆盖、实现多套css主题、css自定义变量实现、webpack-theme-color-replacer插件实现自定义主题色、UI框架自定义主题功能

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
  }
}

// 无UI库依赖的主题切换
// 核心思想：css3 中的 :root 伪类选择器和 var 变量的应用
// 1、定义主题变量
:root {
    --theme-color: #ccc;
}
// 2、使用主题变量
.test{
    color: var(--theme-color);
}
// 3、动态改变主题
document.documentElement.style.setProperty('--theme-color', '#fff');

/* 实现方式一 */
:root {
  --theme-bg: initial; // 背景色
  --theme-color: initial; // 字体色
  --theme-boder-color: initial; // 边框色
}
/* 实现方式二 */
/* 默认值：light */
:root {
  --theme-bg: #fff;
  --theme-color: rgb(51, 50, 50);
  --theme-img-bg: #fff;
  --theme-boder-color: #d6d6d6;
}
/* 暗黑：dark */
[data-theme='dark'] {
  --theme-bg: rgb(51, 50, 50);
  --theme-color: #fff;
  --theme-boder-color: #fff;
}

const darkTheme = 'rgb(51, 50, 50)'
const lightTheme = '#fff'
const lightBorderTheme = '#d6d6d6'
// 获取对应的主题色值
export const getThemeMap = (isLight) => {
  return {   // 这里其实可以通过 key value 去设置多种主题的样式
    'theme-bg': isLight ? lightTheme : darkTheme,
    'theme-color': isLight ? darkTheme : lightTheme,
    'theme-boder-color': isLight ? lightBorderTheme : lightTheme,
  }
}
// 设置主题色值
export const setTheme = (isLight = true) => {
  const themeMap = getThemeMap(isLight)
  const body = document.body
  /* 实现方式一 */ 设置全局的css变量
  Object.keys(themeMap).forEach(key => {
    body.style.setProperty(`--${key}`, themeMap[key])
  })
  /* 实现方式二 */  设置局部的css变量，局部的会覆盖全局的变量
  // body.setAttribute('data-theme', isLight ? 'light' : 'dark')
}