3 回答

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊
您可以通過(guò)一些技巧來(lái)解決這個(gè)問(wèn)題,您的問(wèn)題的直接答案是通過(guò)為暗/亮主題實(shí)現(xiàn)切換類(lèi)。
例如你看這個(gè)演示
<div class="change-color">
<p>Hello World</p>
</div>
<div class="change-color">
<p>Hello World 2</p>
</div>
<button>Change color</button>
和我們的腳本:
// find elements
var anotherColor = $(".change-color")
var button = $("button")
// handle click and add class
button.on("click", function(){
anotherColor.toggleClass("another-color")
})
和我們的風(fēng)格:
body {
background: #000;
color: red;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.another-color {
background: #ddd;
}
但是您也可以通過(guò)使用根變量顏色來(lái)解決問(wèn)題,例如:
:root {
--color-bg: #000;
}
.default-color {
background-color: var(--color-bg);
}
.another-color {
--color-bg: #ddd;
}
你可以看一下這個(gè)演示過(guò)

TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可能需要為每個(gè)元素編寫(xiě)一些 css,無(wú)論是在亮模式還是暗模式下。使用 javascript 在兩者之間切換。您可以有一個(gè)用于淺模式 (.light-mode) 的類(lèi),然后是用于暗模式的類(lèi)。只要 class-wrapper 是一個(gè) div,你應(yīng)該沒(méi)問(wèn)題。
我會(huì)使用一個(gè)具有全局訪問(wèn)權(quán)限的 js 變量來(lái)訪問(wèn)模式并將其綁定到一個(gè)函數(shù)中。
css
.light-mode{
some more css classes for light mode
}
.dark-mode{
some more css classes for dark mode
}
添加回答
舉報(bào)