ウェブサイトをダークモードに対応するときに気をつけること

少し前にこのブログをリニューアルして、一緒に「ダークモードの対応」も行いました。
1つのサイトレベルでダークモードを対応したのは初めてだったので、具体的な実装方法や気をつけたことをメモしておきます。

ダークモードの対応方法

メディアクエリのprefers-color-schemeを使えば、ダークモードやライトモード時のCSSを指定できます。

@media (prefers-color-scheme: dark){
  ダークモード時のCSS
}
@media (prefers-color-scheme: light){
  ライトモード時のCSS
}

全ての記述をメディアクエリで分けると管理が大変になるので、CSS変数と組み合わせて、ダークモード時のみCSS変数内の色を変えるようにするのがベターです。

:root{
  --c-primary: #0076b5;
  --c-secondary: #17C2C7;
  --c-background-base: #F7F9FB;
  --c-background-primary: #FFF;
  --c-background-secondary: #F0F2F5;
  --c-text-base: #555;
  --c-text-lighter: #676767;
  --c-text-link: #0076b5;
}
@media (prefers-color-scheme: dark) {
  :root{
    --c-primary: #EBCB1A;
    --c-secondary: #FF178D;
    --c-background-base: #2B2B2B;
    --c-background-primary: #313131;
    --c-background-secondary: #242424;
    --c-text-base: #EAEAEA;
    --c-text-lighter: #B7B7B7;
    --c-text-link: #0076b5;
  }
}

あとは色を設定するときはCSS変数を使うようにすれば、ダークモードに対応したサイトが作れます。

対応としてはこれだけなので、すでにCSS変数を使って管理しているサイトなどはかなりラクに対応できますね。

SCSSの変数に慣れている場合

自分の場合CSS変数よりSCSS変数の方に慣れていたので、色をラクに記述できるような関数を用意しました。

// color用のmap
$colors: (
  primary: var(--c-primary),
  secondary: var(--c-secondary),
  bg_base: var(--c-background-base),
  bg_primary: var(--c-background-primary),
  bg_secondary: var(--c-background-secondary),
  t_base: var(--c-text-base),
  t_light: var(--c-text-lighter),
  t_link: var(--c-text-link)
);

// color(変数名);で色を取得できるようにする
@function color($colorName) {
  @return map-get($colors, $colorName);
}

CSS変数だとvar(--c-primary)と入力する必要があり、まだ慣れていないのですが、これを使えばcolor(primary)で取得できます。

完全に好みの問題になりますが、マップに入れておけば下記でclassの生成もできるので、個人で使う分には何かと便利です。

@each $colorName, $color in $colors {
  //.color_変数名 のclassを生成
  .color_#{$colorName} {
    color: $color;
  }
  //.bg_変数名 のclassを生成
  .bg_#{$colorName} {
    background: $color;
  }
}

この辺りはルールをきちんと決めておかないと後で面倒なことになりそうですし、複数人でコーディングをする場合はもっときちんとしたルールが必要そうです。

多少面倒でもCSS変数を使っておいた方が、Chrome開発者ツールから変数の確認もできますし、そろそろCSS変数をフル活用する方向で考えた方がいいかもしれません。