Dark Mode in CSS Guide

An in-depth discussion of website dark mode: a guide to design and implementation

Dark Mode has been popular recently, with tech giants such as Apple, Microsoft and Google integrating it into their respective operating systems. This article will explore in-depth how to implement dark mode in the website , covering a variety of methods, technical considerations and design techniques.

Table of contents

1. Topic Switch
2. Operating system-level dark mode
3. Store user preferences
4. Handle user agent styles
5. Method combination
6. Design considerations
7. Actual cases
8. Is Dark Mode required?

Topic Switch

Typically, your website already has a bright color theme, and you want to create a corresponding dark color theme. Even from scratch, you need to design both bright and dark themes at the same time. One of the themes should be set as the default theme (mostly a bright theme, but we can also let the user's browser make a choice) and provide a way to switch to another theme (also automatically switched). Users can change the color theme by simply clicking a button.

There are many ways to achieve theme switching:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b

The core of this method is to use a class name as a hook to switch styles anywhere on the page.

Here is an example button script to switch class names:

 // Select button const btn = document.querySelector('.btn-toggle');

// Listen to button click event btn.addEventListener('click', function() {
  // Switch (add/remove) the .dark-theme class name of the body element document.body.classList.toggle('dark-theme');  
});

Sample HTML:

 <button class="btn-toggle">Switch dark mode</button>
<h1 id="This-is-a-title">This is a title</h1>
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">This is a link</a>

The basic idea of ​​this method is to first define the default (bright) style, and then use a class name applied to body element to create a complete dark style. Assume that the default style is a bright color scheme. All "bright color" styles are written exactly the same way you usually write CSS. For the above HTML, let's apply some global style to body and links:

 body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff;
}
a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

Next, we redefine these attribute values, this time setting them on different body class names:

 body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff;
}
a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

/* Dark Mode Style*/
body.dark-theme {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
}
body.dark-theme a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809ffff;
}

The dark pattern style will be a child element of the same parent class (in this case .dark-theme ). How to switch body class name to access dark styles? We can use JavaScript! We will select the button class name ( .btn-toggle ), add a click listener, and then add the dark theme class name ( .dark-theme ) to the list of class names of body element. Due to the cascade and specificity, this will effectively cover all the "bright" colors we set.

For complete code examples, please refer to the demo. Click the toggle button to switch between dark mode and bright mode.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b

Instead of saving all styles in one style sheet, switch style sheets for each theme. This assumes that you have a complete stylesheet ready.

For example, a default bright theme light-theme.css :

 /* light-theme.css */

body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff;
}
a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

Then we create the style of the dark theme and save it in a standalone style sheet called dark-theme.css :

 /* dark-theme.css */

body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
}
body a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809ffff;
}

This gives us two independent stylesheets—one for each topic—we can use HTML Partially link them. Since we call it the default style, we first link the bright style.

<link id="theme-link" href="light-theme.css" rel="stylesheet">

We use a https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btheme-link ID, which can be selected in JavaScript to switch between bright and dark modes. It's just that this time we switched to the file instead of the class name.

 // Select button const btn = document.querySelector(".btn-toggle");
// Select a style sheet<link>
const theme = document.querySelector("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btheme-link");

// Listen to button click event btn.addEventListener("click", function() {
  // If the current URL contains "light-theme.css"
  if (theme.getAttribute("href") == "light-theme.css") {
    // ...Switch to "dark-theme.css"
    theme.href = "dark-theme.css";
  // Otherwise...
  } else {
    // ...Switch to "light-theme.css"
    theme.href = "light-theme.css";
  }
});

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b

We can also use CSS custom properties to create dark themes! This helps avoid writing separate style rulesets for each topic, making writing styles faster and making it easier to change topics.

We can still choose to switch body class name and use that class name to reset custom properties:

 // Select button const btn = document.querySelector(".btn-toggle");

// Listen to button click event btn.addEventListener("click", function() {
  // Switch (add/remove) the .dark-theme class name of the body element document.body.classList.toggle("dark-theme");
});

First, let's define the default bright color value as a custom attribute on body element:

 body {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff;
  --anchor-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

Now, we can redefine these values ​​on the .dark-theme class name like the first method:

 body.dark-theme {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
  --anchor-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809ffff;
}

Here is the rule set for body and link elements that use custom attributes:

 body {
  color: var(--text-color);
  background: var(--bkg-color);
}
a {
  color: var(--anchor-color);
}

We can also define custom properties in document:root . This is completely legal, even very common practice. In this case, all default theme style definitions are placed in :root {} and all dark theme properties are placed in :root.dark-mode {} .

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b Using server-side scripts

If we are using a server-side language (e.g. PHP), then we can use it instead of JavaScript. This is a great way to do it if you prefer to work directly in the markup.

 <?php $themeClass = &#39;&#39;;
if (isset($_GET[&#39;theme&#39;]) && $_GET[&#39;theme&#39;] == &#39;dark&#39;) {
  $themeClass = &#39;dark-theme&#39;;
}

$themeToggle = ($themeClass == &#39;dark-theme&#39;) ? &#39;light&#39; : &#39;dark&#39;;
?>
<a href="https://www.php.cn/link/39fd3e6495f36f48bfce2fdff05d27cf">Switch dark mode</a>

We can let users send GET or POST requests. Then, let our code (PHP in this case) apply the corresponding body class name when the page is reloaded. For demonstration purposes, I'm using a GET request (URL parameter).

Of course, we can also switch stylesheets like the second method.

 <?php $themeStyleSheet = &#39;light-theme.css&#39;;
if (isset($_GET[&#39;theme&#39;]) && $_GET[&#39;theme&#39;] == &#39;dark&#39;) {
  $themeStyleSheet = &#39;dark-theme.css&#39;;
}

$themeToggle = ($themeStyleSheet == &#39;dark-theme.css&#39;) ? &#39;light&#39; : &#39;dark&#39;;
?>
<link href="<?php%20echo%20%24themeStyleSheet;%20?>" rel="stylesheet">
<a href="https://www.php.cn/link/39fd3e6495f36f48bfce2fdff05d27cf">Switch dark mode</a>

This approach has one obvious disadvantage: the page needs to be refreshed before switching. However, this server-side solution is very useful for keeping the user's theme selection when the page is reloaded, which we will see later.

Which method to choose?

The “correct” approach depends on the specific requirements of the project. For example, if it is a large project, you might choose the CSS attribute to manage a large code base. On the other hand, if your project needs to support legacy browsers, you need to take another approach.

Furthermore, we are not limited to using only one method. Sometimes, a combination of multiple methods is the most effective method. There may even be other methods we haven't discussed yet.

Operating system-level dark mode

So far, we have used buttons to switch between bright and dark modes, but we can simply have the user's operating system do the job for us. For example, many operating systems allow users to select bright and dark themes directly in system settings.

Pure CSS

Details

Fortunately, CSS has a prefers-color-scheme media query that can be used to detect user's system color scheme preferences. It can have three possible values: no preference , light , and dark .

 @media (prefers-color-scheme: dark) {
  /* Dark theme styles are here*/
}

@media (prefers-color-scheme: light) {
  /* Bright theme style here*/
}

To use it, we can put the dark theme style in the media query.

 @media (prefers-color-scheme: dark) {
  body {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
    background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
  }

  a {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809ffff;
  }
}

Now, if users enable Dark Mode in system settings, they will get Dark Mode style by default. We don't have to turn to JavaScript or server-side scripts to decide which pattern to use. In fact, we don't even need buttons anymore!

JavaScript

Details

We can use JavaScript to detect the user's preferred color scheme. This is very similar to the first method we used, except that we use matchMedia() to detect user preferences.

 const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDarkScheme.matches) {
  document.body.classList.add('dark-theme');
} else {
  document.body.classList.remove('dark-theme');
}

The downside of using JavaScript is that JavaScript is executed after CSS, so there may be a quick flash of bright themes, which may be mistaken for errors.

Of course, we can also switch stylesheets like the second method. This time, we link two stylesheets and use media queries to determine which stylesheet to apply.

Override the operating system settings

We just learned how to consider the user's system-wide color scheme preferences. But what if the user wants to cover the system preferences of their website? Users prefer the dark mode of the operating system. It does not always mean that they prefer the dark mode of the website, too. That's why it's a good idea to provide a way to manually overwrite the dark mode (even with the system settings).

View the code

Let's use CSS custom property methods to demonstrate how to do this. The idea is to define custom properties for both themes as before, wrap the dark style in a prefers-color-scheme media query, and then define a .light-theme class in it, which we can use to override the dark pattern properties if the user wants to switch between the two modes.

 /* Default color*/
body {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff;
}
/* Dark theme color*/
body.dark-theme {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
}

/* Styles provided for users who prefer dark mode at the operating system level*/
@media (prefers-color-scheme: dark) {
  /* Use dark theme by default*/
  body {
    --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
    --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
  }
  /* If the user decides to switch, use the bright mode style to overwrite the dark mode*/
  body.light-theme {
    --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
    --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff;
  }
}

Now we can again use our reliable buttons to switch between bright and dark themes. This way, we respect the operating system's color preferences by default and allow users to manually switch topics.

 // Listen to button click event btn.addEventListener("click", function() {
  // If the operating system is set to dark mode...
  if (prefersDarkScheme.matches) {
    // ...Then apply the .light-theme class to override these styles document.body.classList.toggle("light-theme");
    // Otherwise...
  } else {
    // ...Apply the .dark-theme class to override the default bright style document.body.classList.toggle("dark-theme");
  }
});

Browser support

prefers-color-scheme media query feature is supported by major browsers, including Chrome 76, Firefox 67, Chrome Android 76, Safari 12.5 (13 on iOS) and Samsung Internet browser. It does not support IE.

This is a promising amount of support! Can I Use estimates user coverage of 80.85%.

Currently supporting Dark Mode operating systems include MacOS (Mojave or later), iOS (13.0), Windows (10), and Android (10).

Store user preferences

What we've seen so far does do its promise: toggle themes based on operating system preferences or button clicks. This is fine, but it doesn't continue when the user visits another page on the website or reloads the current page.

We need to save the user's choice so that it can always be applied throughout the website and throughout subsequent visits. To do this, we can save the user's selection to localStorage when switching topics. Cookies are also suitable for this job.

Let's look at these two methods.

Using localStorage

We have a script that saves the selected topic to localStorage when the switch occurs. In other words, when the page reloads, the script takes the selection from localStorage and applies it. JavaScript is usually executed after CSS, so this method is prone to "Error topic flickering" (FOIT) .

View the code

 // Select button const btn = document.querySelector(".btn-toggle");
// Get theme preferences from localStorage const currentTheme = localStorage.getItem("theme");

// If the current topic in localStorage is "dark"...
if (currentTheme == "dark") {
  // ...Then use the .dark-theme class name document.body.classList.add("dark-theme");
}

// Listen to button click event btn.addEventListener("click", function() {
  // Toggle the .dark-theme class name of the body element document.body.classList.toggle("dark-theme");

  // Assume that the topic is equal to light
  let theme = "light";
  // If the body contains the .dark-theme class name...
  if (document.body.classList.contains("dark-theme")) {
    // ...set the theme to dark
    theme = "dark";
  }
  // Then save the selection to localStorage localStorage.setItem("theme", theme);
});

Cookies using PHP

To avoid FLIC, we can use server-side scripts such as PHP. Instead of saving the user's theme preferences to localStorage , we will create a cookie from JavaScript and save it to the cookie. But this may only work if you are already using a server-side language.

View the code

 // Select button const btn = document.querySelector(".btn-toggle");

// Listen to button click event btn.addEventListener("click", function() {
  // Switch on body.dark-theme class name document.body.classList.toggle("dark-theme");

  // Assume that the topic is equal to light
  let theme = "light";
  // If the body contains the .dark-theme class name...
  if (document.body.classList.contains("dark-theme")) {
    // ...set the theme to dark
    theme = "dark";
  }
  // Then save the selection to cookie document.cookie = "theme=" theme;
});

We can now check if the cookie exists and load the corresponding topic by applying the correct class name to the body tag.

 <?php $themeClass = &#39;&#39;;
if (!empty($_COOKIE[&#39;theme&#39;]) && $_COOKIE[&#39;theme&#39;] == &#39;dark&#39;) {
  $themeClass = &#39;dark-theme&#39;;
}
?>

Here is how to use a standalone stylesheet method:

 <?php $themeStyleSheet = &#39;light-theme.css&#39;;
if (!empty($_COOKIE[&#39;theme&#39;]) && $_COOKIE[&#39;theme&#39;] == &#39;dark&#39;) {
  $themeStyleSheet = &#39;dark-theme.css&#39;;
}
?>
<link href="<?php%20echo%20%24themeStyleSheet;%20?>" rel="stylesheet">

If your website has a user account (such as a place to log in and manage your profile), this is also a great place to save your topic preferences. Send them to the database where the user account details are stored. Then when the user logs in, get the topic from the database and apply it to the page using PHP (or any server-side script).

There are many ways to do this. In this example, I get the user's topic preferences from the database when logging in and save it in a session variable.

 <?php // Login operation if (!empty($_POST[&#39;login&#39;])) {
  // etc // If the user has passed the authentication...
  if ($loginSuccess) {
    // ...Save their theme preferences into session variable $_SESSION[&#39;user_theme&#39;] = $userData[&#39;theme&#39;];
  }
}

// If set, select the session variable first; otherwise select cookie
$themeChoice = $_SESSION[&#39;user_theme&#39;] ?? $_COOKIE[&#39;theme&#39;] ?? null;
$themeClass = &#39;&#39;;
if ($themeChoice == &#39;dark&#39;) {
  $themeClass = &#39;dark-theme&#39;;
}
?>

I use PHP's null merge operator (??) to decide where to get the topic preferences from: from the session or from the cookie. If the user is logged in, the value of the session variable is used instead of the value of the cookie. If the user is not logged in or has been logged out, the value of the cookie is used.

Handle user agent styles

To inform the browser of the UA stylesheet system's color scheme preferences and to inform it which color schemes are supported in the page, we can use color-scheme meta tag.

For example, suppose that the page should support both "dark" and "light" topics. We can put them all as values ​​in meta tags, separated by spaces. If we just want to support the "light" theme, then we just need to use "light" as the value.

<meta content="dark light" name="color-scheme">

After adding this meta tag, the browser will render the UA control element of the page (e.g. ) when considering the user's color scheme preferences. It renders the colors of the root background, form controls, and spell checking features (and any other UA-controlled style) based on user preferences.

Although themes are styled manually in most cases (this overrides UA style), informing the browser supported themes helps avoid any slight FOIT situations. This is correct for situations where HTML has been rendered but CSS is still waiting for loading.

We can also set it in CSS:

 :root {
  color-scheme: light dark; /* Both support*/
}

At the time of writing, color-scheme property lacks extensive browser support, although both Safari and Chrome support it.

Method combination

Let's put everything together and create a valid demo, which:

1. Automatically load dark or bright themes based on system preferences
2. Allows users to manually overwrite their system preferences
3. Keep the user's preferred topic when page reloads

Using JavaScript and localStorage

 // Select button const btn = document.querySelector(".btn-toggle");
// Check the operating system level dark mode preferences const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

// Get the theme preferences stored by the user from localStorage (if available)
const currentTheme = localStorage.getItem("theme");
// If the user preferences in localStorage are dark...
if (currentTheme == "dark") {
  // ...Let's switch on the body.dark-theme class name document.body.classList.toggle("dark-mode");
// Otherwise, if the user preferences in localStorage are light...
} else if (currentTheme == "light") {
  // ...Let's switch on body.light-theme class name document.body.classList.toggle("light-mode");
}

// Listen to button click event btn.addEventListener("click", function() {
  // If the user's operating system is set to dark and matches our .dark-mode class name...
  if (prefersDarkScheme.matches) {
    // ...Then switch the light mode class name document.body.classList.toggle("light-mode");
    // ...but if the .light-mode class name already exists on the body, use .dark-mode
    var theme = document.body.classList.contains("light-mode") ? "light" : "dark";
  } else {
    // Otherwise, let's do the same with .dark-mode document.body.classList.toggle("dark-mode");
    var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
  }
  // Finally, let's save the current preferences to localStorage so that we can continue to use it localStorage.setItem("theme", theme);
});

Use PHP and Cookies

 <?php $themeClass = &#39;&#39;;
if (!empty($_COOKIE[&#39;theme&#39;])) {
  if ($_COOKIE[&#39;theme&#39;] == &#39;dark&#39;) {
    $themeClass = &#39;dark-theme&#39;;
  } else if ($_COOKIE[&#39;theme&#39;] == &#39;light&#39;) {
    $themeClass = &#39;light-theme&#39;;
  }
}
?>


<script>
  const btn = document.querySelector(".btn-toggle");
  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

  btn.addEventListener("click", function() {
    if (prefersDarkScheme.matches) {
      document.body.classList.toggle("light-mode");
      var theme = document.body.classList.contains("light-mode") ? "light" : "dark";
    } else {
      document.body.classList.toggle("dark-mode");
      var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
    }
    document.cookie = "theme="   theme;
  });
</script>

Design considerations

I often hear people say that implementing Dark Mode is easier than designing Dark Mode. While I won't comment, let's take a look at some considerations for designing a dark theme.

You already know the basic task: swap the lighter color value for the darker color value and vice versa. However, some UI elements and enhancements are more meticulous and require more attention. Let's take a look at these.

Dark mode image

A good rule is to slightly reduce the brightness and contrast of the image so that it looks more comfortable against a dark background. Super bright images on super dark backgrounds can be shocking, while darker images can reduce some strong contrast.

The CSS filter() function handles this problem very well:

 /* Apply filters directly on body tags*/
body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}

/* Or apply it through media query*/
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

We can use<picture></picture> Elements do the same thing directly in the tag to load different versions of the image:

<picture>
  <source srcset="light-image.jpg" media="(prefers-color-scheme: light)">
  <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174372967441105.jpg" class="lazy" alt="Dark Mode in CSS Guide">
</source></source></picture>

The downside here is that it needs to provide two files, and when using CSS we only need to process one file. This also does not completely solve the problem of users switching color themes on the website.

Dark Mode Shadow

Dark Mode Shadow is tricky. If we simply use light colors to reverse the dark shadows, then we get a weird thing with light shadows on a dark background…this doesn't look good.

Dark shadows can be used in Dark Mode, but the background color must be "light" enough (such as dark gray) to provide enough contrast to see the shadows on a dark background.

Opacity is used to express depth, and areas with high opacity have lower depth. That is, the opacity of elements with higher altitudes should be lower than those that are "closer" in depth to the background.

Dark Mode Typesetting

The trick here is very similar to the image: we have to balance the contrast. Using too heavy fonts can make the text too harsh and make us want to stay away from the screen. Using too light fonts will make us squint and approach the screen for a closer look.

The balance point is in the middle.

Dark mode icon

Icons fall into this "tough" category because they are a bit like a mixture of text and images. However, if we use the SVG icon, we can change the fill color using CSS. On the other hand, if we use the font icon, we can simply change color attribute.

 /* SVG icon*/
body.dark-theme svg.icon path {
  fill: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15befefef;
}
/* Font icon (taking Font Awesome as an example) */
body.dark-theme .fa {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15befefef;
}

Many design notes that apply to text are also commonly used for icons. For example, we should avoid using pure white and thick borders.

Dark Mode Color

Pure white text will look harsh on a pure black background. The trick here is to use near white as text color and near black as background color. For example, the Material Design guide recommends using https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212 as the background color.

Dark Mode Palette

We have seen the effect of using near-white and near-black colors on text and images. Let's expand on it with some tips on how to develop a complete palette.

Most things boil down to one thing: contrast . That's why the first trick before determining any color is to use the contrast checker to make sure the color ratio is at least in line with the WCAG's AA rating guide (the contrast ratio is 4.5:1).

This means that when using the Dark Mode design, the unsaturated colors are our friends. They help prevent overly bright images and still give us enough room to create effective contrast ratios.

Next, remember that the emphasis is to enhance the effect. They may be brighter than dark themed background colors, so using them like the main colors or background colors of large containers is just as harsh and eye-breathing as bright images or heavy white text.

If contrast is the balance we are trying to reach, then remember that Dark Mode is more than just black and gray. How about a dark blue background with light yellow text? Or dark brown with tan? There is a whole (and growing) range of colors out there, and we can use any part of it to inspire creativity.

Some dark examples that don't use pure black:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b232B32

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b152028

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b202945

Material Design's guide on Dark Mode is a useful resource for best practices in Dark Mode design. Definitely worth a read to learn more tips to remember.

Actual cases

YouTube uses CSS variable technology. They define all color variables under the html selector, while the dark mode color is defined under html:not(.style-scope)[dark] . When dark mode is enabled, YouTube adds dark="true" attribute to html tag. This is how they use to overwrite variables defined in HTML.

In practical applications, CSS custom attribute methods seem to be the most popular. Dropbox Paper, Slack and Facebook are all using it.

Simplenote uses class name switching methods, where all bright style rules are child elements of .theme-light parent class, and all dark styles belong to .theme-dark class. When switching topics, the corresponding class name will be applied to body tag. Twitter goes a step further and offers a variety of themes to choose from: “Default,” “Down” and “Lights Off.” The Dark option uses dark blue as the background color. Compare it to using a pure black "light out".

Is Dark Mode required?

There are completely reasonable reasons for both. Some of these reasons are even beyond the scope of user experience, including time, budget and resources.

While considering why you might not want to implement Dark Mode, here are some reasons why you might want to have Dark Mode:

• It's cool and stylish (but that's not the reason to do it alone)
• It enhances accessibility by supporting users who are sensitive to strongly bright themes.
• It allows users to decide on the most comfortable way to use content while providing us with a way to maintain control over the appearance and feel. Remember, we want to beat the Reading Mode button!
• It helps to extend the battery life of devices using OLED screens, as brighter colors consume more energy.
• It's very popular and doesn't seem to go away. Your users who prefer dark mode (like me!) may expect your website to have a dark mode. Better be prepared.

The above is the detailed content of Dark Mode in CSS Guide. For more information, please follow other related articles on the PHP Chinese website!