いでよ！ダークモーーーード！

2020-12-07 14:41:07

Spotlightのデザインをしてるあんずです。
Spotlightがダークモードに対応したので、それの知見共有です。

目次

ダークモードの対応方法

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

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

Spotlightでダークモードとライトモードを切り替える

ダークモードの対応方法

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

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

それだけ！

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

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

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

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

JavaScript

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';
}

CSS

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

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

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

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

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

サービス内でテーマ設定をするとlocalStorageでデータが保持されます。

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

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

HTML

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

JavaScript

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

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