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

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

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

目次

  1. ダークモードの対応方法
  2. ダークモード、ライトモードの切り替え方法
  3. ダークモードの色について
  4. 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);
}

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

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

最近はいろんなサービスでダークモードが採用されてるので、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くらいがチラつかずに見やすい文字になると思います。

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

1. マイページにいく

2. 歯車を押す

3. アカウント設定を押す

4. ダークモードのトグルボタンを切り替える

よかったら使ってくださいナ。
気になる箇所あれば、Twitterに連絡ください。

Remaining : 3 characters / 0 images
100

Sign up / Continue after login

Campaign

Related stories

Writer

Share

Popular stories

ローソンPBのパッケージデザインをくわしくみる

17897

M1 Macでnpmを使えるようにする

904

ノジマ電気のCランク中古品スマホを購入して完全勝利した。

350