ご存知でしょうか。
何を隠そうオレたちのQiitaではダークモードが使えます。
正直私はあまり関与していないのですが、長きに渡って運営されてきたサービスに後付けでダークモード対応は間違いなくえぐいほど大変です。
以下では、これから設計をはじめるケースで備えられるアレコレをメモしておきます。
カラーパレットの設定
これからCSSの設計をはじめるならカラーパレットの設定はもはや必須です。
さらにいえば以下のようなMaterial Design風の思想でやってしまうのがもっとも柔軟性というか、拡張性が高くなりそうな気がしています。
:root {
// まず網羅的に色があって、
--color-red-50: #ff0000;
// ...
// ...
// 機能ごとに再代入されるやつ
--color-text-error: var(--color-red-50);
// ...
// ...
}
なお、--color-red-50の部分が（多分）まさにMaterial Design的なんですが、今をときめくTailwindでもよく似たカラーパレットが採用されているそうです。
全然追えていないのでそのうちちゃんとみたい。
ダークモード対応
カラーパレットができたらお馴染みprefers-color-scheme: darkでポチポチダークモードに対応していきます。
:root {
--color-text-error: var(--color-red-50);
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--color-text-error: var(--color-red-80);
}
}
color-scheme: dark;はそのバリエーションがダークモードであることを明示できるプロパティで、指定することでブラウザごとのデフォルトのStyleをデフォルトのダークモードカラーに変更してくれます（フォーム周りとかスクロールバーとか）。
ダークモードの拡張
上記でシステムの設定に合わせた形でのダークモードが実現しました。
が、当然ゆくゆくはシステム設定に依存しない形での実装が望まれ、さらには「ライトモード」「ダークモード」「システム設定準拠」に発展すること請け合いです（iOSのそれ）。
下記では<body data-theme="dark">みたいになる感じで想定しています。
See the Pen CSS Design for Darkmode by moro (@moro) on CodePen.
本当はスイッチ部分のJSとかも書きたい気持ちがありましたが、諸事情によりすこぶる余裕がありません。ご容赦ください。
さいごに
結論としては「カラーパレットさえいい感じに作っておけばだいたい大丈夫！」ではないかなと思います（勘）。
そのうち実際に実装することがあったら追記します……！
良いお年を！