opentierboy-76 Refactor Themes (#78)

- Refactor themes to solely use next-themes
infinia-yzl · Aug 4, 2024 · e8d740e · e8d740e
1 parent bbd518c
commit e8d740e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -73,7 +73,7 @@
   }
 
   /* Ocean theme */
-  .theme-ocean {
+  .ocean-light {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
@@ -108,7 +108,7 @@
     --tier-gradient-6: linear-gradient(to right, #3C6E8F, #2E8B57); /* Deepest ocean */
   }
 
-  .dark.theme-ocean {
+  .ocean-dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
@@ -143,7 +143,7 @@
   }
 
   /* Forest theme */
-  .theme-forest {
+  .forest-light {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
@@ -178,7 +178,7 @@
     --tier-gradient-6: linear-gradient(to right, #fae8cc, #f5c29e);
   }
 
-  .dark.theme-forest {
+  .forest-dark {
     --background: 20 14.3% 4.1%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -141,6 +141,12 @@ export default function RootLayout({
     <ThemeProvider
       attribute="class"
       defaultTheme="system"
+      themes={[
+        'ocean-light', 'ocean-dark',
+        'forest-light', 'forest-dark',
+        'dark', 'light',
+        'system'
+      ]}
       enableSystem
       disableTransitionOnChange
     >

diff --git a/components/ThemeSelector.tsx b/components/ThemeSelector.tsx
@@ -10,19 +10,14 @@ const colorThemes = ['classic', 'ocean', 'forest'];
 
 export function ThemeSelector() {
   const [mounted, setMounted] = useState(false);
-  const {setTheme} = useTheme();
+  const {theme, setTheme} = useTheme();
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
   const handleThemeChange = (newTheme: string) => {
-    const [newColorTheme, newMode] = newTheme.split('-');
-    document.documentElement.classList.remove('theme-ocean', 'theme-forest');
-    if (newColorTheme !== 'classic') {
-      document.documentElement.classList.add(`theme-${newColorTheme}`);
-    }
-    setTheme(newMode);
+    setTheme(newTheme.replace('classic-', ''));
   };
 
   if (!mounted) {
@@ -43,7 +38,7 @@ export function ThemeSelector() {
         {colorThemes.map((colorTheme) => (
           <DropdownMenuItem key={colorTheme}
                             className="flex items-center justify-between p-2"
-                            onClick={() => handleThemeChange(colorTheme)}
+                            onClick={() => handleThemeChange(`${colorTheme}-${theme && theme.includes('dark') ? 'dark' : 'light'}`)}
           >
             <span className="flex-grow pl-2 text-sm">
               {colorTheme.charAt(0).toUpperCase() + colorTheme.slice(1)}