后台系统更改主题【el-color-picker】

Element el-color-picker 颜色选择器的使用

设置的页面

在store里面保存一个颜色变量值

获取主题颜色的方法写在colorChange.ts

// 获取主题颜色
export function getThemeColor() {
  // 有缓存用缓存，没缓存用默认
  let cache_theme_bgColor = sessionStorage.getItem("theme_bgColor");
  if (cache_theme_bgColor) {
    document.documentElement.style.setProperty(
      "--theme_bgColor",
      cache_theme_bgColor
    );
    return cache_theme_bgColor;
  } else {
    let theme_bgColor = getComputedStyle(
      document.documentElement
    ).getPropertyValue("--theme_bgColor");
    return theme_bgColor;
  }
}

:root定义全局样式和变量
定义 :root 后，所有变量都将被保存在 :root 中，并且可以在整个页面的任何位置使用。这使得我们可以轻松地为网站设置一些通用的变量，如颜色、字体、间距等等

reset.css【在main.ts里全局引入】

:root {
  --theme_bgColor: #fff;
}

在layout获取颜色的变量值【以防一刷新颜色值丢失】
如果需要让页面背景变可以再layout 获取一次颜色值
如果需要侧边栏背景色也变，可以sidebar获取颜色变量值