EN

CSS・Arranging and positioning

Let's support dark mode

A phone at night is easier on the eyes with a dark screen. Learn how to receive the OS "dark mode" setting in CSS and switch your page's colors automatically.

That blinding white screen you look at under the covers at night—it’s rough, isn’t it? That’s why many people set their phone or PC to dark mode (a black-based color scheme). If you receive that setting in CSS, your page will automatically switch to a night look too.

How to write it: everyday colors + a night override

First write the everyday (light) colors, then override only for dark mode.

body {
  background: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #1b1b1f;
    color: #e6e6e6;
  }
}

When someone set to dark mode opens the page, the background switches to a deep color and the text to a bright one, automatically. Not a single line of JavaScript needed.

CSSMake it look good on phones too: media queriesYou can review how @media itself works in the media queries lesson

Let’s see it in motion

The real thing has the browser respond automatically to the OS setting, but in this demo we switch it with a button as a stand-in.

On a real page, the OS setting plays this button’s role. The moment you switch the setting, the colors of the open page change too.

Three things to watch for with night colors

  • Don’t go pure black × pure white — #fff text on a #000 background has too strong a contrast and tires the eyes. A slightly lighter black like #1b1b1f for the background and a slightly darker white like #e6e6e6 for the text are the standards
  • Check readability at night too — flip the colors and a combination that was readable in light mode can become unreadable. The passing line for contrast ratio is the same in dark mode
  • You don’t need to prepare every color — the background and text color are plenty to start. Cards and borders can come little by little, once the page grows
AccessibilityReadable colors, unreadable colors (contrast)For how to check contrast ratio, see this lesson in the accessibility courseCSSManage colors in one place with CSS variablesThe CSS variables lesson, where you manage colors in one place, is here

Tell the browser’s standard parts too: color-scheme

:root {
  color-scheme: light dark;
}

prefers-color-scheme was a signal that works on your own CSS, but color-scheme is a signal to the browser’s own parts. Write this and standard parts you never colored yourself—like scrollbars and checkboxes—will also switch automatically to match the setting.

Summary of this lesson

  1. With @media (prefers-color-scheme: dark), you can write CSS that works only for people set to dark mode
  2. Write the everyday colors first, and override only for dark
  3. Avoid pure black × pure white, and use a slightly softened black and white

Try it

The “dark mode support” you learned this time won’t be used on Shima’s page (it’s kept unified in a gentle cream-colored world). It’s a touch that’s appreciated on text-heavy sites and pages used at night. Keep it in mind, and use it when you need it.

FAQ

Do images get darker in dark mode too?
Not automatically. Photos and illustrations show in their original colors. Handling just the background and text color is plenty to start with; adjust things around images little by little once you're used to it.
I want to toggle dark mode with a button on the page
prefers-color-scheme only reads the OS setting, so you can't switch it directly with a button on the page. To let users choose it themselves, you need a separate mechanism that swaps a class with JavaScript.
Can I change the scrollbar color too?
Yes. If you write :root { color-scheme: light dark; }, browser-standard parts like scrollbars and checkboxes also switch automatically to match the setting.