方案一

使用css的var屬性，當然此時不考慮低版本瀏覽器。

1，在default.css主題根元素定義顏色變量

:root {

--main_color: #03a9f4; // 主題色

--main_light: #33baf7; // 二級主題色 常用背景為主題色下的hover

--main_lighter: #65caf5; // 三級主題色 常用border

--main_extra_light: #e6f7ff; // 四級主題色 常用background

}

2，使用時，參考css var屬性。

.test{

color: var(--main_color);

}

3，在dark.css主題根元素定義替換變量

:root[theme=dark] {

--main_color: #2F4554; // 主題色

--main_light: #686a6b; // 二級主題色

--main_lighter: #9a9b9c; // 三級主題色

--main_extra_light: #d7d8d8; // 四級主題色

}

4，點擊切換成dark主題時，引入dark.css，控制根節點html加them="dark"屬性

省去js的實現代碼，此時頁面應有

...

切換成dark主題

document.getElementById('btn').οnclick=(e)=>{

document.documentElement.setAttribute('theme', 'dark')

}

可以看出dark的主題顏色變量覆蓋了default的主題顏色變量

顏色變量覆蓋

5，擴展，用js控制css 的變量可動態的改變顏色，實現不需要在配置一份主題顏色引入。

let btn = document.getElementById('btn')

let html = document.documentElement

btn.οnclick=(e)=>{

html.style.setProperty('--main_color', 'red')

}

方案二

引入scss，配置webpack生成多份的主題css，使用時引入對應的主題。

1，新建主題目錄

image.png

2， 配置webpack.config.js打包成多份的css

const globby = require('globby');

const getCssEntry = (() => {

const paths = globby.sync('*.scss', {

cwd: path.join(__dirname, './style/themes')

});

const rs = {}

paths.forEach(h => {

if (!h.includes('_')) { // 過濾打包_的命名文件

let name = path.basename(h, '.scss')

let p = path.join('./style/themes', h);

if (!p.startsWith('.')) { // 轉成相對地址

p = './' + p;

}

rs[name] = p;

}

})

return rs

});

const options = [{

mode: mode,

entry: {

app: './src/index.js',

...getCssEntry() // 引入多主題

},

......

}]

module.exports = options;

啟動后可以看到生成的主題

image.png

3，默認主題app.css定義變量和引入樣式

$main_color: #03a9f4; // 主題色

$main_light: #33baf7; // 二級主題色 常用背景為主題色下的hover

$main_lighter: #72cef7; // 三級主題色 常用border

$main_extra_light: #e6f7ff; // 四級主題色 常用background

@import './_common.scss';

4，深色主題dark.css定義變量和引入樣式

$main_color: #2F4554; // 主題色

$main_light: #686a6b; // 二級主題色

$main_lighter: #9a9b9c; // 三級主題色

$main_extra_light: #d7d8d8; // 四級主題色

@import './_common.scss';

_common.scss下可以是

.test{

font-size: $main_color;

}

5，使用js控制link標簽的引入href = "app.css" 和href="dark.css"的切換就可以了，省去js代碼...。

總結

以上是生活随笔為你收集整理的html 切换主题,html切换主题实现方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。