Detecting The User's Color Scheme Preference With CSS

If you’re a developer, chances are that you use dark mode on your machine and code editor. If not, what are you waiting for? Join the dark side!

Jokes apart, it is common nowadays to allow users to select a different theme when visiting a website. Now you can do this with CSS only, not the theme selection itself, for that you still need JS but with CSS you can now detect the user’s machine color scheme (light or dark) and display the correct colors on your website immediately.

To do this we need to use the CSS variables. According to the website Can I use, the “CSS variables” feature is available on 95% of the currently used browsers around the world.

We also need to use the prefers-color-scheme media query, which according to Can I use is supported by about 90% of the currently used browsers.

In this article, I will show you how to use the CSS variables and the prefers-color-scheme to setup the default colors of the website depending on the user’s preference, then I will also show you how to toggle the themes using JavaScript.

First, we need to create a basic project, open your terminal and create a new directory somewhere in your machine

mkdir css-theme-detection-example

Navigate inside that directory

cd css-theme-detection-example

Create an HTML file

touch index.html

Add the following content

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS variables (theme) -->
    <link rel="stylesheet" href="variables.css" />
    <!-- The page style -->
    <link rel="stylesheet" href="style.css" />
    <title>CSS theme detection example</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- Button that we will use to toggle the theme -->
    <button id="toggle">Toggle theme</button>
    <!-- JavaScript code -->
    <script src="app.js"></script>
  </body>
</html>

I’ve already added two CSS files and one JS file in the HTML so let’s create them

touch variables.css
touch style.css
touch app.js

Head into the variables.css file, we will now start defining the two colors palettes, add the following content

:root {
  /* Light */
  --light-palette-background: #ffffff;
  --light-palette-text: #000000;

  /* Dark */
  --dark-palette-background: #000000;
  --dark-palette-text: #ffffff;
}

The :root pseudo-class represents the root element of the document, being the tag. It is useful to declare CSS variables globally.

#javascript #css3 #html5 #code #web-monetization

hackernoon.com

Detecting The User's Color Scheme Preference With CSS