clover.blue

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ページから切り替えられるようにしています。

https://clover.blue/about

下記参考にさせていただきました。