背景
因為是一個二期項目，需要在一期的基礎上做一些風格的改變，但是苦於沒有產品和UI，所以這個事情就落到了前端的頭上，一開始只是想的統一一下按鈕和標題的顏色（這里就用到了var），順便做些顏色改動比較方便，后面直接要求做一個動態主題切換（當然只是顏色的切換），所以就順便研究了一下利用var來實現主題顏色切換。
准備
- css自定義屬性（也叫做css變量）
官方稱呼其為自定義屬性，坊間通常叫做css變量，因為它類似於其他js語言中的變量，可用於存儲顏色、字體、大小寬度等css屬性值；定義方式為兩個連字符也就是中划線（--）開頭，引用方式為var(custom-property-name, value)，其中custom-property-name為定義的變量名稱（必須），value為回退值（非必須），也叫默認值（如果前面引用的變量名稱未定義時就會使用該值）。具體使用如下：
:root{
--theme-color: blue;
--theme-border: 1px solid var(--theme-color, #ccc);
}
.demo-txt{
color: var(--theme-color);
}
.demo-btn{
border: var(--theme-border);
}
- :root偽類
它匹配文檔的根<html>元素，但具有更高的優先級，所以在:root中定義定義的變量可用於全局訪問，如需覆蓋其中的變量值，只需要在引用的元素同級或父級定義變量名稱相同的變量覆蓋即可。
使用
- 在theme.css文件中定義好變量
:root{
--theme-color: #ff6a00;
--font-color: #333;
--bg-color: #fff;
--panel-bg-color: #eee;
--border: 1px solid #ddd;
/** more attribute **/
}
:root[theme='blue']{
--theme-color: #2563eb;
}
:root[theme='dark']{
filter: invert(1) brightness(1);
}
- 在頁面中動態切換主題
添加頁面文件index.html，內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Theme Demo</title>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="container">
<header class="header">頭部標題</header>
<main class="main">
<div class="con">
<p>主題說明：鏈接文字采用主題色，按鈕背景采用主題色</p>
<a href="#">鏈接</a><br>
<button>按鈕</button>
</div>
<div class="radio-group">
<input id="default" type="radio" name="theme" value="defalut" checked/><label for="default">默認</label>
<input id="blue" type="radio" name="theme" value="blue" /><label for="blue">藍色</label>
<input id="dark" type="radio" name="theme" value="dark" /><label for="dark">暗黑</label>
</div>
</main>
<footer class="footer">頁面底部</footer>
</section>
<script>
var themes = document.getElementsByName("theme");
Array.from(themes).forEach(themeRadio => {
themeRadio.addEventListener("click", function(){
document.documentElement.setAttribute("theme", this.value);
})
})
</script>
</body>
</html>
添加樣式文件index.html, 內容如下：
*{
padding: 0;
margin: 0;
border: 0;
font-size: var(--font-size);
color: var(--font-color);
}
html, body{
width: 100%;
height: 100%;
background-color: var(--body-bg-color);
}
a{
color: var(--theme-color);
}
button{
background-color: var(--theme-color);
color: var(--body-bg-color);
line-height: 20px;
padding: 10px;
}
.container{
display: flex;
flex-direction: column;
width: 70%;
height: 100%;
margin: 0 auto;
background-color: var(--body-bg-color);
}
.container .header{
--line-height: 40px;
height: var(--line-height);
line-height: var(--line-height);
padding: var(--content-padding);
font-size: var(--font-size-lg);
box-shadow: var(--boxshadow);
background-color: var(--bg-color);
}
.container .main{
flex: 1;
line-height: 30px;
padding: var(--content-padding);
}
.container .footer{
--line-height: 30px;
height: var(--line-height);
line-height: var(--line-height);
padding: var(--content-padding);
font-size: var(--font-size-sm);
background-color: var(--bg-color-lg);
}
主要就是通過切換html的屬性來達到切換的效果。
總結
使用var切換主題的方式比較簡單，而且對統一頁面樣式以及后期維護有很大幫助，適用於對兼容性要求不高的（IE15以上支持）需求。如果需要兼容性更高的主題切換，可以參考張鑫旭老師的這篇文章《link rel=alternate網站換膚功能最佳實現》。