CSS Variablesを使ってダークモードを追加する
- Data
- 2019/10/31
- Tag
最近いろんなデバイスやアプリでダークモードが実装されてきていて、充電が減りにくいなどのメリットもあるようなのでサイトにもダークモードを実装しました。
個人的にダークモードにしているので 「サイトにもダークモードを実装する文化が広まるといいなー」と思ってます。
簡単に実装するにはjavascriptでmediaqueryがprefers-color-scheme: darkの場合に、任意のタグに.darkなどのクラスをつけて、クラスがついている場合に定義していたカラーの変数を変更すると、色合いの変更は楽な気がします。
ただCSS Variablesが実装されていないブラウザには反映されないため、少し前のバージョンを考慮したい場合には注意が必要です。
CSS Variablesが対応していないブラウザに関しては下記
下記のようなjavascriptを用意して、localstorageにも保存してくれる関数を用意して、changeModeにlocalstorage.modeを投げて、存在する場合はlocalstorage.modeを優先するようにしました。
これによってuiでも切り替えたいときに、changeModeにdark or lightを投げることでlocalstorageに入れることができます。
このサイトではvueを使っているのでstoreでやっていたりするのですが、どこでも使える形になおした関数が下記です。
const changeMode = (mode) => {
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const darkModeOn = darkModeMediaQuery.matches
const mode = mode ? (darkModeOn ? 'dark' : 'light')
const html = document.querySelector('html')
localStorage.mode = mode
html.classList.add(mode)
}
changeMode(localStorage.mode)
:root {
--main-color: #3bbfce;
--entry-title-color: #f5f5f5;
--link-color: #666;
--text-color: #555;
--paper-background-color: rgba(255, 255, 255, 0.8);
}
.dark {
--main-bg-color: #222;
--entry-title-color: #222;
--link-color: #aaa;
--text-color: #bbb;
--paper-background-color: rgba(255, 255, 255, 0.03);
}
ダークモード切り替えは端末のモードを切り替えるか、Aboutページから切り替えられるようにしています。
下記参考にさせていただきました。