vue 一鍵換膚 換主題

該一鍵換膚只是定義好幾個顏色，並進行簡單的切換。

在src下的assets檔案下面定義乙個css資料夾，在對應的檔案裡面定義_handle.scss和_themes.scss檔案，如下：

2.在_themes.scss檔案裡面定義好需要用到的幾個樣式。如下：

/**

*   _themes.scss
*   當html的data-theme為blue時，樣式引用blue
*   data-theme為其他值時，就採用對應的預設樣式
*   這裡我定義了5套主題方案，想要再多隻需在`$themes`
裡加就行了
*   注意一點是，每套配色方案裡的key可以自定義但必須一致，不然就會混亂
*   這是定義好的對應變數的顏色（需要什麼都可以自行定義並引用）：
*   字型： font_color1
*   背景： background_color1
*   邊框： border_color1
**/$themes:(
blue: (
font_color1: #0056cc,
background_color1: #0056cc,
border_color1: #0056cc,
),  glup: (
font_color1: #e426fd,
background_color1: #e426fd,
border_color1: #e426fd,
),  red: (  
font_color1: #fd5451,
background_color1: #fd5451,
border_color1: #fd5451,
),  green: (  
font_color1: #0dd78d,
background_color1: #0dd78d,
border_color1: #0dd78d,
),  yellow: (  
font_color1: #feae4d,
background_color1: #feae4d,
border_color1: #feae4d,),)
;

/**

*   在_themes.scss裡面定義好自己需要的東西在該資料夾下面進行遍歷和定義
**/@import "./_themes.scss"
;//遍歷主題map
@mixin themeify 是sass的插值表示式
//& sass巢狀裡的父容器標識   @content是混合器插槽，像vue的slot
[data-theme="#"
]&}}
//宣告乙個根據key獲取顏色的function
@function
themed
($key
)//獲取background-color背景顏色
@mixin background_color
($color)}
//獲取字型顏色
@mixin font_color
($color)}
//獲取邊框顏色
@mixin border_color
($color)}
//獲取左邊框顏色
@mixin border_colorleft
($color
)}

）第四點，我的專案是cli2，我用了報錯，注釋了就完美了（不同專案可以多試試）

5.定義乙個.vue檔案，在裡面進行對應一鍵換膚的功能操作。如下：

>

class
="box"
>
class
="color_content"
>
class
="content_div1"
@click
="theme('blue')"
>
div>
class
="content_div1 content_div2"
@click
="theme('glup')"
>
div>
class
="content_div1 content_div3"
@click
="theme('red')"
>
div>
class
="content_div1 content_div4"
@click
="theme('green')"
>
div>
class
="content_div1 content_div5"
@click
="theme('yellow')"
>
div>
div>
div>
template
>

vue 實現主題換膚 element ui

站在巨人的肩膀上開發之主題換膚 npm i webpack theme color replacer d2.1 vue.config.jsconst webpack require webpack const themecolorreplacer require webpack theme colo...

vue 實現主題換膚 element ui

npm i webpack theme color replacer dvue.config.jsconst webpack require webpack const themecolorreplacer require webpack theme color replacer const for...

前端利用scss實現一鍵換膚功能

variables.scss 淺色主題 light theme base color 000,background color ccc 深色主題 dark theme base color fff,background color 000 定義對映集合 themes light theme ligh...