Arm1.ru

Adding Dark Mode support for a website

Dark mode on a website

iOS 13 coming this fall will include dark mode. Current macOS already has dark mode. With bringing dark mode to iOS Apple also recommends to web developers to adopt colours for dark mode.

It's pretty easy to implement. All you need is to change CSS for your website and add something like that:

:root {
  color-scheme: light dark;
  --body-background-color: white;
  --body-text-color: #2F2F2F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-background-color: #222222;
    --body-text-color: #E2E2E2;
  }
}

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

So you're adding support for colour schemes with color-scheme: light dark; and defining CSS variables.

If you need to test it you can try the latest Safari in latest betas of iOS or macOS or (maybe) Safari developer preview. Developer tools in Safari have a special button to test dark mode.

Dark Mode for a website in Safari

Interesting: in macOS 10.15 default body background for dark mode is also dark. But in 10.14 it will be white in Safari and Firefox. You need to specify the background colour for the dark scheme if you want to support macOS < 10.15. Apple didn't mention that during the WWDC session. All they did was just remove the background-color property from CSS to let OS choose the background colour. They provide the NSHipster website as an example but its CSS also contains background colour property in CSS to support previous macOS versions :)

I've added dark scheme support to my Space In Box site. Also check the NSHipster site that has it too.

This article is some kind of summary from WWDC video Supporting Dark Mode in Your Web Content.

keyboard_return back