How to utilize dark mode on your site

I was recently working on a site where I wanted to give the users an option for dark mode. I figured the simplest way to do this, was to just use whatever their device is set to. So if the user uses their iPhone in dark mode or their Android in dark mode the CSS will default to the CSS I put in the media query prefers-color-scheme. The prefers-color-scheme CSS media feature is used to detect if the user has requested the system to use a light or dark color theme.

@media (prefers-color-scheme: dark) {
    /* CSS here */
}Code language: CSS (css)

Published on July 5, 2020

Share this Article


Reader Interactions

Leave A Reply