From dce000ebc543a2a1870b2926612e494a96c45279 Mon Sep 17 00:00:00 2001
From: Aditya Bijalwan <abijalwan586@gmail.com>
Date: Sat, 18 Oct 2025 14:42:23 +0530
Subject: [PATCH 1/4] bug:DOMTokenList error

---
 src/app/layout.tsx                     |  2 +-
 src/components/ui/ThemeColorPicker.tsx | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 352bd52..afae290 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {/* ✅ Wrap everything in ThemeProvider */}
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem storageKey="devui-theme">
           <ThemeColorPicker />
           {children}
           <Toaster position="top-center" richColors />
diff --git a/src/components/ui/ThemeColorPicker.tsx b/src/components/ui/ThemeColorPicker.tsx
index c4017be..1a74ca1 100644
--- a/src/components/ui/ThemeColorPicker.tsx
+++ b/src/components/ui/ThemeColorPicker.tsx
@@ -27,13 +27,29 @@ const ThemeColorPicker = () => {
   // Load saved theme from localStorage on mount
   useEffect(() => {
     setMounted(true);
+    
+    // Clean up any invalid theme names from next-themes localStorage
+    const nextThemesKey = 'devui-theme';
+    const nextThemesValue = localStorage.getItem(nextThemesKey);
+    if (nextThemesValue && nextThemesValue.includes(' ')) {
+      localStorage.removeItem(nextThemesKey);
+    }
+    
     const savedThemeName = localStorage.getItem(STORAGE_KEY);
-    const savedTheme = themes.find((t) => t.name === savedThemeName);
+    
+    // Validate theme name - remove any invalid characters
+    const cleanThemeName = savedThemeName?.replace(/[^a-zA-Z0-9-_]/g, '');
+    const savedTheme = themes.find((t) => t.name === cleanThemeName);
 
     if (savedTheme) {
       // If a theme was saved, apply it
       handleThemeChange(savedTheme, false); // Pass false to prevent re-saving
     } else {
+      // Clean up invalid theme names from localStorage
+      if (savedThemeName && savedThemeName !== cleanThemeName) {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+      
       // Otherwise, get the default color from CSS
       const currentColor = getComputedStyle(document.body)
         .getPropertyValue("--primary")

From 2484e4eb82a787357121b277ba3a9741511f8608 Mon Sep 17 00:00:00 2001
From: Aditya Bijalwan <abijalwan586@gmail.com>
Date: Sat, 18 Oct 2025 22:20:52 +0530
Subject: [PATCH 2/4] Resolve merge conflict: combine Header component with
 theme features

---
 src/app/layout.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index afae290..f07d5bd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import "./globals.css";
 import ThemeColorPicker from "@/components/ui/ThemeColorPicker";
 import { ThemeProvider } from "next-themes"; // ⬅️ import
 import { Toaster } from "@/components/ui/sonner";
+import Header from "@/components/Header";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -35,6 +36,7 @@ export default function RootLayout({
       >
         {/* ✅ Wrap everything in ThemeProvider */}
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem storageKey="devui-theme">
+          <Header />
           <ThemeColorPicker />
           {children}
           <Toaster position="top-center" richColors />

From c8cb903e60b8a10aa68f3c30ab3aa70769a10a06 Mon Sep 17 00:00:00 2001
From: Aditya Bijalwan <abijalwan586@gmail.com>
Date: Sat, 18 Oct 2025 22:32:20 +0530
Subject: [PATCH 3/4] removed addition header

---
 src/app/layout.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f07d5bd..afae290 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,7 +6,6 @@ import "./globals.css";
 import ThemeColorPicker from "@/components/ui/ThemeColorPicker";
 import { ThemeProvider } from "next-themes"; // ⬅️ import
 import { Toaster } from "@/components/ui/sonner";
-import Header from "@/components/Header";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -36,7 +35,6 @@ export default function RootLayout({
       >
         {/* ✅ Wrap everything in ThemeProvider */}
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem storageKey="devui-theme">
-          <Header />
           <ThemeColorPicker />
           {children}
           <Toaster position="top-center" richColors />

From 7bb6d3a42fe84af0f01e17ca08f164d7704b26ad Mon Sep 17 00:00:00 2001
From: Aditya Bijalwan <abijalwan586@gmail.com>
Date: Sat, 18 Oct 2025 22:37:55 +0530
Subject: [PATCH 4/4] fix:parsing error

---
 src/app/layout.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 62166c6..3c113b3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -37,15 +37,9 @@ export default function RootLayout({
       >
         {/* ✅ Wrap everything in ThemeProvider */}
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem storageKey="devui-theme">
-          <ThemeColorPicker />
-          {children}
-          <Toaster position="top-center" richColors />
-          <BackToTopButton />
-        {/*  Wrap everything in ThemeProvider */}
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
           <SearchProvider>
-            <ThemeColorPicker />
             <Header />
+            <ThemeColorPicker />
             {children}
             <Toaster position="top-center" richColors />
             <BackToTopButton />