說起換膚功能，前端肯定不陌生，其實就是顏色值的更換，實現方式有很多，也各有優缺點
一、可供選擇的換膚
對於只提供幾種主題方案,讓用戶來選擇的,一般就簡單粗暴的寫多套主題
- 一個全局class控制樣式切換,直接更改全局class
<body class='dark'></body>
- 使用js去修改 link 的 href
<link id='link_theme' href="skin.css" rel="stylesheet" type="text/css"/>
<script>
document.getElementById('link_theme').href='skin-dark.css'
</script>
二、動態色值換膚的實現
- 全局替換顏色值
可以參看 Element-UI 的換膚實現,就是先把樣式中顏色全部替換后在塞到<style>標簽里面
- 使用 less 的 modifyVars 動態修改
modifyVars方法是是基於 less 在瀏覽器中的編譯來實現。所以在引入less文件的時候需要通過link方式引入，然后基於less.js中的方法來進行修改變量
// styles.less
@color: red;
.card {
color: @color;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdn.jsdelivr.net/npm/less"></script>
</head>
<body>
<div class="card">
card
</div>
<button id="themeBtn">更改顏色</button>
</body>
<script>
document.getElementById("themeBtn").addEventListener('click', function () {
let color = '#' + Math.floor(Math.random() * 256 * 1000000000).toString(16).slice(0, 6)
less.modifyVars({
'@color': color
}).then(() => {
console.log(`color: ${color}F`);
});
})
</script>
- css 變量(var)
css 原生變量 兼容性,大部分主流瀏覽器還是支持的，而且主要是操作起來夠簡便。
定義變量
// 加上前綴 -- 就可以了
:root{
--color:red;
}
//使用 當--color 不生效的時候會使用后面參數替代
body:{
color:var(--color,#000)
}
使用 js 去修改
// 獲取根
let root = document.documentElement;
root.style.setProperty('--color', '#f00');
三、總結
如果需要動態替換顏色主題,使用第二種比較合適也方便.如果每套主題有很大差異性不僅僅只是顏色的替換,第一種的方式就好了很多,使用第二種就不太合適了.如果都需要滿足也可以兩種相結合使用