ダークテーマ対応
目次
使ってるアプリ全部をダークテーマにしたいぐらいに好き。
ということで自分のブログにも導入した。
色は詳しく分からないので細かいところは気にしてない。とりあえず対応しただけにとどまっている。
ちなみに切り替えボタンはナビに入っており存在感なし。
ダークテーマ実装は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`のときはこれらのリンクは非表示 -->
なるべく少ない手数で対応したかったので、満足感高め。
健康診断で視力の結果が悪くなっててショックだった。
なるべく目に気を使って過ごしていきたい。