夜晚模式的实现

在毕业项目的实现中,前端的layout搭建时想要去实现夜晚模式。

使用的技术：vue3、pinia、sass ，样式框架：arco.design

效果如图：

第一步： 创建varibale.scss 文件 夜晚模式首先要为白天和夜晚两种情况下的背景颜色和字体进行设置

//字体，背景的配置文件
//颜色定义规范
$background-color-theme1: #ffffff;//背景主题颜色默认
$background-color-theme2: #17171A;//背景主题颜色1

 
$font-color-theme1 : #636662;//字体主题颜色默认
$font-color-theme2 : white;//字体主题颜色1

创建mixin.scss文件，觉得引入main.js中 配置修改背景颜色和字体颜色的函数

// 定义mixin方法的文件。
@charset "utf-8";
@import "./varibale.scss";/*引入配置*/
@mixin font_size($size){/*通过该函数设置字体大小，后期方便统一管理；*/
  @include font-dpr($size);
}
@mixin font_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
	color:$color;
  [data-theme="theme1"] & {
    color:$font-color-theme1;
  }
  [data-theme="theme2"] & {
    color:$font-color-theme2;
  }
}
@mixin bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color:$color;
  [data-theme="theme1"] & {
    background-color:$background-color-theme1;
  }
  [data-theme="theme2"] & {
    background-color:$background-color-theme2;
  }
  
}

第二步： 在App.vue中设置样式

<style lang="scss">
@import "./style/mixin.scss";
p {
  @include font_color($font-color-theme1);
}
.icon_div {
  svg {
    @include font_color($font-color-theme1);
  }
}
.arco-theme {
  @include bg_color($background-color-theme1);
}
</style>

第三步 在pinia创建的store中进行配置具体修改， 在app.store.js中的action中添加下面的函数

toggleThem(data) {
      if (data) {
        this.them = "dark";
        document.body.setAttribute("arco-theme", "dark");
        window.document.documentElement.setAttribute("data-theme", "theme2");
      } else {
        this.them = "light";
        document.body.removeAttribute("arco-theme");
        window.document.documentElement.setAttribute("data-theme", "them1");
      }
    },

第四步：在前端进行调用store中的方法就可以了

        <div class="icon_div">
          <icon-sun-fill @click="handleToggleTheme" />
        </div>
        const handleToggleTheme = () => {
          toggleTheme();
        };