vue element框架动态修改夜间模式

主要步骤：

• 生成夜间模式的element主题
• 动态更换element主题
• 侧边栏动态修改
• 按钮触发动态修改

生成夜间模式的element主题

文档地址

需要注意的点：1.除去项目内安装的包之外，gulp还需要全局安装 2.gulpfile.js文件中的customThemeName可修改样式的类名

动态更换element主题

切换对应深色主题

toggleClass(document.body, 'theme-dark')

/**
 * @param {HTMLElement} element
 * @param {string} className
 */

export function toggleClass(element, className) {
  if (!element || !className) {
    return
  }
  let classString = element.className
  const nameIndex = classString.indexOf(className)
  if (nameIndex === -1) {
    classString += '' + className
  } else {
    classString =
      classString.substr(0, nameIndex) +
      classString.substr(nameIndex + className.length)
  }
  element.className = classString
}

侧边栏样式修改

思路 定义两套scss变量动态根据主题动态修改

scss文件

<!--动态定义-->
@mixin body_color($color){ //@mixin 后面的函数名称为自定义。
  background-color: $color;   //背景色默认为参数
  [data-theme="dark"] & {    //如果data-theme的值为dark，background-color就使用$bodyBgDark
    background-color: $bodyBgDark;   
  }
}

<!--引用并传入默认值-->
#app {
  @include body_color($bodyBg);
}

js文件

<!--给element设置data-theme属性，scss文件中就可以接收到对应属性的值-->
window.document.documentElement.setAttribute('data-theme', 'dark')

按钮触发动态修改

点击按钮的事件将主题名称存储至仓库，并根据情况触发toggleClass和setAttribute的方法实现夜间模式

本作品采用《CC 协议》，转载必须注明作者和本文链接