DEV Community


Light and Dark Theme for your 2020 Web Site

I am software engineer with some marketing and philosophical tendencies
・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:
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)