Repository navigation
Consider Theme Switcher (vs system mode only) #1
Description
Extracted from demo:
html[data-theme="dark"] {
--background: var(--background-dark);
--accent-background: var(--accent-background-dark);
--text: var(--text-dark);
--text-light: var(--text-light-dark);
}
html[data-theme="light"] {
--background: var(--background-light);
--accent-background: var(--accent-background-light);
--text: var(--text-light);
--text-light: var(--text-light-light);
}
html.theme-switch,
html.theme-switch *,
html.theme-switch *:before,
html.theme-switch *:after {
transition: all 650ms !important;
transition-delay: 0 !important;
}and the markup:
<h2 id="themeswitcher">Theme Switcher</h2>
<input
type="radio"
id="light"
name="theme-name"
value="light"
onclick="setTheme('light')"
/>
<label for="light">light</label><br />
<input
type="radio"
id="dark"
name="theme-name"
value="dark"
onclick="setTheme('dark')"
/>
<label for="dark">dark</label><br />
<input
type="radio"
id="high-contrast"
name="theme-name"
value="high-contrast"
onclick="setTheme('high-contrast')"
/>
<label for="high-contrast">high-contrast</label><br />
<script>
function setTheme(theme) {
document.documentElement.classList.add("theme-switch");
document.documentElement.setAttribute("data-theme", theme);
window.setTimeout(function () {
document.documentElement.classList.remove("theme-switch");
}, 1000);
}
</script>
Activity