From 91ca495f20aca0ed9239a67288aed51758354ca8 Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Sun, 12 Feb 2023 18:22:08 +0800
Subject: [PATCH] Using @nuxtjs/color-mode module to control theme

---
 app.vue        | 41 ++++++++++++++++++++++++++++++-----------
 nuxt.config.ts |  3 ++-
 package.json   |  1 +
 yarn.lock      |  9 +++++++++
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/app.vue b/app.vue
index 4be3889..c093fc7 100644
--- a/app.vue
+++ b/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-list-item
-              rounded="xl"
-              :prepend-icon="theme === 'light' ? 'dark_mode' : 'light_mode'"
-              :title="(theme === 'light' ? 'Dark' : 'Light') + ' mode'"
-              @click="toggleTheme"
-          ></v-list-item>
+          <v-menu
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                  v-bind="props"
+                  rounded="xl"
+                  :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>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c58d0b0..1ed7738 100644
--- a/nuxt.config.ts
+++ b/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']
 })
diff --git a/package.json b/package.json
index c8ccb51..dde124a 100644
--- a/package.json
+++ b/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"
   },
diff --git a/yarn.lock b/yarn.lock
index abf52fb..91d1b3a 100644
--- a/yarn.lock
+++ b/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"