From 0ee7baa4f7844d261e07c2b7d95d64fe8f2efd27 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Wed, 7 Aug 2024 13:28:31 +0200
Subject: [PATCH] use color mode plugin

---
 src/app.vue                     | 47 +++++++++------------------------
 src/composables/useColorMode.ts |  6 +++++
 src/nuxt.config.ts              | 12 ++++++++-
 src/package.json                |  1 +
 src/pnpm-lock.yaml              | 20 ++++++++++++++
 src/utils/localStorage.ts       |  3 ---
 6 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 src/composables/useColorMode.ts

diff --git a/src/app.vue b/src/app.vue
index b1f0a1f3..4cd64b8e 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -19,11 +19,11 @@
           <!-- Dark / light theme -->
           <button
             class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition"
-            :title="$t(`theme.${uiTheme}`)"
+            :title="$t(`theme.${theme.preference}`)"
             @click="toggleTheme"
           >
             <svg
-              v-if="uiTheme === 'light'"
+              v-if="theme.preference === 'light'"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -38,7 +38,7 @@
               />
             </svg>
             <svg
-              v-else-if="uiTheme === 'dark'"
+              v-else-if="theme.preference === 'dark'"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -1232,17 +1232,8 @@ const uiTrafficStats = ref(false);
 
 const uiChartType = ref(0);
 const uiShowCharts = ref(getItem('uiShowCharts') === '1');
-const uiTheme = ref<Theme>(getItem('theme') || 'auto');
-const prefersDarkScheme = import.meta.client
-  ? window.matchMedia('(prefers-color-scheme: dark)')
-  : null;
-
-const theme = computed(() => {
-  if (uiTheme.value === 'auto') {
-    return prefersDarkScheme?.matches ? 'dark' : 'light';
-  }
-  return uiTheme.value as 'dark' | 'light';
-});
+
+const theme = useTheme();
 
 const chartOptions = {
   chart: {
@@ -1526,24 +1517,15 @@ function restoreConfig(e) {
 }
 
 function toggleTheme() {
-  const themes = ['light', 'dark', 'auto'] as Theme[];
-  const currentIndex = themes.indexOf(uiTheme.value);
-  const newIndex = (currentIndex + 1) % themes.length;
-  uiTheme.value = themes[newIndex];
-  setItem('theme', uiTheme.value);
-  setTheme(uiTheme.value);
-}
-function setTheme(theme: Theme) {
-  const { classList } = document.documentElement;
-  const shouldAddDarkClass =
-    theme === 'dark' || (theme === 'auto' && prefersDarkScheme?.matches);
-  classList.toggle('dark', shouldAddDarkClass);
-}
-function handlePrefersChange(e: MediaQueryListEventMap['change']) {
-  if (getItem('theme') === 'auto') {
-    setTheme(e.matches ? 'dark' : 'light');
-  }
+  const themeCycle = {
+    system: 'light',
+    light: 'dark',
+    dark: 'system',
+  } as const;
+
+  theme.preference = themeCycle[theme.preference];
 }
+
 function toggleCharts() {
   setItem('uiShowCharts', uiShowCharts.value ? '1' : '0');
 }
@@ -1551,9 +1533,6 @@ function toggleCharts() {
 const { availableLocales, locale } = useI18n();
 
 onMounted(() => {
-  prefersDarkScheme?.addEventListener('change', handlePrefersChange);
-  setTheme(uiTheme.value);
-
   api
     .getSession()
     .then((session) => {
diff --git a/src/composables/useColorMode.ts b/src/composables/useColorMode.ts
new file mode 100644
index 00000000..3b467b35
--- /dev/null
+++ b/src/composables/useColorMode.ts
@@ -0,0 +1,6 @@
+export const useTheme = useColorMode as () => ThemeInstance;
+
+type ThemeInstance = ReturnType<typeof useColorMode> & {
+  preference: 'system' | 'dark' | 'light';
+  value: 'dark' | 'light';
+};
diff --git a/src/nuxt.config.ts b/src/nuxt.config.ts
index 3138f3c6..711d272b 100644
--- a/src/nuxt.config.ts
+++ b/src/nuxt.config.ts
@@ -2,5 +2,15 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
-  modules: ['@nuxtjs/i18n', '@nuxtjs/tailwindcss', '@pinia/nuxt'],
+  modules: [
+    '@nuxtjs/i18n',
+    '@nuxtjs/tailwindcss',
+    '@pinia/nuxt',
+    '@nuxtjs/color-mode',
+  ],
+  colorMode: {
+    preference: 'system',
+    fallback: 'light',
+    classSuffix: '',
+  },
 });
diff --git a/src/package.json b/src/package.json
index 24f44cb2..064b4bb5 100644
--- a/src/package.json
+++ b/src/package.json
@@ -19,6 +19,7 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
+    "@nuxtjs/color-mode": "^3.4.2",
     "@nuxtjs/i18n": "^8.3.3",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@pinia/nuxt": "^0.5.3",
diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml
index b03688dc..95698ce4 100644
--- a/src/pnpm-lock.yaml
+++ b/src/pnpm-lock.yaml
@@ -7,6 +7,9 @@ settings:
 importers:
   .:
     dependencies:
+      '@nuxtjs/color-mode':
+        specifier: ^3.4.2
+        version: 3.4.2(magicast@0.3.4)(rollup@4.19.2)
       '@nuxtjs/i18n':
         specifier: ^8.3.3
         version: 8.3.3(magicast@0.3.4)(rollup@4.19.2)(vue@3.4.35(typescript@5.5.4))
@@ -1359,6 +1362,12 @@ packages:
     peerDependencies:
       vue: ^3.3.4
 
+  '@nuxtjs/color-mode@3.4.2':
+    resolution:
+      {
+        integrity: sha512-6A+lDP8R6fFXc1Ip5tDepKq9MJW6oxbRlz1plvW52yacnpeDFXv5S5rDS0ax31AuSFUPlgzHymFSdjcylBwZ6w==,
+      }
+
   '@nuxtjs/i18n@8.3.3':
     resolution:
       {
@@ -8328,6 +8337,17 @@ snapshots:
       - vti
       - vue-tsc
 
+  '@nuxtjs/color-mode@3.4.2(magicast@0.3.4)(rollup@4.19.2)':
+    dependencies:
+      '@nuxt/kit': 3.12.4(magicast@0.3.4)(rollup@4.19.2)
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
   '@nuxtjs/i18n@8.3.3(magicast@0.3.4)(rollup@4.19.2)(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@intlify/h3': 0.5.0
diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts
index 9766c520..bd1c498d 100644
--- a/src/utils/localStorage.ts
+++ b/src/utils/localStorage.ts
@@ -1,7 +1,4 @@
-export type Theme = 'light' | 'dark' | 'auto';
-
 export type LocalStorage = {
-  theme: Theme;
   uiShowCharts: '1' | '0';
   lang: string;
 };