包含兩個scss檔案，乙個存主題樣式，乙個控制主題切換
測試頁面
測試
藍色紅色
//定義全域性主題&顏色的map陣列，鑑於v5只有白天和晚上的主題，此處僅定義這兩種
//切記 所有顏色一式兩份兒，務必保證key值統一，key值可以自定義，注意避免$%_之類的，
//與sass自有符號衝突，見文知意即可
//另外如果基於其他ui框架，如本專案基於element-ui，則只需設定一套dark主題，
//data-theme為dark時，樣式引用dark
//data-theme為其他值時，自然就採用了elementui的預設樣式
$themes: (
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)
),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)
));
@import "@/assets/css/_themes.scss";
//此處用了sass的map遍歷、函式、map訪問、混合器等相關知識，
//詳細api參考
//遍歷主題map
@mixin themeify 是sass的插值表示式
//& sass巢狀裡的父容器標識 @content是混合器插槽，像vue的slot
[data-theme="#"] &
}}//宣告乙個根據key獲取顏色的function
@function themed($key)
//暫時想到的常用的開發場景下面三種背景顏色、字型顏色、邊框顏色 至於陰影什麼之類的忽略了
//獲取背景顏色
@mixin background_color($color)
}//獲取字型顏色
@mixin font_color($color)
}//獲取邊框顏色
@mixin border_color($color)
}
sass切換主題時，變數示例
data theme 有兩個值分別為 data theme wh theme 和 data theme default theme mixins.scss 預設主題的變數集合 default theme base color 181d35,背景色 text color fff,字型顏色 武漢主題的變...
Vue中如何使用sass實現換膚 更換主題 功能
原理 通過設定html的attribute屬性在封裝的函式中進行判斷，進行相應的設定不同的顏色 css中 可以識別到在html標籤上設定的屬性，所以在html上對應屬性發生變化時，就會執行相應的樣式，這一步有點類似於平時給div新增乙個.active屬性，css自動執行相應樣式。1.首先切換的樣式檔...
vue專案打包後動態配置樣式（切換主題）
有時候專案需要多套主題，根據不同節日來切換不同的節日，網上有很多方法可以實現。這裡介紹vue打包後動態配置樣式。在這個基礎上對配置檔案進行修改 首先現在public中建立乙個config.css樣式配置檔案，然後再index.html引入，內容 標題樣式配置 configtitleclass 全域性...