欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue结合sass进行主题切换(完整简单示例展示)

程序员文章站 2022-04-14 14:01:23
包含两个scss文件,一个存主题样式,一个控制主题切换测试页面&...

包含两个scss文件,一个存主题样式,一个控制主题切换

测试页面

<template>
  <div>
    <p>测试
      <button @click="toggleTheme(1)">蓝色</button>
    <button @click="toggleTheme(0)">红色</button>
    </p>
    
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  methods: {
    toggleTheme(index) {
      console.log(window.document.documentElement)
      //修改html的主题
      window.document.documentElement.setAttribute(
        "data-theme",
        index ? "dark" : "light"
      );
    }
  }
};
</script>
<style scoped lang="scss">

@import '@/assets/css/_handle.scss';
p{
  font-size: 18px;
  width: 100%;
  height: 100vh;
  text-align: center;
  @include font_color('font_color1');
  @include background_color("background_color1");
  @include border_color("border_color1");
}
</style>

主题scss页面,_themes.scss

//定义全局主题&颜色的map数组,鉴于V5只有白天和晚上的主题,此处仅定义这两种
//切记 所有颜色一式两份儿,务必保证key值统一,key值可以自定义,注意避免$%_之类的,
//与sass自有符号冲突,见文知意即可
//另外如果基于其他UI框架,如本项目基于element-ui,则只需设置一套dark主题,
//data-theme为dark时,样式引用dark
//data-theme为其他值时,自然就采用了elementui的默认样式
$themes: (
  light: (
    font_color1: rgb(196, 193, 193),
    font_color2: rgb(110, 109, 109),
    background_color1: rgb(255, 0, 21),
    background_color2: rgb(87, 87, 226),
    border_color1: rgb(231, 181, 181),
    border_color2: rgb(9, 255, 0)
  ),
  dark: (
    font_color1: rgb(226, 222, 222),
    font_color2: rgb(255, 255, 255),
    background_color1: rgb(87, 87, 226),
    background_color2: rgb(255, 0, 21),
    border_color1: rgb(9, 255, 0),
    border_color2: rgb(231, 181, 181)
  )
);

主题控制scss文件_handle.scss

@import "@/assets/css/_themes.scss";
//此处用了sass的map遍历、函数、map存取、混合器等相关知识,
//详细API参考https://www.sass.hk/docs/
//遍历主题map
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    //!global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    //这步是判断html的data-theme的属性值  #{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽,像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}
//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key);
}
//暂时想到的常用的开发场景下面三种背景颜色、字体颜色、边框颜色  至于阴影什么之类的忽略了
//获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color);
  }
}
//获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color);
  }
}
//获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color);
  }
}

本文地址:https://blog.csdn.net/DXL131795/article/details/107234675