web动态主题设计

WEB / 作者：

调研了一圈当前动态主题的思路，大概这么几种：

  1. 方案一：不同的主题使用不同的css文件，通过切换css文件实现。（2015年之前）；
  2. 方案二：定义css变量，各个元素引用变量，通过修改css变量值实现；
  3. 方案三：在vuex中定义css变量，各个dom template引用vuex store中的变量；
  4. 方案四：直接遍历并修改当前网站所有style，修改style值后，重新加载到htm dom中；

方案二

css变量定义：

:root {
    // 品牌色
    --iios-primary-color: #169BD5;
    // 顶部菜单色
    --iios-header-color: #2F5899;
    // 成功色（绿色）
    --iios-success-color: green; 
    // 低级提示色 （蓝色）
    --iios-Info-color: blue;
    // 中级警告色 （黄色）
    --iios-warning-color:yellow;
    // 高级警告色 （橙色）
    --iios-alarm-color: orange; 
    // 紧急警告色 （红色） 
    --iios-error-color: red;
    // 中性色
    --iios-neutral-color: black;
    --iios-neutral-color-rgb-red: 0;
    --iios-neutral-color-rgb-green: 0;
    --iios-neutral-color-rgb-blue: 0;
    // 基准背景色
    --iios-neutral-bg-color: white;

    --iios-neutral-85: rgba(var(--iios-neutral-color-rgb-red),var(--iios-neutral-color-rgb-green),var(--iios-neutral-color-rgb-blue),0.85);
    --iios-neutral-65: rgba(var(--iios-neutral-color-rgb-red),var(--iios-neutral-color-rgb-green),var(--iios-neutral-color-rgb-blue),0.65);
}

JS修改css变量值：

let root = document.documentElement

root.addEventListener('mousemove', e => {
  root.style.setProperty('--mouse-x', e.clientX + 'px')
  root.style.setProperty('--mouse-y', e.clientY + 'px')
})