一、項目中創(chuàng)建 themes.scss 用來定義全局的顏色?
$themes:?(
??// 日間默認(rèn) 如 font_color1，font_color2 一套主題設(shè)置兩種顏色，項目需要集中顏色就定義這個主題下有多少顏色
??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的插值表達(dá)式
????//&?sass嵌套里的父容器標(biāo)識???@content是混合器插槽，像vue的插槽一樣
????[data-theme="#{$theme-name}"]?&?{
??????@content;
????}
??}
}
//聲明一個根據(jù)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);
??}
}
//?獲取內(nèi)容容器的顏色、
@mixin?content_color($color)?{
??@include?themeify?{
????//?內(nèi)容的背景色
????background-color:?themed($color);
????//?還可以接著寫代碼、 比如透明度什么的
??}
}
三、在根目錄下 的vue.config.js 中（如果沒有 vue.config.js? 自己新建一個）
module.exports?=?{
??publicPath:?'./',
??css:?{
????loaderOptions:?{
??????sass:?{
? ? ? ? ? ? // 這里路徑 記得自己改一下
????????data:?` @import?"@/../src/assets/scss/handle.scss"; `?
? ? ?}
????}
??},
}
寫好之后 重新運(yùn)行一下項目
四、項目中使用
<template>
??<div>
????<p>這里是頁面</p>
????<button?@click="toggleTheme(1)">默認(rèn)主題</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標(biāo)簽 文字顏色 邊框顏色 和背景顏色
p?{
??@include?font_color("font_color1");
??@include?border_color("border_color1");
??@include?content_color("content_color1");
}
</style>
