angel/mice
1
0
Fork 0
Code Issues Pull Requests 1 Actions Releases 3 Wiki Activity

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

Browse Source
This commit is contained in:
angel
2025-06-25 18:27:38 -05:00
parent 779ed06e35
commit 99bccf4444
6 changed files with 187 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/ThemeProvider.tsx
View File

@@ -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 && (savedTheme === 'blue' || savedTheme === 'violet')) {
setTheme(savedTheme);
if (savedTheme && validThemes.includes(savedTheme as Theme)) {
setTheme(savedTheme as Theme);
}
}, []);

146
app/globals.css
View File

@@ -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%;

11
app/layout.tsx
View File

@@ -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',
violet: '#0c0a2e'
blue: '#09090b',
violet: '#030712',
red: '#0a0a0a',
rose: '#0c0a09',
orange: '#0c0a09',
green: '#0c0a09',
yellow: '#0c0a09'
};
const metaThemeColor = document.createElement('meta');

5
app/settings/page.tsx
View File

@@ -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>

22
lib/theme-colors.ts
View File

@@ -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;

4
package.json
View File

@@ -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": {