采用css3的var實作動態主題切換-有解無憂

背景

因為是一個二期專案，需要在一期的基礎上做一些風格的改變，但是苦于沒有產品和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="https://www.cnblogs.com/jieli/p/theme.css">
    <link rel="stylesheet" href="https://www.cnblogs.com/jieli/p/index.css">
</head>
<body>
    <section >
        <header >頭部標題</header>
        <main >
            <div >
                <p>主題說明：鏈接文字采用主題色，按鈕背景采用主題色</p>
                <a href="https://www.cnblogs.com/jieli/p/#">鏈接</a><br>
                <button>按鈕</button>
            </div>
            <div >
                <input id="default" type="radio" name="theme" value="https://www.cnblogs.com/jieli/p/defalut" checked/><label for="default">默認</label>&nbsp;
                <input id="blue" type="radio" name="theme" value="https://www.cnblogs.com/jieli/p/blue" /><label for="blue">藍色</label>&nbsp;
                <input id="dark" type="radio" name="theme" value="https://www.cnblogs.com/jieli/p/dark" /><label for="dark">暗黑</label>
            </div>
        </main>
        <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網站換膚功能最佳實作》，

參考文章

https://zhuanlan.zhihu.com/p/60975003

轉載請注明出處

https://www.cnblogs.com/jieli/p/15806735.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413075.html

標籤：Html/Css

上一篇：【CSS】筆記（0）--- CSS概述；HTML引入CSS樣式的三種方式；串列樣式；絕對定位

下一篇：我的簡易2048小游戲記錄整理