Dark mode with web design

Paul Li
Paul Li
Jun 24 · 6 min read

Introduction

Dark mode 是近兩年來蠻熱門的議題, 講白了, 它就是一種 theme, 一種依照當前環境做區分的 theme, 更是一種讓服務貼近生活的態度.

如果你的服務不支援 dark mode 會怎樣 ?

老實說一點都不會怎樣, 只是…在特定的環境下, 會讓 user 在使用上會感到吃力且疲倦, 試想 facebook 好了, 它的基調大多是白色背景單配黑色的文字, 在燈光明亮的狀態下瀏覽或許感到舒適, 但是, 如果在昏暗亦或是睡前躺在床上使用時, 眼睛便會因為對比的銳利而感到疲憊, 我想…這都不是我們想提供給 user 的感受.

所以, 除了 OS 提供 dark mode 的功能外, 服務所呈現的 web content 是否也能提供 dark mode 呢 ? 這便是我們今天想要討論的議題.

最新的 macOS 在 System Preference 裏提供了 light / dark mode 供 user 選擇, 大部分的 UI 也會依照 user 的選擇做出相對應的變化, 除此之外, 很多應用程式, 比方說 Chrome, 亦提供了 dark mode 這樣的 theme 讓 user 有更多的選擇, 顯示說 dark mode 不僅僅是一種潮流, 更是一個良好的產品態度的彰顯.

在 WWDC 2019 便有一環講到如何讓 web content support dark mode (iOS 13). 而且 Android Q 亦有 support dark theme.

- Support Dark mode in Your Web Content
- Android Q with Dark theme

Nothing but CSS

如同上段所述, dark mode 就是一種 theme, 也就是說先決條件必須要有一套完整的 design language, 一但有了明確且完整的 design language 後, 剩下的事情就相對簡單許多.

如下所示, 這是筆者拿來示範用的 demo site (light mode).

demo site — light mode (link)

我們的目標很明確, 即設計一 CSS dark mode 的 theme, 讓 web page 可以自動的依據當前系統設定, 自動將 web content 轉換成 dark mode

demo site — dark mode (link)

在 CSS 的設定上, 其實非常的簡單, 只要明確在 root 定義 color-scheme, 其實便已完成了

<style>:root {
color-scheme: light dark;
}
</style>

CSS Color Adjustment Module Level 1

透過該屬性的設置, 便可以快速的設定當前 web page 的 color scheme, 主色系便會自動被 apply, 比方說 background color 和 text color

方便歸方便, 不過很多時候系統預設的 color scheme 可能與服務的 design language 不盡相同, 因此更細緻化的呈現是有必要的. 那麼…除了 color-scheme 的設置外, 我們還能有什麼樣的手段呢 ?

可以透過 CSS media query 的條件設置, 來 overwrite 一些相關屬性, 其運作原理很簡單, 只要當前的 OS 設置為 dark mode, 便會掉進去我們預期的設定

<style>header {
background-color: #fff;
color: #000;
}
@media (prefers-color-scheme: dark) {
header {
background-color: #000;
color: #fff;
}
}
</style>

如此, developers 便可以根據不同的 module 做出更為細緻且出色的表現, 如果搭配 CSS var() 的使用, 更可以讓這些 color scheme 更好管理且套用.

讓我們把上述的 CSS 再改寫一下

<style>:root {
--header-background-color: #fff;
--header-text-color: #000;
}
header {
background-color: var(--header-background-color);
color: var(--header-text-color);
}
@media (prefers-color-scheme: dark) {
:root {
--header-background-color: #000;
--header-text-color: #fff;
}
}
</style>

瞧出箇中翹楚了嗎 ? 透過 CSS, 便能輕輕鬆鬆讓你的服務也能 support dark mode. 讓我們看看在 macOS 以及 iOS 13 上面的表現

macOS Mojave & safari version 12.1.1
iOS 13 & mobile safari

What else ?

WWDC 2019 除了有揭露 dark mode 於 CSS 的設置方法外, 另外還有其他設置方法, 基本上只要有 support media query 語法的 html tag, 應該都可以吃得到 OS dark mode 模式.

<picture>
<source srcset="mojave-night.jpg"media="prefers-color-scheme: dark">
<img src="mojave-day.jpg">
</picture>

如上所示, developer 便可以根據當前 OS 設置來做不同的 image 呈現, 讓 dark mode 的整體支援更加完善.

看了以上介紹, 如果對 dark mode 有興趣的朋友, 只要你的 macOS 為 Mojave & safari version 12.1.1 以上, 便可以依照上述步驟來感受 dark mode 帶來的全新感受.

Reference

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade