use different color mode module

other one resulted in hydration mismatch

src/nuxt.config.ts

@@ -6,12 +6,12 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',
-    '@nuxtjs/color-mode',
+    '@eschricht/nuxt-color-mode'
   ],
   colorMode: {
     preference: 'system',
     fallback: 'light',
     classSuffix: '',
-    storageKey: 'theme',
+    cookieName: 'theme',
   },
 });

src/package.json

@@ -19,7 +19,7 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@nuxtjs/color-mode": "^3.4.2",
+    "@eschricht/nuxt-color-mode": "^1.1.5",
     "@nuxtjs/i18n": "^8.3.3",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@pinia/nuxt": "^0.5.3",

src/pages/index.vue

@@ -267,6 +267,10 @@ const globalStore = useGlobalStore();
 const clientsStore = useClientsStore();
 const modalStore = useModalStore();
 
+watchEffect(() => {
+  console.log(modalStore.clientDelete, modalStore.clientDelete ? true : false);
+});
+
 const intervalId = ref<NodeJS.Timeout | null>(null);
 
 onMounted(() => {