Dark Mode
Table of Contents
Detail
SCSS を利用することでダークモード対応が可能です。
ダークモードとは、黒を基調とした色合いの UI スキンを適応した状態のことを言います。ダークモードは目の疲労軽減・有機 LE の省電力化などのメリットを背景に広がり始めました。
2019 年に、Google が Material Design 対応し Android 10 へ反映、Apple も Human Interface Guidelines 適応後 iOS・iPadOS や macOS に実装したことで一般化しつつあります。
呼び方は「ダークモード・ダークテーマ・ナイトモード・シャドウモード」など様々で、ブルーライト軽減の目的で実装された iOS の「ナイトシフト」も混同しがちですが、OS ベースの全体設定をダークモード、適応するために作った UI スキンをダークテーマと考えるとスッキリします。
Activation
SCSS 変数 $option-css-variables を true で上書きすることで有効化できます。
// Override
$option-css-variables: true;
// Import
@import "~musubii/src/scss/configs/_import.scss";
デフォルトは false です。有効化すると CSS Variables に対応していない IE11・Android 4.4 (OS Browser) では色プロパティが認識されなくなります。Ponyfill の導入を検討してください。
Trigger
モダンブラウザには OS のダークモード設定を認識するメディアクエリ prefers-color-scheme が実装され始めています。これを利用する場合は、CSS Variables 有効化に加え SCSS 変数 $option-theme-trigger-media を true で上書きします。
// Override
$option-css-variables: true;
$option-theme-trigger-media: true;
// Import
@import "~musubii/src/scss/configs/_import.scss";
デフォルトは false です。prefers-color-scheme が使えるブラウザは限られていますし「ダークモードは使っていないけれどサイトはダークにしたい」などの自由な切り替えに対応できません。
MUSUBii のデフォルト設定では、カスタムデータ属性（デフォルトは data-theme="dark"）をトリガーにしてダークテーマへ切り替えられる CSS を出力しています。
このドキュメントサイトでは、JavaScript で最初に prefers-color-scheme: dark が使用されているかを判定してダークテーマ・ライトテーマを適応。その後はサイト右上の切り替えボタンを押すたびに localStrage へ状態を保存する手法を取っています。
const isLocal = localStorage.getItem("theme")
const isDark = window.matchMedia("(prefers-color-scheme: dark)")
if (isLocal) {
document.body.setAttribute("data-theme", isLocal)
} else if (isDark.matches) {
document.body.setAttribute("data-theme", "dark")
} else {
document.body.setAttribute("data-theme", "light")
}
Default Dark
$option-theme-default を dark で上書きすることで、デフォルトの色合いをダークテーマにすることが可能です。CSS Variables を有効化していない状態でもこの機能は使えます。
// Override
$option-theme-default: "dark";
// Import
@import "~musubii/src/scss/configs/_import.scss";