DEV Community

loading...

Light and Dark Theme for your 2020 Web Site

tomavelev profile image Toma ・1 min read

How web sites should look like and behave is constantly evolving. For the past year or two - having light and dark themes is the norm. Otherwise, you are not adapting to the user. Otherwise you (and also I) are lazy developer.
Here is the basic CSS for theming:

@media (prefers-color-scheme: dark) {
//dark background, light colors for text, icons and images
}
@media (prefers-color-scheme: light) {
//light background, dark colors for text, icons and images
}

Here is a work in progress - applying themes for a WP site:
https://programtom.com/common_sense/
Sadly, it will not work on any other theme or most other Web Sites, because of the specific CSS rules that must be overwritten.

Discussion (0)

Forem Open with the Forem app