The CSS color-scheme property was recently introduced (at least to me) and I have found some references (listed below) which mention how helpful it is. But none of them talk about what the best way to combine them together with a Theme-Switcher.
And by this I mean, I would like to build a website which has a custom Theme-Switcher button in it. So essentially,
- on first load, the website is going to apply the
color-schemebased on the user's system default theme and then useprefers-color-schemefor further styles. - But, once the user changes the theme using the Theme-Switcher, the preference is saved in browser local-storage and then used for future references.
So the question here is, once the user changes the website theme using the Theme-Switcher, whats the best way to switch the theme or color-scheme? Although this sounds straigtforward, I think its not. For Example:
- If the system theme is dark and the user switches to light using Theme-Switcher, then the Canvas color-scheme would still be dark, but then website theme would be light and it would mis-match. Below Code-snippet shows an example.
Now, note that I do understand that I can set the text-color to switch based on the theme. But:
- if I do that, then why would I need to use color-scheme in the first place?
- more importantly, changing the style of form elements would especially be a challenge - which I hoped
color-schemewould solve.
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>Reference:
