我使用 3 个单选按钮来切换颜色方案（自动取决于系统、浅色和深色），并设置几个 css 变量，这些变量将在颜色方案更改时自动更改我的网站的颜色。它适用于 css 控制的 div，但问题是，当我将这些变量放入我的 js 中时，按下单选按钮时不会自动发生更改。我可能需要某种倾听者，但我不知道该怎么做。
这是我尝试过的。
<html>
<head>
<style>
html {
--background-light : #F5F5F6;
--background-dark : #1D1D1F;
}
:root {
color-scheme: light;
--background : var(--background-light);
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--background : var(--background-dark);
}
}
[color-scheme="light"] {
color-scheme : light;
--background : var(--background-light);
}
[color-scheme="dark"] {
color-scheme : dark;
--background : var(--background-dark);
}
.mydivs {
width : 100vw;
height : 100vh;
}
#change-with-css {
background : var(--background);
}
</style>
</head>
<body>
<form id="color-scheme">
<div>
<input checked type="radio" id="auto" class="toggler" name="theme" value="auto"/>
</div>
<div class="color-boxes">
<input type="radio" id="light" class="toggler" name="theme" value="light"/>
</div>
<div class="color-boxes">
<input type="radio" id="dark" class="toggler" name="theme" value="dark"/>
</div>
</form>
<div id="change-with-css" class="mydivs"></div>
<div id="change-with-js" class="mydivs"></div>
<script>
const switcher = document.querySelector("#color-scheme");
const doc = document.firstElementChild;
const setTheme = (theme) => doc.setAttribute("color-scheme", theme);
switcher.addEventListener("input", (e) => setTheme(e.target.value));
const myJsDiv = document.querySelector("#change-with-js");
const myDivBg = getComputedStyle(document.body);
myJsDiv.style.background = myDivBg.getPropertyValue("--background");
</script>
</body>
</html>
如果可能的话，请以普通js格式帮助我，谢谢。
你在dom加载的js中设置了样式背景，但是当单选按钮 按下去，你没有再设置样式，所以这就是css和js的区别，而css总是比js更有效率。
<style>
html {
--background-light: #F5F5F6;
--background-dark: #1D1D1F;
}
:root {
color-scheme: light;
--background: var(--background-light);
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--background: var(--background-dark);
}
}
[color-scheme="light"] {
color-scheme: light;
--background: var(--background-light);
}
[color-scheme="dark"] {
color-scheme: dark;
--background: var(--background-dark);
}
.mydivs {
width: 100vw;
height: 100vh;
}
#change-with-css {
background: var(--background);
}
</style>
<form id="color-scheme">
<div>
<input checked type="radio" id="auto" class="toggler" name="theme" value="auto" />
</div>
<div class="color-boxes">
<input type="radio" id="light" class="toggler" name="theme" value="light" />
</div>
<div class="color-boxes">
<input type="radio" id="dark" class="toggler" name="theme" value="dark" />
</div>
</form>
<!-- <div id="change-with-css" class="mydivs"></div> -->
<div id="change-with-js" class="mydivs"></div>
<script>
const switcher = document.querySelector("#color-scheme");
const doc = document.firstElementChild;
const setTheme = (theme) => {
doc.setAttribute("color-scheme", theme);
const myJsDiv = document.querySelector("#change-with-js");
const myDivBg = getComputedStyle(document.body);
myJsDiv.style.background = myDivBg.getPropertyValue("--background");
};
setTheme('auto');
switcher.addEventListener("input", (e) => setTheme(e.target.value));
</script>