silverbullet
silverbullet copied to clipboard
Switch to dark/light mode based on OS setting
But still allow overrides
To query the dark mode once:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode is enabled
document.documentElement.classList.add('dark-mode');
} else {
// dark mode is disabled
document.documentElement.classList.remove('dark-mode');
}
And to watch it reactively:
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
if (e.matches) {
// Enable dark mode
document.documentElement.classList.add('dark-mode');
} else {
// Disable dark mode
document.documentElement.classList.remove('dark-mode');
}
});
Implemented here #1294