Filip Troníček

A little bit weird 15-year old who loves web development and Python

Home

Dark mode-ing everything

Published Feb 06, 2020

Dark mode’s awesome, I love it. On every website I make I started implementing it. But why? I think, that the biggest part of that is the fact, that having a dark background is 1) something new, and 2) it feels natural - if it’s dark outside, then it’s nice to have dark mode on.

In this article, I want to share a couple of tips for implementing dark mode on your websites. First, probably the most important thing of all is the prefers-color-scheme media query. It is supported in most browsers, including iOS Safari and Chrome on Android. The latest addition was on the brand new version of Edge. browser support For most occasions, it will be enough just to copy this script:

and for extended use with applying effects to images and links: