網(wǎng)頁中切換主題腺逛，實(shí)際上就是在對(duì)網(wǎng)頁中的元素設(shè)置不同的樣式所呈現(xiàn)出來的整體顯示效果的切換
比如上圖中nutz官網(wǎng)可以發(fā)現(xiàn)荷愕，亮色與暗色主題對(duì)比，網(wǎng)頁結(jié)構(gòu)布局是完全一致的棍矛，背景色一黑一白安疗，文字顏色也改成了對(duì)應(yīng)背景色可讀性良好的顏色。
實(shí)現(xiàn)思路
先說結(jié)論茄靠，總結(jié)成一句話就是 “加載對(duì)應(yīng)的css茂契，后加載的css覆蓋默認(rèn)顯示樣式，即可達(dá)到換主題的目的”慨绳，具體的實(shí)現(xiàn)分為2步：
- 準(zhǔn)備兩份不同主題的css
- 使用js實(shí)現(xiàn)切換(加載)css的方法
生成不同主題的css
不同主題的css差異主要體現(xiàn)在顏色這個(gè)概念上掉冶，理論上只要有使用顏色的地方都需要進(jìn)行適當(dāng)?shù)恼{(diào)整，比如文字顏色脐雪，背景色厌小，邊框顏色等等。簡單來說就是白底陪黑字战秋，黑底用白字璧亚，如果是采用了灰度色，則根據(jù)現(xiàn)實(shí)情況進(jìn)行適度調(diào)整或無需調(diào)整脂信。最簡單的調(diào)整顏色的方法是使用適當(dāng)?shù)墓ぞ邅砩蒫ss癣蟋，比如less透硝，scss等
用bs4來實(shí)現(xiàn)
nutz官網(wǎng)采用了bootstrap4(下文簡稱為bs4)作為前端樣式庫，bs4本身就采用了scss進(jìn)行編寫疯搅，在源碼的基礎(chǔ)上進(jìn)行主題的設(shè)置可以說是非常的簡單濒生。先看下bs4本身是怎么做的
bs4根據(jù)功能將css內(nèi)容拆散放置在不同的scss文件中，最終通過bootstrap.scss將所有模塊引入后編譯成最終的css
其中最關(guān)鍵的variables.scss定義了樣式所有變量幔欧，包括顏色罪治，各種寬度大小等等
所以需要實(shí)現(xiàn)一個(gè)不同顏色的主題，只需要修改variables.scss中屬性即可礁蔗，然后不同主題的variables.scss即可編譯多份不同的bootstrap.scss荧琼。
bs4本身也提供了custom.scss供你修改默認(rèn)的屬性惶傻，所以將變更內(nèi)容放這里更好所坯，避免在未來更新bs4本身時(shí)引發(fā)一些不必要的麻煩纳胧。
也就是將需要修改的顏色的部分放到custom.scss中，替換到現(xiàn)有的bootstrap.scss中再編譯滋饲。
nutzam的主題
- 將bootstrap.scss復(fù)制2份厉碟，分別命名為nutzbs_dark.scss與nutzbs_light.scss
- 新建nutzbs-custom_dark.scss,nutzbs-custom_light.scss分別替換掉主題文件中的custom.scss
- 新建一個(gè)nutzam.scss加入到主題文件的最后
- 根據(jù)需要修改bs自帶的控件并進(jìn)行替換
這樣最終nutzbs_dark.scss與nutzbs_light.scss分別編譯出來就是兩份主題css文件
準(zhǔn)備工作好了，下面說下幾個(gè)文件文件具體的修改屠缭。
nutzam.scss
該文件主要是nutzam首頁中自定義樣式的存放位置箍鼓，放在主題文件的最后是因?yàn)榉奖闶褂胋s提供的各種屬性與方法
nutzam所使用的顏色除了bs提供的，自定義的顏色也要使用變量的方式進(jìn)行引用然后分別在nutzbs-custom_dark.scss與nutzbs-custom_light.scss設(shè)置
custom_dark與custom_light
顧名思義這里就是修改對(duì)應(yīng)顏色的地方呵曹，也就是覆蓋variables.scss中定義的顏色來達(dá)到對(duì)應(yīng)主題需要的效果款咖。
因?yàn)槟J(rèn)的bs4就是一種白底為主的樣式，所以light主題基本不用修改奄喂，僅僅將nutzam自定義的顏色放在這里铐殃。dark主題將需要修改的顏色從variables.scss中copy過來，然后修改成需要的顏色即可跨新。
這里有一點(diǎn)需要注意富腊，就是variables.scss中copy過來的顏色都帶有 !default 字樣，修改時(shí)一定要去掉域帐。
!default 標(biāo)記表示該屬性在沒有其他值的時(shí)候的默認(rèn)值赘被，如果這里還帶著將不會(huì)起到替換variables.scss樣式的效果
切換主題的方法
可以先將默認(rèn)主題寫到頁面中，然后通過js觸發(fā)事件加載其他主題的css肖揣。后加載的css會(huì)覆蓋之前樣式從而達(dá)到切換主題的效果民假。
下面給出我的一種實(shí)現(xiàn)思路，先將亮色主題加入到頁面中
<link rel="stylesheet" type="text/css" href="/css/nutzbs_light.css">
然后實(shí)現(xiàn)兩個(gè)方法龙优，添加/刪除暗色主題
// 添加暗色主題
function addDarkTheme() {
var link = document.createElement('link');
link.type = 'text/css';
link.id = "theme-css-dark"; // 加上id方便后面好查找到進(jìn)行刪除
link.rel = 'stylesheet';
link.href = '/css/nutzbs_dark.css';
document.getElementsByTagName("head")[0].appendChild(link);
}
// 刪除暗色主題
function removeDarkTheme() {
$('#theme-css-dark').remove();
}
接著實(shí)現(xiàn)一個(gè)方法來進(jìn)行切換即可
// 使用暗色主題
function useDarkTheme(useDark) {
if (useDark) {
addDarkTheme();
} else {
removeDarkTheme();
}
}
保持選中的主題
如果你按照上面的實(shí)現(xiàn)了就會(huì)發(fā)現(xiàn)一個(gè)問題羊异，當(dāng)前頁面切換好了主題以后，切換到其他頁面又變成了默認(rèn)主題，這里就需要解決這個(gè)保持當(dāng)前選中主題的問題
因?yàn)槭庆o態(tài)網(wǎng)頁野舶，所以通過cookie來記錄選中的樣式是最好的方案易迹。這里推薦一個(gè)jq庫js-cookie，可以很方便管理cookie平道。
加入該庫后修改上面的方法
// 獲取cookie中選中的主題名稱赴蝇，沒有就給個(gè)默認(rèn)的
function getThemeCSSName() {
return Cookies.get('nutzam-theme') || "light";
}
// 使用暗色主題(記錄選擇到cookie中)
function useDarkTheme(useDark) {
Cookies.set('nutzam-theme', useDark ? "dark" : "light");
if (useDark) {
addDarkTheme();
} else {
removeDarkTheme();
}
}
然后在頁面加載完成后，調(diào)用一下該方法即可, 切換其他頁面也就自動(dòng)的切換到選中的主題了
$(document).ready(function () {
useDarkTheme(getThemeCSSName() == 'dark');
})
