Detecting The User's Color Scheme Preference With CSS

Detecting The User's Color Scheme Preference With CSS

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.

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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Navbar with Dropdown Menu (HTML5, CSS3 and Vanilla JavaScript)

Navbar with dropdown menu (HTML5, CSS3 and Vanilla JavaScript)

Simple Menu using HTML5, CSS3 and Vanilla JavaScript

Simple Menu using HTML5, CSS3 and Vanilla JavaScript

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

Best Books to Learn HTML5 and CSS3 - @ HTML5 and CSS3 Video Course

In addition to watching videos, our course also includes PDF files for free download. In this video we will see some references and recommended bibliography to learn HTML and CSS.

Developing a Responsive Digital Clock Using HTML5, CSS3 and JavaScript

Learn how to create an interesting clock animation using plain Vanilla JavaScript and a bit of flex-box. Developing a Responsive Digital Clock Using HTML5, CSS3, and JavaScript