Light/Dark Theme Switcher using CSS Invert Filter

Here’s a really straightforward dark theme switcher for light designs. It uses the CSS invert() filter and minimal JavaScript to switch it on and off.

Screenshots of The Boston Globe and The Independent with the CSS invert filter applied. — The Boston Globe and The Independent with the CSS invert filter applied.

Code language: CSS

:root { 
  background-color: #fefefe;
  filter: invert(100%);
}
 
* { 
  background-color: inherit;
}
 
img:not([src*=".svg"]), video {  
  filter: invert(100%);
}

Source link

A Theme Switcher - Inclusive Components