快捷導(dǎo)航

Vue項(xiàng)目配置、切換主題顏色詳細(xì)教程(mixin+scss方式,簡(jiǎn)單高效)

更新時(shí)間：2023年11月22日 10:51:19 作者：h395910638

這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目配置、切換主題顏色(mixin+scss方式)的相關(guān)資料,根據(jù)預(yù)設(shè)的配色方案,在前端實(shí)現(xiàn)動(dòng)態(tài)切換系統(tǒng)主題顏色,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

一. 首先，引入scss依賴(lài)（node-sass, sass-loader)

npm install node-sass sass-loader --save-dev

二.項(xiàng)目樣式文件目錄介紹

1.此處我將項(xiàng)目中的公共樣式文件放到了 src/style目錄下，其中 index.scss是以供全局使用的一些基本樣式，在main.js文件中引入即可全局使用（圖2）。 _theme.scss, _handle.scss兩個(gè)文件為我們稍后進(jìn)行主題顏色配置的文件.

三.主題目錄scss文件配置

1.src/style目錄下的_themes.scss，里面可以配置不同的主題配色方案，這里我配置了三個(gè)主題顏色，分別為basic、red、blue。
_themes.scss文件內(nèi)容：

$themes: (
    basic: (
        basic_color: #3064E7,// 主題色
        logo_color: #3064E7,   // 主題色字體
        title_color: #494D50, //新增、注冊(cè)、行業(yè)標(biāo)頭字體顏色
        foot_tolor: #5E6165, // 頁(yè)腳字體顏色
        font_color1: #909399,
        font_color2: #909399,
        // 小logo圖片
        logo_image: url('@/assets/image/logo.png'), 
        // 大logo圖片
        big_logo_image: url('@/assets/image/logo_big.png'), 
        // banner圖片
        banner_image: url('@/assets/image/basic_banner.png'),
        // 首頁(yè)搜索按鈕
        search_btn: linear-gradient(187deg, #5E9DF5 0%, #3064E7 47%),
        // 注冊(cè)動(dòng)態(tài)下邊框
        border_bottom_1: 1px solid #3064E7,
        // 注冊(cè)動(dòng)態(tài)邊框
        card_border_1: 1px solid rgba(208,211,219,1),
        // 注冊(cè)動(dòng)態(tài)卡片背景
        zhuce_card: #fff,
        // 新聞標(biāo)題聚焦顏色
        font_hover: #3064E7,
        //背景
        navbar_background: #fff,
        background_color2: #f0f2f5,
        // 新聞時(shí)事背景
        // news_background:  #fff,
        // 注冊(cè)動(dòng)態(tài)背景
        zhuce_background:  #fff,
        // 行業(yè)資訊背景
        hangye_background: #fff,
        background_color3: red,
        background_color4: #2674e7,
        //邊框
        border_bottom: 5px solid #4554DE,
    ),
    red: (
        basic_color: #D0021B,
        logo_color: #fff,
        title_color: #494D50, //新增、注冊(cè)、行業(yè)標(biāo)頭字體顏色
        foot_tolor: #5E6165, // 頁(yè)腳字體顏色
        font_color1: #909399,
        font_color2: #fff,
        // 新聞標(biāo)題聚焦顏色
        font_hover: #D0021B,
         // 小logo圖片
        logo_image: url('@/assets/image/logo_white.png'),  
        // 大logo圖片
        big_logo_image: url('@/assets/theme/redTheme/logo-b.png'), 
        // banner圖片
        banner_image: url('@/assets/theme/redTheme/banner-bg.png'),
         // 首頁(yè)搜索按鈕
        search_btn: linear-gradient(187deg, #d20000  0%, #da0707de  47%),
        // 注冊(cè)動(dòng)態(tài)下邊框
        border_bottom_1: 2px solid #D0021B ,
        // 注冊(cè)動(dòng)態(tài)邊框
        card_border_1:  1px solid rgba(208,211,219,1),
        // 注冊(cè)動(dòng)態(tài)卡片背景
        zhuce_card: #fff,
        //背景
        navbar_background: url('@/assets/theme/basicTheme/top-bg.png'),
        background_color2: #283142,
        // 新聞時(shí)事背景
        // news_background:  #fff,
        // 注冊(cè)動(dòng)態(tài)背景
        zhuce_background:  #fff,
        // 行業(yè)資訊背景
        hangye_background: #fff,
        background_color3: #1e6ceb,
        background_color4: #323e4e,
        //邊框
        border_bottom: 5px solid #fff,
    ),
    blue: (
        basic_color: #0DECFF ,
        logo_color: #fff,
        title_color: #fff, //新增、注冊(cè)、行業(yè)標(biāo)頭字體顏色
        foot_tolor: #B2D4F5 , // 頁(yè)腳字體顏色
        font_color1: #909399,
        font_color2: #fff,
        // 新聞標(biāo)題聚焦顏色
        font_hover: #0E458C,
         // 小logo圖片
        logo_image: url('@/assets/image/logo_white.png'),  
        // 大logo圖片
        big_logo_image: url('@/assets/theme/redTheme/logo-b.png'), 
        // banner圖片
        banner_image: url('@/assets/theme/blueTheme/y.png'),
         // 首頁(yè)搜索按鈕
        search_btn: linear-gradient(187deg, #0076FF  0%, #0076FF  47%),
        // 注冊(cè)動(dòng)態(tài)下邊框
        border_bottom_1: 2px solid #0DECFF ,
        // 注冊(cè)動(dòng)態(tài)卡片背景
        zhuce_card: #034488,
        // 注冊(cè)動(dòng)態(tài)邊框
        card_border_1: 2px solid rgba(8,93,185,1),
        //背景
        navbar_background: #0E458C,
        foot_background: linear-gradient(131deg, #005FBC 0%, #08215F 100%),
        // 新聞時(shí)事背景
        news_background:  url('@/assets/theme/blueTheme/科技藍(lán).png') no-repeat,
        // 注冊(cè)動(dòng)態(tài)背景
        zhuce_background: #033367,
         // 行業(yè)資訊背景
        hangye_background: #033367,
        background_color2: #283142,
        background_color3: #1e6ceb,
        background_color4: #323e4e,
        //邊框
        border_bottom: 5px solid #fff,
    ),
);

2.src/style/下的 _handle.scss來(lái)操作上述1中的$theme變量（當(dāng)然兩個(gè)文件可以合并，分開(kāi)寫(xiě)是想把配置和操作解耦），上代碼：
_handle.scss文件內(nèi)容：

@import "./_theme.scss";
//遍歷主題map
@mixin themeify {
    @each $theme-name, $theme-map in $themes {
        //!global 把局部變量強(qiáng)升為全局變量
        $theme-map: $theme-map !global;
        //判斷html的data-theme的屬性值  #{}是sass的插值表達(dá)式
        //& sass嵌套里的父容器標(biāo)識(shí)   @content是混合器插槽，像vue的slot
        [data-theme="#{$theme-name}"] & {
            @content;
        }
    }
}
//聲明一個(gè)根據(jù)Key獲取顏色的function
@function themed($key) {
    @return map-get($theme-map, $key);
}
//獲取背景顏色
@mixin background_color($color) {
    @include themeify {
        background-color: themed($color)!important;
    }
}
//獲取背景圖片
@mixin background($color) {
    @include themeify {
        background: themed($color)!important;
    }
}
//獲取圖片
@mixin content($color) {
    @include themeify {
        content: themed($color)!important;
    }
}
//獲取背景圖片
@mixin border_bottom($color) {
    @include themeify {
        border-bottom: themed($color)!important;
    }
}
//獲取背景圖片
@mixin border($color) {
    @include themeify {
        border: themed($color)!important;
    }
}
//獲取字體顏色
@mixin font_color($color) {
    @include themeify {
        color: themed($color)!important;
    }
}
//獲取邊框顏色
@mixin border_color($color) {
    @include themeify {
        border-color: themed($color)!important;
    }
}

3.主題樣式文件都配置好了，接下來(lái)就是怎么全局引入這兩個(gè)文件及怎么在vue頁(yè)面中使用了，此處我們先看 vue頁(yè)面中怎么使用我們?cè)赺theme.scss中配置好的樣式：

這里以其中一個(gè)頁(yè)面為例，其他頁(yè)面同理：

4.樣式文件基本都配置完成了，最后說(shuō)最重要的一點(diǎn)：怎么知道當(dāng)前我們需要用的樣式呢？

此處根據(jù)具體情況具體分析，在合適的頁(yè)面或位置寫(xiě)入即可，此處我是放到了 App.vue項(xiàng)目入口文件中，在進(jìn)入文件后通過(guò)window.document.documentElement.setAttribute()方法傳入你當(dāng)前想要使用的主題，此處我傳入的’blue‘（藍(lán)色主題），則vue頁(yè)面中使用的即為_(kāi)theme.scss中的 blue對(duì)象下配置好的顏色或者其他屬性，為其他主題色（如’red’，‘basic’同理，前提是_theme.scss文件中有已經(jīng)配置好的這兩個(gè)主題色)