vue3切换theme功能

切换主题，老生常谈。反正我是第一次弄，还挺巧妙

我的实现方式是通过:root的修改，来一键换色

  :root {
    // 主题色
    --ry-primary-color: #ff9c00;
    // layout部分
    --ry-header-height: 60px;
    --ry-logo-color: #5d5d5d;
    --ry-logo-background-color: #fff;

    // element主题色修改
    --el-color-primary: var(--ry-primary-color);
  }

接着在.ts文件里设置切换后的主题色，后面再用逻辑把设置的值赋值到css里

  export interface Color {
    primary: {
  	color: String
    }
    logo: {
  	color: string
  	backgroundColor: string
    }
  }

  interface Style {
    light: Color
    dark: Color
  }

  export const style: Style = {
    light: {
  	primary: {
  	  color: '#ff9c00'
  	},
  	logo: {
  	  color: '#5d5d5d',
  	  backgroundColor: '#fff'
  	}
    },
    dark: {
  	primary: {
  	  color: '#282724'
  	},
  	logo: {
  	  color: '#fff',
  	  backgroundColor: '#2a2a2a'
  	}
    }
  }

重点来了，切换theme逻辑

  changeTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light'
    const userTheme: Color = style[this.theme]
    const root = document.documentElement
    for (let i in userTheme) {
      const item: any = userTheme[i as keyof Color]
      for (let j in item) {
        const cssVarName =
          '--ry-' + i + '-' + j.replace(/([A-Z])/g, '-$1').toLowerCase()
        root.style.setProperty(cssVarName, item[j])
      }
    }
  }

我这里是只设置了light和dark主题，如果主题多了，可以通过传参完成，key要和上面设置的style的key对应上。

通过对对象的遍历，key拼接-，再对小驼峰命名替换为-拼接，最后放到:root里面进行整体样式重置