Using @nuxtjs/color-mode module to control theme

app.vue

@@ -1,15 +1,20 @@
 <script setup>
 const runtimeConfig = useRuntimeConfig()
-const theme = ref('light')
-const toggleTheme = () => {
-  theme.value = theme.value === 'light' ? 'dark' : 'light'
-}
+const colorMode = useColorMode()
 const drawer = ref(null)
+const themes = ref([
+  { title: 'Light', value: 'light' },
+  { title: 'Dark', value: 'dark' },
+  { title: 'System', value: 'system'}
+])
+const setTheme = (theme) => {
+  colorMode.preference = theme
+}
 </script>
 
 <template>
   <v-app
-      :theme="theme"
+      :theme="$colorMode.value"
   >
     <v-navigation-drawer
         v-model="drawer"
@@ -23,12 +28,26 @@ const drawer = ref(null)
         <v-list>
           <ApiKeyDialog/>
 
+          <v-menu
+          >
+            <template v-slot:activator="{ props }">
               <v-list-item
+                  v-bind="props"
                   rounded="xl"
-              :prepend-icon="theme === 'light' ? 'dark_mode' : 'light_mode'"
-              :title="(theme === 'light' ? 'Dark' : 'Light') + ' mode'"
-              @click="toggleTheme"
+                  :prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
+                  title="Theme mode"
               ></v-list-item>
+            </template>
+            <v-list>
+              <v-list-item
+                  v-for="(theme, idx) in themes"
+                  :key="idx"
+                  @click="setTheme(theme.value)"
+              >
+                <v-list-item-title>{{ theme.title }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </v-list>
       </template>
     </v-navigation-drawer>

nuxt.config.ts

@@ -21,5 +21,6 @@ export default defineNuxtConfig({
         'vuetify/styles',
         'material-design-icons-iconfont/dist/material-design-icons.css',
         'highlight.js/styles/panda-syntax-dark.css',
-    ]
+    ],
+    modules: ['@nuxtjs/color-mode']
 })

package.json

@@ -8,6 +8,7 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
+    "@nuxtjs/color-mode": "^3.2.0",
     "material-design-icons-iconfont": "^6.7.0",
     "nuxt": "^3.1.2"
   },

yarn.lock

@@ -786,6 +786,15 @@
     vite-plugin-checker "^0.5.5"
     vue-bundle-renderer "^1.0.0"
 
+"@nuxtjs/color-mode@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.npmmirror.com/@nuxtjs/color-mode/-/color-mode-3.2.0.tgz#b5b6a3931a6ddd9646c3aad121d357c635792eb7"
+  integrity sha512-isDR01yfadopiHQ/VEVUpyNSPrk5PCjUHS4t1qYRZwuRGefU4s9Iaxf6H9nmr1QFzoMgTm+3T0r/54jLwtpZbA==
+  dependencies:
+    "@nuxt/kit" "^3.0.0"
+    lodash.template "^4.5.0"
+    pathe "^1.0.0"
+
 "@planetscale/database@^1.5.0":
   version "1.5.0"
   resolved "https://registry.npmmirror.com/@planetscale/database/-/database-1.5.0.tgz#073d9ca9841ad62896a6e31f610e89112e6264ef"