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

<!--动态定义-->
@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);
}Copy

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