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

URL: https://webrandum.net/darkmode-support/
公開日: 2020-05-27
更新日: 2020-05-27
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

少し前にこのブログを[リニューアル](https://webrandum.net/renewal-3/)して、一緒に「ダークモードの対応」も行いました。

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変数をフル活用する方向で考えた方がいいかもしれません。

## ダークモードのデザインで注意すること

### コントラスト比

ダークモードに限りませんが、ライトモードとダークモードの2つのカラーパターンを作るとなると、コントラスト比に注意をしないと片方が基準を満たさない場合があります。

コントラスト比の計算方法は[WCAG 2.0](https://www.w3.org/TR/WCAG20/#contrast-ratiodef)に載っています。

デザインを作るときは[Contrast Checker](https://contrastchecker.com/)というサービスを使えば、問題ないかどうか分かります。

[![](https://www.google.com/s2/favicons?domain=contrastchecker.com)Contrast Checker![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/1b9db69fd76a53b2bb7eaa393953c581459187dc263481cce6bac88da2980000.webp)WCAG - Contrast Checkerhttps://contrastchecker.comCheck the contrast of your color design for accessibility base on Web Content Accessibility Guideline (WCAG)](https://contrastchecker.com)

使い方は簡単で、「FOREGROUND」に文字色、「BACKGROUND」に背景色の文字コードを入力するだけです。

### 装飾の問題

基本的に文字色を黒から白に、背景色を白から黒に変えればダークモード対応が済みそうだと思いがちですが、記事内の装飾を見ていくと、ただ反転させるだけではうまくいかないケースも出てきます。

特にシャドウなどにもCSS変数を使ってしまっていると、ダークモードにしたときにシャドウが白色になってしまいます。

このようにライトモードとダークモードで同じ色でもいい場合があるので、その場合は変数は使わず直接指定をすることもあります。