CSS配色方案屬性是最近引入的(至少對我來說是這樣)，我發現一些參考資料(如下所列)提到它是多么有用。但是他們都沒有談到用主題切換器將它們結合在一起的最佳方式。
我的意思是，我想建立一個網站，其中有一個自定義的主題開關按鈕。所以本質上，
在第一次加載時，網站將根據用戶的系統默認主題應用配色方案，然后使用prefers-color-scheme獲得更多樣式。 但是，一旦用戶使用主題切換器改變了主題，偏好就被保存在瀏覽器本地存儲器中，然后用于將來的參考。 所以這里的問題是，一旦用戶使用主題切換器改變網站主題，切換主題或配色方案的最佳方式是什么？雖然這聽起來直截了當，但我認為不是。例如:
如果系統主題是暗的，用戶使用主題切換器切換到亮的，那么畫布的配色方案仍然是暗的，但網站主題將是亮的，這將會不匹配。下面的代碼片段顯示了一個例子。 現在，請注意，我知道我可以設置文本顏色來根據主題進行切換。但是:
如果我這樣做了，那么為什么我首先需要使用配色方案呢？ 更重要的是，改變表單元素的風格尤其是一個挑戰——我希望配色方案能解決這個問題。
let i = 1
let j = 1;
function ToggleTheme() {
// console.log("Toggle Theme");
i *= -1
document.body.dataset.theme = i == 1 ? "light" : "dark"
}
function ToggleAllForm() {
j *= -1;
document.getElementById("allForm").style.display = j == 1 ? "none" : ""
}body[data-theme='light'] {
background-color: black;
}
body[data-theme='dark'] {
background-color: white;
}<head>
<meta name="color-scheme" content="dark light">
</head>
<body data-theme="light">
<button onclick="ToggleTheme()">Toggle Theme</button>
<h1>Color-Scheme</h1>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<hr>
<br>
<h1>All Form Elements</h1>
<button onclick="ToggleAllForm()">Toggle All Form</button>
<form id="allForm" style="display: none;">
<div>
<p>
<label>
text<br>
<input type="text">
</label>
</p>
<p>
<label>
password<br>
<input type="password">
</label>
</p>
<p>
<label>
number<br>
<input type="number">
</label>
</p>
<p>
<label>
email<br>
<input type="email">
</label>
</p>
<p>
<label>
url<br>
<input type="url">
</label>
</p>
<p>
<label>
tel<br>
<input type="tel">
</label>
</p>
<p>
<label>
search<br>
<input type="search">
</label>
</p>
<p>
<label>
textarea<br>
<textarea></textarea>
</label>
</p>
<p>
<label>
date<br>
<input type="date">
</label>
</p>
<p>
<label>
datetime<br>
<input type="datetime">
</label>
</p>
<p>
<label>
datetime-local<br>
<input type="datetime-local">
</label>
</p>
<p>
<label>
month<br>
<input type="month">
</label>
</p>
<p>
<label>
week<br>
<input type="week">
</label>
</p>
<p>
<label>
time<br>
<input type="time">
</label>
</p>
<p>
<label>
select<br>
<select>
<optgroup label="optgroup">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</optgroup>
</select>
</label>
</p>
<p>
<label>
select (multiple attr)<br>
<select multiple>
<optgroup label="optgroup">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</optgroup>
</select>
</label>
</p>
<p>
<label>
select (size attr)<br>
<select size="4">
<optgroup label="optgroup">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</optgroup>
</select>
</label>
</p>
<p>
<label>
datalist<br>
<input list="datalist">
<datalist id="datalist">
<option value="option 1">
<option value="option 2">
<option value="option 3">
</datalist>
</label>
</p>
<p>
<label>
keygen<br>
<keygen>
</label>
</p>
<p>
<label>
output<br>
<output>123</output>
</label>
</p>
<p>
<label>
radio<br>
<input type="radio">
</label>
</p>
<p>
<label>
checkbox<br>
<input type="checkbox">
</label>
</p>
<p>
<label>
color<br>
<input type="color">
</label>
</p>
<p>
<label>
range<br>
<input type="range">
</label>
</p>
<p>
<label>
file<br>
<input type="file">
</label>
</p>
<p>
<label>
submit<br>
<input type="submit">
</label>
</p>
<p>
<label>
reset<br>
<input type="reset">
</label>
</p>
<p>
<label>
button (input tag)<br>
<input type="button" value="Button">
</label>
</p>
<p>
<label>
button (button tag)<br>
<button>Button</button>
</label>
</p>
</div>
<fieldset>
<legend>legend</legend>
fieldset
</fieldset>
</form>
</body>