Webサービスにおけるダークモード対応方法 #JavaScript

先日、携わらせていただいているSpotlightというサービスのデザインリニューアルをしました。
その際にダークモードに対応したので、それの知見共有です。

ダークモードの対応方法

CSSでの対応です。
こんな感じで対応したい部分をメディアクエリの中に書き込みます。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }
}

それだけ！

ダークモード、ライトモードの切り替え方法

これが苦労しました。
Spotlightでは以下仕様でダークモードに対応しています。

未ログインのユーザー → 端末のデフォルト設定
ログイン済かつサービス内でテーマ設定していないユーザー → 端末のデフォルト設定
ログイン済かつサービス内でテーマ設定しているユーザー → 設定に合わせる

コードにするとこんな感じ。

document.documentElement.setAttribute('theme', getTheme());

function getTheme() {
    const userTheme = localStorage.getItem('user');
    if (userTheme) {
        return userTheme;
    }
    const isDark = matchMedia('(prefers-color-scheme: dark)').matches;
    return isDark ? 'dark' : 'light';
}

@media (prefers-color-scheme: light) {
  :root {
    ...
  } /* 端末設定がライトテーマ */

  :root[theme="dark"] {
    ...
  } /* 端末設定がライトテーマかつサービス設定がダークテーマ */
}

@media (prefers-color-scheme: dark) {
  :root {
    ...
  } /* 端末設定がダークテーマ */

  :root[theme="light"] {
    ...
  } /* 端末設定がダークテーマかつサービス設定がライトテーマ */
}

:rootについてはこの記事みてくれると意味がわかるかと

サービス内でテーマ設定をするとlocalStorageでデータが保持されます。
localStorageの他にも色々ありますが、今回はユーザーの使用する端末ごとに設定変更ができるよう、localStorageにしています。

HTMLに<html theme="">が入って、切り替わる仕組みなのでCSSではコメントアウトのように対応したい部分のCSSを書き込みます。

さらに、テーマ設定でテーマを切り替えなきゃいけないのでそれも実装します
SpotlightはToggleボタンをClass名切り替えで実装しているので、ちょっとややこしいため今回はボタンクリックしたら切り替わるようにします

<button onclick ="changeTheme(event)"></button>

function changeTheme(ev) {
  const currentTheme = document.documentElement.getAttribute('theme');
  const newTheme = currentTheme == 'dark' ? 'light' : 'dark'
  document.documentElement.setAttribute('theme', newTheme);
  localStorage.setItem('user', newTheme);
}

実際どんな感じで動作するかはぜひアカウント登録して確かめてください。

ダークモードの色について

最近はいろんなサービスでダークモードが採用されてるので、Spotlightはどんな感じでいこうかな〜と他サービスを調査したのでこれからダークモードを採用される方はぜひ参考にしてください。

iOS

背景: #000000
サブ背景: #1C1C1E
文字: #FFFFFF
サブ文字: #EBEBF5 60%

Android

背景: #121212
サブ背景: #121212 + #FFFFFF 12%
文字: #FFFFFF
サブ文字: #FFFFFF 60%

Twitter

ダークブルー
背景: #15202B
サブ背景: #15212B
文字: #FFFFFF
サブ文字: #8899A6

ブラック
背景: #000000
サブ背景: #15181C
文字: #D9D9D9
サブ文字: #6E767D

Facebook

背景: #18191A
サブ背景: #242526
文字: #E4E6EB
サブ文字: #B0B3B8

Spotlight

背景: #000000
サブ背景: #222222
文字: #FFFFFF
サブ文字: #999999

文字と背景色のコントラスト比の数値は、19〜14くらいがチラつかずに見やすい文字になると思います。

気になる箇所あれば連絡ください。