From cfbd8427f81b8ecdb45b2e9dae77c60fdc51d2fd Mon Sep 17 00:00:00 2001
From: Miguerfi <miguelpintojose00@gmail.com>
Date: Sat, 17 Aug 2024 18:38:48 -0300
Subject: [PATCH] feat(theme): theme crashing the aplication

---
 app/(app)/themes/themes.tsx | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/(app)/themes/themes.tsx b/app/(app)/themes/themes.tsx
index 4be0bdb1..196a77f3 100644
--- a/app/(app)/themes/themes.tsx
+++ b/app/(app)/themes/themes.tsx
@@ -15,34 +15,36 @@ export function Themes() {
   const [themeId, setThemeId] = React.useState<ThemeProps>("default")
   const themeContainerRef = React.useRef<HTMLDivElement>(null)
 
-  // Apply theme for current page
   const applyTheme = (theme: ThemeProps) => {
-    const themeVars = themesList[theme].root
-    const darkThemeVars = themesList[theme].dark
+    const themeVars = themesList[theme]?.root
+    const darkThemeVars = themesList[theme]?.dark
     localStorage.setItem("theme-id", theme)
     setThemeId(theme)
     const themeElement = themeContainerRef.current
     if (themeElement) {
       const themeVarsToApply = resolvedTheme === "dark" ? darkThemeVars : themeVars
-      Object.keys(themeVarsToApply).forEach((key) => {
-        themeElement.style.setProperty(key, themeVarsToApply[key])
-      })
+      if (themeVarsToApply) {
+        Object.keys(themeVarsToApply).forEach((key) => {
+          themeElement.style.setProperty(key, themeVarsToApply[key])
+        })
+      }
     }
   }
 
   // Apply theme for whole page
   // function applyTheme(theme: ThemeProps) {
-  //   const themeVars = themesList[theme].root
-  //   const darkThemeVars = themesList[theme].dark
-  //   localStorage.setItem('theme-id', theme)
-  //   setThemeId(theme)
-  //   const themeElement = document.documentElement
-  //   if (themeElement) {
-  //     const themeVarsToApply = resolvedTheme === 'dark' ? darkThemeVars : themeVars
-  //     Object.keys(themeVarsToApply).forEach((key) => {
-  //       themeElement.style.setProperty(key, themeVarsToApply[key])
-  //     })
-  //   }
+  // 	const themeVars = themesList[theme].root;
+  // 	const darkThemeVars = themesList[theme].dark;
+  // 	localStorage.setItem("theme-id", theme);
+  // 	setThemeId(theme);
+  // 	const themeElement = document.documentElement;
+  // 	if (themeElement) {
+  // 		const themeVarsToApply =
+  // 			resolvedTheme === "dark" ? darkThemeVars : themeVars;
+  // 		Object.keys(themeVarsToApply).forEach((key) => {
+  // 			themeElement.style.setProperty(key, themeVarsToApply[key]);
+  // 		});
+  // 	}
   // }
 
   React.useEffect(() => {