目的

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

方法

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 サイトやアプリが増えるといいですね。本サイトのソースコードはここにおいてありますのでぜひ参考にしてください。では、次回の記事にて

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

目的

方法

Vuetify 編

独自 CSS 編

まとめ