silverbullet icon indicating copy to clipboard operation
silverbullet copied to clipboard

Switch to dark/light mode based on OS setting

Open zefhemel opened this issue 2 years ago • 1 comments

But still allow overrides

zefhemel avatar Jul 26 '23 08:07 zefhemel

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');
   }
});

pihentagy avatar May 30 '24 14:05 pihentagy

Implemented here #1294

zefhemel avatar Jun 04 '25 16:06 zefhemel