Vuetify 端末のダークモード設定を自動で取得してテーマに反映する

plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: { dark: window.matchMedia('(prefers-color-scheme: dark)').matches },
})

point

theme: { dark: window.matchMedia('(prefers-color-scheme: dark)').matches },

で、Vuetifyのダークモード設定を端末の設定から取得して自動で切り替えることができます。

おまけ

特定のページだけ強制的にダークモードにする（その逆）、切り替えるなど。

page.vue

  created() {
    this.$vuetify.theme.dark = true // or false
  },