feat: expand theme options and update theme handling in ThemeProvider and layout

app/components/ThemeProvider.tsx

@@ -2,7 +2,8 @@
 
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = 'blue' | 'violet';
+
+type Theme = 'blue' | 'violet' | 'red' | 'rose' | 'orange' | 'green' | 'yellow';
 
 interface ThemeContextType {
   theme: Theme;
@@ -30,11 +31,11 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   // Load theme settings from localStorage on component mount
   useEffect(() => {
     setMounted(true);
+    const savedTheme = localStorage.getItem('theme');
+    const validThemes: Theme[] = ['blue', 'violet', 'red', 'rose', 'orange', 'green', 'yellow'];
     
-    const savedTheme = localStorage.getItem('theme') as Theme | null;
+    if (savedTheme && validThemes.includes(savedTheme as Theme)) {
-    
+      setTheme(savedTheme as Theme);
-    if (savedTheme && (savedTheme === 'blue' || savedTheme === 'violet')) {
-      setTheme(savedTheme);
     }
   }, []);
 

app/globals.css

@@ -105,8 +105,152 @@ body {
     --radius: 0.5rem;
   }
 
- 
+ .theme-red.dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 72.2% 50.6%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  .theme-rose.dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 346.8 77.2% 49.8%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+  
+  .theme-orange.dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  .theme-green.dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  .theme-yellow.dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 47.9 95.8% 53.1%;
+    --primary-foreground: 26 83.3% 14.1%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 35.5 91.7% 32.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
+
+
+
+
+
+
+
+
+
+
+/* BackUp */
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;

app/layout.tsx

@@ -57,7 +57,7 @@ export default function Layout({ children }: LayoutProps) {
             __html: `
               (function() {
                 const savedTheme = localStorage.getItem('theme');
-                const theme = (savedTheme === 'blue' || savedTheme === 'violet') ? savedTheme : 'blue';
+                const theme = (savedTheme === 'blue' || savedTheme === 'violet' || savedTheme === 'red' || savedTheme === 'rose' || savedTheme === 'orange' || savedTheme === 'green' || savedTheme === 'yellow') ? savedTheme : 'blue';
                 
                 // Apply theme class
                 document.documentElement.classList.add('theme-' + theme);
@@ -69,8 +69,13 @@ export default function Layout({ children }: LayoutProps) {
                 
                 // Set initial theme color based on theme
                 const themeColors = {
-                  blue: '#0f0f23',
+                  blue: '#09090b',
-                  violet: '#0c0a2e'
+                  violet: '#030712',
+                  red: '#0a0a0a',
+                  rose: '#0c0a09',
+                  orange: '#0c0a09',
+                  green: '#0c0a09',
+                  yellow: '#0c0a09'
                 };
                 
                 const metaThemeColor = document.createElement('meta');

app/settings/page.tsx

@@ -293,6 +293,11 @@ const SettingsPage = () => {
                                 <SelectContent>
                                     <SelectItem value="blue">Blue</SelectItem>
                                     <SelectItem value="violet">Violet</SelectItem>
+                                    <SelectItem value="red">Red</SelectItem>
+                                    <SelectItem value="rose">Rose</SelectItem>
+                                    <SelectItem value="orange">Orange</SelectItem>
+                                    <SelectItem value="green">Green</SelectItem>
+                                    <SelectItem value="yellow">Yellow</SelectItem>
                                 </SelectContent>
                             </Select>
                         </div>

lib/theme-colors.ts

@@ -8,7 +8,27 @@ export const themeColors = {
   violet: {
     background: 'hsl(224, 71.4%, 4.1%)', // Dark violet background  
     hex: '#030712' // Hex equivalent for theme-color
-  }
+  },
+  red: {
+    background: 'hsl(0, 0%, 3.9%)', // Dark red background
+    hex: '#0a0a0a' // Hex equivalent for theme-color
+  },
+  rose: {
+    background: 'hsl(20, 14.3%, 4.1%)', // Dark rose background
+    hex: '#0c0a09' // Hex equivalent for theme-color
+  },
+  orange: {
+    background: 'hsl(20, 14.3%, 4.1%)', // Dark orange background
+    hex: '#0c0a09' // Hex equivalent for theme-color
+  },
+  green: {
+    background: 'hsl(20, 14.3%, 4.1%)', // Dark green background
+    hex: '#0c0a09' // Hex equivalent for theme-color
+  },
+  yellow: {
+    background: 'hsl(20, 14.3%, 4.1%)', // Dark yellow background
+    hex: '#0c0a09' // Hex equivalent for theme-color
+  },
 } as const;
 
 export type Theme = keyof typeof themeColors;

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 40625",
+    "dev": "next dev -p 40624",
     "build": "next build",
-    "start": "next start -p 40625",
+    "start": "next start -p 40624",
     "lint": "next lint"
   },
   "dependencies": {