目的

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

方法

Vuetify 編

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

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

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

 独自CSS 編

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

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