切换浅色和暗夜模式的vue组件 darkmode-switch-btn

简单方案

第一步 

         在head中声明，声明当前页面支持 light 和 dark 两种模式

第二步

        设置不同模式下的全局样式变量，供全局子元素引用，实现模式修改，全局样式一起修改的效果。

注：1.有些属性如background不能实现继承，所以要实现不同元素背景色的统一修改，只能是不同元素使用同一变量。模式修改，变量值会修改，从而实现样式的切换

// 字体
$font-light-color-1: #1b1b1b;

$font-dark-color-1: #1b1b1b;

//背景
$bg-light-color-1: #fff;

$bg-dark-color-1: #1b1b1b;


@mixin light-theme {
  color-scheme: light; // 浏览器提供的元素 UI 中使用的颜色与配色方案的意图相匹配。例如滚动条、拼写检查下划线、表单控件等。

   --text-primary: #{$font-light-color-1};
}

@mixin dark-theme {
  color-scheme:dark; // 浏览器提供的元素 UI 中使用的颜色与配色方案的意图相匹配。例如滚动条、拼写检查下划线、表单控件等。

  --text-primary: #{$font-dark-c