ダークモードの6つのレベル（2024年）

記事

• 基本的なCSSダークモードから完全なアダプティブテーマまでの段階的な実装を解説。
• prefers-color-scheme、color-scheme、light-dark()、JS制御のオーバーライドを網羅。
• システム / ライト / ダークの三択トグルを推奨。
• フラッシュ・オブ・ウロングテーマ（ページ読み込み時に一瞬誤ったテーマが表示される問題）を避けながらユーザー設定を永続化する方法を紹介。

ディスカッション

• あるコメント投稿者は、palette・luminance mode・themeを混用せず区別すべきと提案。
• CSS の light-dark() は拡張性が低いと批判され、名前付きモードを持つ仮想的な themed() 関数との比較が議論された。
• 条件付きCSSファイルはメディアクエリに一致しなくてもブラウザがすべてダウンロードする——よくある誤解として指摘された。
• 記事は6レベルと数えているが、実際は8レベルあるとコメント投稿者が指摘。

HN（Hacker News）で議論を読む

原文（英語）: Six Levels of Dark Mode (2024)