ダークモード実装について設計してみた

経緯・目的

自分の務める会社のウェブサイトにて、OSに寄るダークモード設定の切り替えではなく自社サービスの設定画面もしくは提携先APIレスポンスのフラグによってダークモード設定する案件がありました。

なかなかダークモードのCSS設計について記載のブログ等が少なかったので記録と共有をします。

※よってこの話にOSのテーマを見るような処理の話はでてきません。

前準備

自社のサイトはすでに運用されている、かつおおよその汎用的カラー以外に使用している色の把握ができていない問題がありました。
（突発的なキャンペーンのカラーなど管理が煩雑になりがちですよね）
問題点を洗い出す意味も込めて準備段階で行った作業は以下の点です。

• ① 現在使用されている色の洗い出し
• ② 共通に使われている汎用的な色の洗い出し（ここで近しい色についてはまとめられないかビジュアルデザイナーとの調整も行いました）
• ③ 現在運用されているCSSの色に !importantがついていれば外しセレクターの詳細度で調整
• ④ 色を変数管理するので命名のルール決め

上記を事前に行っておくと先の作業がスムーズかと思いました。

ファイル構成

上記①で洗い出した色が62色あったため、ダークモード対応すると単純に2倍になる可能性を踏まえライトとダーク、別々のファイルにて管理をすることにしました。

• color.scss
• color-dark.scss
• root.scss

color.scss：ライトモードの色を定義
color-dark.scss：ダークモードの色を定義
root.scss：上記2ファイルを読み込みCSS変数をとして定義

記述について

変数の命名

④での検討を踏まえ
今まではSassの変数名もバラツキがあったので、vscodeでの検索のしやすさ、サジェストのされやすさを重視しました。
$color-を接頭辞につけることで色の変数を探したい、ということを明確にし次に役割を記述するルールにしました。
またキャメルケースも実装者によってバラバラだったので、全て小文字のケバブケースとしました。

例）
$color-red： どの赤かわかりにくい
$color-ranking-1：ランキングの1位の色とわかりやすい（今後のABテストで青色に変更になっても変数名を変える必要はない）

ファイルの中身

color.scss

 $color-primary: #444;

color-dark.scss

 $color-primary: #d1d1d1;

ライトとダークを同じ変数名にし同じ箇所に当たることを変数名から推測しやすくしました。

root.scss

@use "./color" as *;
@use "./color-dark" as dark;

:root {
 --color-primary: #{$color-primary};

 .dark {
  --color-primary: #{dark.$color-primary};
 }
}

このような形であれば同じ変数名を使用しCSS変数にも色を付与することが可能でした。
ダークだけ変数名が異なるとかだと混乱を招く危険性がありました。

課題

ファイルまたぎをするのでvs codeのColor Highlightが使えずroot.scssだけでは色の推察がとても難しいということがわかりました。
何かいい拡張機能などあればぜひ教えてほしいです。