一、项目中创建 themes.scss 用来定义全局的颜色
$themes: (
// 日间默认 如 font_color1，font_color2 一套主题设置两种颜色，项目需要集中颜色就定义这个主题下有多少颜色
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),
content_color1:rgb(0, 0, 0),
content_color2:rgb(255, 255, 250),
),
// 夜间暗黑
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),
content_color1:rgb(255, 255, 250),
content_color2:rgb(0, 0, 0),
)
);
二、新建 handle.scss 用于 遍历主题
@import "./themes.scss"; // 引入上面定义的themes.scss 日间和夜间主题
//遍历主题map
@mixin themeify {
@each $theme-name, $theme-map in $themes {
$theme-map: $theme-map !global;
//这步是判断html的 自定义属性 data-theme的值 #{}是sass的插值表达式
//& sass嵌套里的父容器标识 @content是混合器插槽，像vue的插槽一样
[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);
}
}
// 获取内容容器的颜色、
@mixin content_color($color) {
@include themeify {
// 内容的背景色
background-color: themed($color);
// 还可以接着写代码、 比如透明度什么的
}
}
三、在根目录下 的vue.config.js 中（如果没有 vue.config.js 自己新建一个）
module.exports = {
publicPath: './',
css: {
loaderOptions: {
sass: {
// 这里路径 记得自己改一下
data: ` @import "@/../src/assets/scss/handle.scss"; `
}
}
},
}
写好之后 重新运行一下项目
四、项目中使用
<template>
<div>
<p>这里是页面</p>
<button @click="toggleTheme(1)">默认主题</button>
<button @click="toggleTheme(0)">暗黑主题</button>
</div>
</template>
<script>
export default {
methods: {
toggleTheme(index) {
window.document.documentElement.setAttribute(
"data-theme",
index ? "dark" : "light"
);
},
},
};
</script>
<style lang="scss" scoped>
// 举个例子 P标签 文字颜色 边框颜色 和背景颜色
p {
@include font_color("font_color1");
@include border_color("border_color1");
@include content_color("content_color1");
}
</style>
网友评论