PC端專案的暗黑和正常主題的切換設定

打個比方，最近有個節日，老闆想讓線上的系統有乙個暗黑主題色，但是節日過後還需要變回原來的背景色，這個時候我們就需要考錄到讓暗黑主題色和正常主題色都存在，由此不僅省去了軟體的多次修改，也讓軟體多了層特效。廢話不多說，拉起柚子開始絮叨絮叨如何實現的

對於實現全域性背景色加字型的切換肯定少不了外掛程式：yarn add sass-resources-loader

二、在assets檔案中引入scss檔案，其中包含theme-mixin.scss、theme-var.scss兩個檔案

1.首先在theme-mixin.scss檔案中定義字型顏色和背景顏色的方法

/* --------------------------------設定字型顏色---------------------- */

@mixin font_color(

$font_color_black, //黑色主題時字型顏色

$font_color_white, //白色主題時字型顏色

$font_weight_black: normal, //是否需要加粗

$font_weight_white: normal //是否需要加粗

) "] &

// 主題為白色時的字型顏色

[data-theme="#"] &

} /* ----------------------------------設定字型顏色------------------- */

/* --------------------------------設定背景顏色---------------------- */

@mixin bg_color($bg_color_black, $bg_color_white) "] &

// 主題為白色時的背景顏色

[data-theme="#"] &

} /* ----------------------------------設定背景顏色------------------- */

/* --------------------------------自定義設定屬性---------------------- */

//第乙個為屬性值，第二個為黑色主題時的顏色，第三個引數為白色主題時的引數，最後乙個引數為接受不確定的引數個數，類似於reset引數

@mixin setattribute($attribute, $bg_color_black, $bg_color_white, $value...) "] & : $bg_color_black $value; //#{}為插值語法解析成字串多用在屬性值以及選擇器上比如#-right: 1px solid #fff;

}// 主題為白色時的背景顏色

[data-theme="#"] & : $bg_color_white $value;

}}2.在theme-var.scss檔案中設定按鈕切換時的屬性值

// 主題風格list

$theme-black: 'black';

$theme-white: 'white';

$theme-list: 'black', 'white';

三、在vue.config.js中引入定義的模組

定義結果如下：
chainwebpack: config => )
.end();
});}

四、在store->modules->common.js中引入

state:	theme: localstorage.getitem('data-theme') ?? 'black'
mutations:
[types.change_theme](state, param)

五、在store->mutation-types.js中註冊

// 更改主題
export const change_theme = 'change_theme';

六、在home元件引入

import  from 'vuex';
computed: ,
watch: ,
immediate: true
}},

七、在元件中使用

@include font_color() =>修改字型顏色

@include bg_color() => 修改背景顏色

PC端專案的暗黑和正常主題的切換設定

如何在專案PC端和手機端使用的rem,怎麼設定

vue專案移動端 pc端適配方案

vue專案移動端 pc端適配方案

PC端專案的暗黑和正常主題的切換設定

如何在專案PC端和手機端使用的rem,怎麼設定

vue專案移動端 pc端適配方案

vue專案移動端 pc端適配方案

相關推薦