use color mode plugin

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) => {

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';
+};

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: '',
+  },
 });

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",

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

src/utils/localStorage.ts

@@ -1,7 +1,4 @@
-export type Theme = 'light' | 'dark' | 'auto';
-
 export type LocalStorage = {
-  theme: Theme;
   uiShowCharts: '1' | '0';
   lang: string;
 };