Sin Note

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

2021/01/18 01:14#Vuetify#Nuxt.js#Vue

目的

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

方法

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