scss实现换主题

• 1.创建一个skin.scss文件保存创建的主题样式

@charset "UTF-8";
$dark_primary:#383838;
$themes:(
    light:(
        font_size:14px,
        font_color:rgba(0,0,0,0.9),//除主题内容的字体颜色
        background_color:#fff,  // 除主题内容的bg颜色
        active_color:#0052d9,
        page_bg_color:#eee,  // 主题内容bg颜色
        btn_bg_color:#e7e7e7,
        border_color:#dcdcdc, // 按钮边框
    ),
    dark:(
        font_size:14px,
        font_color:#fff,
        background_color:#242424,
        active_color:#0052d9,
        page_bg_color:$dark_primary,
        btn_bg_color:$dark_primary,
        border_color:$dark_primary,
    )
);

• 2.创建一个mixin.scss文件, 书写换肤逻辑

@charset "UTF-8";
@import "./varibale";  //引入主题样式

@mixin themeify() {
//循环主题类别,读取主题样式
  @each $theme-name,
  $theme-map in $themes {
    $theme-map: $theme-map !global;

    [data-theme="#{$theme-name}"] & { //读取html自定义属性,当属性值等于主题名时 执行
      @content; //使用themeify()时可以用自己的代码替换
    }
  }
}

@function themed($key) {  //读取主题列表中的值
  @return map-get($theme-map, $key);
}

//背景色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color);
  }
}

// 页面主体背景
@mixin page_bg_color($color) {
  @include themeify {
    background: themed($color);
  }
}

// 文字
@mixin font_color($color) {
  @include themeify {
    color: themed($color);
  }
}

// 边框
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color);
  }
}

// 按钮
@mixin btn_bg_color($color) {
  @include themeify {
    background: themed($color);
  }
}

• 3.使用, 修改主题 只要改html的自定义属性名即可

//App.VUE


</script>

<template>
  <div>
    <router-view />

  </div>
</template>


<script setup lang="ts">
import { storeToRefs } from 'pinia'
// import { useSystemStore } from '@/store/modules/system'
import { watch } from 'vue';
 //配个pinia 实现保存上次设置的主题
// const store = useSystemStore()
// const { theme } = storeToRefs(store)

//给html添加自定义属性, 属性名就是 主题名
window.document.documentElement.setAttribute('data-theme', "light")


<style scoped lang='scss'>
div{
@include background_color('background_color');
}
</style >