更新日:2019/11/23

Nuxt.js + Vuetify でダークモードに対応してみた

Nuxtjs
Vuetify

目的

なんといってもダークモードに対応させること

方法

Vuetify 編

Vuetifyのコンポーネントを使っている部分はすごく簡単にダークモードにすることができる

  mounted() {
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) { // 使っているOSがダークモード設定しているかどうか判断する ダークモード以外のときは「false」
      this.$vuetify.theme.dark = true // Vuetifyの設定をダークテーマに変更する
    }
  }

最初はcreated()の中に書いていましたがライフサイクル的にダメですね。
(なんでもかんでもcreated()に書くのはやめましょう...)

独自CSS 編

SCSSで書いているので少し遠回りをしないとダメっぽい
最終的には以下のような感じで落ち着いた

:root {
  @media (prefers-color-scheme: light) {
    --color-base: white;
    --color-main: black;
  }

  @media (prefers-color-scheme: dark) {
    --color-base: black;
    --color-main: white;
  }
}

$COLOR_BASE: var(--color-base);
$COLOR_MAIN: var(--color-main);

※SCSSの変数を直接しようしてもダメ

まとめ

意外とさくっとダークモード対応させることができました
日頃からダークモードなので対応してくれるWebサイトやアプリが増えるといいですね。
本サイトのソースコードはここにおいてありますのでぜひ参考にしてください。
では、次回の記事にて