v7.0.3

Dark Mode

Table of Contents

Detail

SCSS を利用することでダークモード対応が可能です。

ダークモードとは、黒を基調とした色合いの UI スキンを適応した状態のことを言います。ダークモードは目の疲労軽減・有機 LE の省電力化などのメリットを背景に広がり始めました。

2019 年に、Google が Material Design 対応し Android 10 へ反映、Apple も Human Interface Guidelines 適応後 iOS・iPadOSmacOS に実装したことで一般化しつつあります。

呼び方は「ダークモード・ダークテーマ・ナイトモード・シャドウモード」など様々で、ブルーライト軽減の目的で実装された iOS の「ナイトシフト」も混同しがちですが、OS ベースの全体設定をダークモード、適応するために作った UI スキンをダークテーマと考えるとスッキリします。

Activation

SCSS 変数 $option-css-variablestrue で上書きすることで有効化できます。

// Override
$option-css-variables: true;

// Import
@import "~musubii/src/scss/configs/_import.scss";
Warning

デフォルトは false です。有効化すると CSS Variables に対応していない IE11・Android 4.4 (OS Browser) では色プロパティが認識されなくなります。Ponyfill の導入を検討してください。

Trigger

モダンブラウザには OS のダークモード設定を認識するメディアクエリ prefers-color-scheme が実装され始めています。これを利用する場合は、CSS Variables 有効化に加え SCSS 変数 $option-theme-trigger-mediatrue で上書きします。

// Override
$option-css-variables: true;
$option-theme-trigger-media: true;

// Import
@import "~musubii/src/scss/configs/_import.scss";
Warning

デフォルトは 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-defaultdark で上書きすることで、デフォルトの色合いをダークテーマにすることが可能です。CSS Variables を有効化していない状態でもこの機能は使えます。

// Override
$option-theme-default: "dark";

// Import
@import "~musubii/src/scss/configs/_import.scss";

Sources