ダークテーマ対応

2019-05-04

使ってるアプリ全部をダークテーマにしたいぐらいに好き。
ということで自分のブログにも導入した。
色は詳しく分からないので細かいところは気にしてない。とりあえず対応しただけにとどまっている。

ちなみに切り替えボタンはナビに入っており存在感なし。

ダークテーマ実装はcss variablesを切り替えればいけると確信していて、結果的に以下のようなことをやった。
色はすべてscss変数で定義していて、要素も少ないので楽なほうだったと思う。

すべての色設定をscss変数からcss variablesに変更
dark-themeクラスの時はcss variablesを上書き
prefers-color-scheme: dark の場合は強制的にダークテーマ適用
テーマの状態はlocalstrageに保存
複数箇所で利用しているロゴなどのsvgはuseタグにしてスタイルをあてれるように
gistなどはもとから黒いテーマにした

ブラウザ対応…🙈🙉

実装をもう少し詳しく

_theme.scssはこんなかんじ

:root {
    --background: #f6f6f6;
    --color: #333;
    ...
}

@mixin dark-theme {
    --background: #333;
    --color: #eee;
    ...
}

@media (prefers-color-scheme: dark) {
    :root {
        @include dark-theme;
    }
}

.dark-theme {
    @include dark-theme;
}

横着なので、headタグ内にテーマ切り替えスクリプトをべた書き

<head>
  ...
  <script>
    window.THEME_KEY = 'theme'; window.DARK_THEME = 'dark';
    if (localStorage.getItem(window.THEME_KEY) === window.DARK_THEME) {
      document.querySelector('html').classList.add('dark-theme');
    }
  </script>
</head>

横着なので、onclick属性にテーマの保存or削除、リロードをべた書き

<li><a onclick="localStorage.clear(); location.reload();">DEFAULT THEME</a></li>
<li><a onclick="localStorage.setItem(window.THEME_KEY, window.DARK_THEME); location.reload();">DARK THEME</a></li>
<!-- `prefers-color-scheme: dark`のときはこれらのリンクは非表示 -->

なるべく少ない手数で対応したかったので、満足感高め。

健康診断で視力の結果が悪くなっててショックだった。
なるべく目に気を使って過ごしていきたい。