diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index a5ab926..7b1447e 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -118,28 +118,21 @@ export const useThemeManager = () => {
     return (defaultAppearance as Appearance) || THEME_DEFAULTS.appearance;
   });
 
-  const [color, setColor] = useState<Colors>(() => {
-    if (enableLocalStorage) {
-      const storedColor = localStorage.getItem("color");
-      const cleanedColor = storedColor
-        ? storedColor.replace(/^"|"$/g, "")
-        : null;
-      if (allowedColors.includes(cleanedColor as Colors)) {
-        return cleanedColor as Colors;
-      }
-    }
+  const [color, setColor] = useState<Colors>(
+    (defaultColor as Colors) || THEME_DEFAULTS.color
+  );
 
-    return (defaultColor as Colors) || THEME_DEFAULTS.color;
-  });
+  useEffect(() => {
+    setColor((defaultColor as Colors) || THEME_DEFAULTS.color);
+  }, [defaultColor]);
 
   const resolvedAppearance = useSystemTheme(appearance);
 
   useEffect(() => {
     if (enableLocalStorage) {
       localStorage.setItem("appearance", appearance);
-      localStorage.setItem("color", color);
     }
-  }, [appearance, color, enableLocalStorage]);
+  }, [appearance, enableLocalStorage]);
 
   return {
     appearance: resolvedAppearance,
@@ -149,7 +142,6 @@ export const useThemeManager = () => {
     setColor,
   };
 };
-
 export const useTheme = () => {
   const context = useContext(ThemeContext);
   if (context === undefined) {
diff --git a/src/main.tsx b/src/main.tsx
index dfd3af1..3e01dbd 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -92,9 +92,17 @@ export const AppContent = () => {
   );
 };
 
+const ThemedApp = () => {
+  const themeManager = useThemeManager();
+  return (
+    <ThemeProvider value={themeManager}>
+      <AppContent />
+    </ThemeProvider>
+  );
+};
+
 const App = () => {
   const { publicSettings, loading } = useNodeData();
-  const themeManager = useThemeManager();
 
   if (loading) {
     return <Loading />;
@@ -102,9 +110,7 @@ const App = () => {
 
   return (
     <ConfigProvider publicSettings={publicSettings}>
-      <ThemeProvider value={themeManager}>
-        <AppContent />
-      </ThemeProvider>
+      <ThemedApp />
     </ConfigProvider>
   );
 };