CSS - Filters

Dark mode images: reducing brightness and contrast

A good rule is to decrease the brightness and contrast of images a bit so that it looks comfortable to the eyes when it’s against a dark background. A super bright image on a super dark background can be jarring and dimming the image reduces some of that heavy contrast.

[…]

The CSS filter() function is more than capable of handling this for us:

Code language: CSS

/* Apply the filter directly on the body tag */
body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}
 
/* Or apply it via media query */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Source link

A Complete Guide to Dark Mode on the Web | CSS-Tricks

Fancy hover by Andy Bell

GIF

Source link

https://codepen.io/piccalilli/pen/poRdqvZ

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