From 163eff6583d2e37b197c4a0394fae78ac2985661 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Fri, 29 Mar 2024 18:42:19 +0800
Subject: [PATCH] Update mode-toggle and package manager version

Added a function in 'mode-toggle.tsx' to set the theme as a cookie and changed the package manager version in 'package.json'. The theme selection by the user is now stored in a cookie for persistence across sessions, and an upgrade was made to the package manager for improved dependencies management.
---
 package.json                             |  2 +-
 packages/ui/src/makerkit/mode-toggle.tsx | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a8f47beb6..795e49b0f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "supabase:typegen": "pnpm --filter '@kit/supabase-config' typegen"
   },
   "prettier": "@kit/prettier-config",
-  "packageManager": "npm@10.2.3",
+  "packageManager": "pnpm@8.15.5",
   "workspaces": [
     "apps/*",
     "packages/*",
diff --git a/packages/ui/src/makerkit/mode-toggle.tsx b/packages/ui/src/makerkit/mode-toggle.tsx
index aff846893..fef95d680 100644
--- a/packages/ui/src/makerkit/mode-toggle.tsx
+++ b/packages/ui/src/makerkit/mode-toggle.tsx
@@ -30,6 +30,7 @@ export function ModeToggle() {
           key={mode}
           onClick={() => {
             setTheme(mode);
+            setCookeTheme(mode);
           }}
         >
           <Trans i18nKey={`common:${mode}Theme`} />
@@ -57,18 +58,19 @@ export function SubMenuModeToggle() {
 
   const MenuItems = useMemo(
     () =>
-      ['light', 'dark', 'system'].map((item) => {
+      ['light', 'dark', 'system'].map((mode) => {
         return (
           <DropdownMenuItem
             className={'justify-between'}
-            key={item}
+            key={mode}
             onClick={() => {
-              setTheme(item);
+              setTheme(mode);
+              setCookeTheme(mode);
             }}
           >
-            <Trans i18nKey={`common:${item}Theme`} />
+            <Trans i18nKey={`common:${mode}Theme`} />
 
-            <If condition={theme === item}>
+            <If condition={theme === mode}>
               <CheckCircle className={'mr-2 h-3'} />
             </If>
           </DropdownMenuItem>
@@ -97,3 +99,7 @@ export function SubMenuModeToggle() {
     </DropdownMenuSub>
   );
 }
+
+function setCookeTheme(theme: string) {
+  document.cookie = `theme=${theme}; path=/; max-age=31536000`;
+}