Skip to content

Commit 11547da

Browse files
devnucklesdevnuckles
committed
Fix theme switching issue
1 parent a4add8d commit 11547da

File tree

3 files changed

+258
-271
lines changed

3 files changed

+258
-271
lines changed

‎src/app/globals.css‎

Lines changed: 77 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,6 @@
1616
--color-old-grey: #6b6b6b;
1717
--color-old-border: #d4d4d4;
1818

19-
/* Theme Color Utilities */
20-
--color-background: hsl(var(--background));
21-
--color-foreground: hsl(var(--foreground));
22-
--color-card: hsl(var(--card));
23-
--color-card-foreground: hsl(var(--card-foreground));
24-
--color-primary: hsl(var(--primary));
25-
--color-primary-foreground: hsl(var(--primary-foreground));
26-
--color-secondary: hsl(var(--secondary));
27-
--color-secondary-foreground: hsl(var(--secondary-foreground));
28-
--color-muted: hsl(var(--muted));
29-
--color-muted-foreground: hsl(var(--muted-foreground));
30-
--color-accent: hsl(var(--accent));
31-
--color-accent-foreground: hsl(var(--accent-foreground));
32-
--color-destructive: hsl(var(--destructive));
33-
--color-destructive-foreground: hsl(var(--destructive-foreground));
34-
--color-border: hsl(var(--border));
35-
--color-input: hsl(var(--input));
36-
--color-ring: hsl(var(--ring));
37-
3819
/* Font Families */
3920
--font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4021
--font-family-serif: Georgia, Cambria, 'Times New Roman', serif;
@@ -57,31 +38,31 @@
5738
/* Default Theme (Project Lighthouse inspired) */
5839
:root,
5940
[data-theme="default"] {
60-
/* Colors */
61-
--background: 0 0% 100%; /* #FFFFFF */
62-
--foreground: 0 0% 3.9%; /* #0A0A0A */
63-
--card: 0 0% 100%; /* #FFFFFF */
64-
--card-foreground: 0 0% 3.9%; /* #0A0A0A */
65-
--primary: 0 0% 9%; /* #171717 */
66-
--primary-foreground: 0 0% 98%; /* #FAFAFA */
67-
--secondary: 0 0% 92.1%; /* #EBEBEB */
68-
--secondary-foreground: 0 0% 9%; /* #171717 */
69-
--muted: 0 0% 96.1%; /* #F5F5F5 */
70-
--muted-foreground: 0 0% 45.1%; /* #737373 */
71-
--accent: 0 0% 96.1%; /* #F5F5F5 */
72-
--accent-foreground: 0 0% 9%; /* #171717 */
73-
--destructive: 0 84.2% 60.2%; /* #EF4444 */
74-
--destructive-foreground: 0 0% 98%; /* #FAFAFA */
75-
--border: 0 0% 92.8%; /* #EDEDED */
76-
--input: 0 0% 89.8%; /* #E5E5E5 */
77-
--ring: 0 0% 3.9%; /* #0A0A0A */
41+
/* Colors - using hex codes */
42+
--background: #FFFFFF;
43+
--foreground: #0A0A0A;
44+
--card: #FFFFFF;
45+
--card-foreground: #0A0A0A;
46+
--primary: #171717;
47+
--primary-foreground: #FAFAFA;
48+
--secondary: #EBEBEB;
49+
--secondary-foreground: #171717;
50+
--muted: #F5F5F5;
51+
--muted-foreground: #737373;
52+
--accent: #F5F5F5;
53+
--accent-foreground: #171717;
54+
--destructive: #EF4444;
55+
--destructive-foreground: #FAFAFA;
56+
--border: #EDEDED;
57+
--input: #E5E5E5;
58+
--ring: #0A0A0A;
7859

7960
/* Chart colors */
80-
--chart-1: 12 76% 61%; /* #E97451 */
81-
--chart-2: 173 58% 39%; /* #2A9D8F */
82-
--chart-3: 197 37% 24%; /* #264653 */
83-
--chart-4: 43 74% 66%; /* #E9C46A */
84-
--chart-5: 27 87% 67%; /* #F4A261 */
61+
--chart-1: #E97451;
62+
--chart-2: #2A9D8F;
63+
--chart-3: #264653;
64+
--chart-4: #E9C46A;
65+
--chart-5: #F4A261;
8566

8667
/* Pencil effect colors */
8768
--pencil-dark: #1b1b18;
@@ -90,31 +71,31 @@
9071

9172
/* Dark Theme */
9273
[data-theme="dark"] {
93-
/* Colors */
94-
--background: 0 0% 7%; /* #121212 */
95-
--foreground: 0 0% 98%; /* #FAFAFA */
96-
--card: 0 0% 10%; /* #1A1A1A */
97-
--card-foreground: 0 0% 98%; /* #FAFAFA */
98-
--primary: 0 0% 98%; /* #FAFAFA */
99-
--primary-foreground: 0 0% 9%; /* #171717 */
100-
--secondary: 0 0% 15%; /* #262626 */
101-
--secondary-foreground: 0 0% 98%; /* #FAFAFA */
102-
--muted: 0 0% 15%; /* #262626 */
103-
--muted-foreground: 0 0% 60%; /* #999999 */
104-
--accent: 0 0% 15%; /* #262626 */
105-
--accent-foreground: 0 0% 98%; /* #FAFAFA */
106-
--destructive: 0 62.8% 50.6%; /* #DC2626 */
107-
--destructive-foreground: 0 0% 98%; /* #FAFAFA */
108-
--border: 0 0% 20%; /* #333333 */
109-
--input: 0 0% 20%; /* #333333 */
110-
--ring: 0 0% 83.1%; /* #D4D4D4 */
111-
112-
/* Chart colors (slightly desaturated for dark mode) */
113-
--chart-1: 12 70% 55%;
114-
--chart-2: 173 50% 35%;
115-
--chart-3: 197 35% 22%;
116-
--chart-4: 43 70% 60%;
117-
--chart-5: 27 80% 60%;
74+
/* Colors - using hex codes */
75+
--background: #121212;
76+
--foreground: #FAFAFA;
77+
--card: #1A1A1A;
78+
--card-foreground: #FAFAFA;
79+
--primary: #FAFAFA;
80+
--primary-foreground: #171717;
81+
--secondary: #262626;
82+
--secondary-foreground: #FAFAFA;
83+
--muted: #262626;
84+
--muted-foreground: #999999;
85+
--accent: #262626;
86+
--accent-foreground: #FAFAFA;
87+
--destructive: #DC2626;
88+
--destructive-foreground: #FAFAFA;
89+
--border: #333333;
90+
--input: #333333;
91+
--ring: #D4D4D4;
92+
93+
/* Chart colors */
94+
--chart-1: #D66B4A;
95+
--chart-2: #258A7D;
96+
--chart-3: #1F3A45;
97+
--chart-4: #D9B85F;
98+
--chart-5: #E89A56;
11899

119100
/* Pencil effect colors (lighter for dark mode) */
120101
--pencil-dark: #e8e8e8;
@@ -123,31 +104,31 @@
123104

124105
/* Reading-Friendly Theme */
125106
[data-theme="reading"] {
126-
/* Colors - warm sepia tones */
127-
--background: 42 25% 95%; /* #F4F1EA */
128-
--foreground: 30 10% 20%; /* #3D3530 */
129-
--card: 42 30% 98%; /* #FAF8F5 */
130-
--card-foreground: 30 10% 20%; /* #3D3530 */
131-
--primary: 30 15% 25%; /* #4A4139 */
132-
--primary-foreground: 42 30% 98%; /* #FAF8F5 */
133-
--secondary: 42 20% 88%; /* #E8E3D8 */
134-
--secondary-foreground: 30 10% 20%; /* #3D3530 */
135-
--muted: 42 20% 90%; /* #EBE7DD */
136-
--muted-foreground: 30 8% 45%; /* #6B6560 */
137-
--accent: 42 20% 88%; /* #E8E3D8 */
138-
--accent-foreground: 30 10% 20%; /* #3D3530 */
139-
--destructive: 0 70% 55%; /* #E85D5D */
140-
--destructive-foreground: 42 30% 98%; /* #FAF8F5 */
141-
--border: 42 15% 82%; /* #D4CFC4 */
142-
--input: 42 15% 85%; /* #DCD8CE */
143-
--ring: 30 10% 20%; /* #3D3530 */
144-
145-
/* Chart colors (warm tones) */
146-
--chart-1: 25 75% 60%;
147-
--chart-2: 160 45% 40%;
148-
--chart-3: 200 35% 30%;
149-
--chart-4: 45 70% 65%;
150-
--chart-5: 30 80% 65%;
107+
/* Colors - warm sepia tones using hex codes */
108+
--background: #F4F1EA;
109+
--foreground: #3D3530;
110+
--card: #FAF8F5;
111+
--card-foreground: #3D3530;
112+
--primary: #4A4139;
113+
--primary-foreground: #FAF8F5;
114+
--secondary: #E8E3D8;
115+
--secondary-foreground: #3D3530;
116+
--muted: #EBE7DD;
117+
--muted-foreground: #6B6560;
118+
--accent: #E8E3D8;
119+
--accent-foreground: #3D3530;
120+
--destructive: #E85D5D;
121+
--destructive-foreground: #FAF8F5;
122+
--border: #D4CFC4;
123+
--input: #DCD8CE;
124+
--ring: #3D3530;
125+
126+
/* Chart colors */
127+
--chart-1: #D9845F;
128+
--chart-2: #5A9D8F;
129+
--chart-3: #3D5A6B;
130+
--chart-4: #E0C46F;
131+
--chart-5: #E89D66;
151132

152133
/* Pencil effect colors */
153134
--pencil-dark: #5a5a52;
@@ -160,12 +141,13 @@
160141

161142
@layer base {
162143
* {
163-
border-color: hsl(var(--border));
164-
@apply border-border outline-ring/50;
144+
border-color: var(--border);
165145
}
166146

167147
body {
168-
@apply font-serif antialiased bg-background text-foreground;
148+
@apply font-serif antialiased;
149+
background-color: var(--background);
150+
color: var(--foreground);
169151
font-feature-settings: "rlig" 1, "calt" 1;
170152
transition: background-color 200ms ease-out, color 200ms ease-out;
171153
background-image:
@@ -365,112 +347,3 @@
365347
}
366348
}
367349

368-
@theme inline {
369-
--radius-sm: calc(var(--radius) - 4px);
370-
--radius-md: calc(var(--radius) - 2px);
371-
--radius-lg: var(--radius);
372-
--radius-xl: calc(var(--radius) + 4px);
373-
--radius-2xl: calc(var(--radius) + 8px);
374-
--radius-3xl: calc(var(--radius) + 12px);
375-
--radius-4xl: calc(var(--radius) + 16px);
376-
--color-background: var(--background);
377-
--color-foreground: var(--foreground);
378-
--color-card: var(--card);
379-
--color-card-foreground: var(--card-foreground);
380-
--color-popover: var(--popover);
381-
--color-popover-foreground: var(--popover-foreground);
382-
--color-primary: var(--primary);
383-
--color-primary-foreground: var(--primary-foreground);
384-
--color-secondary: var(--secondary);
385-
--color-secondary-foreground: var(--secondary-foreground);
386-
--color-muted: var(--muted);
387-
--color-muted-foreground: var(--muted-foreground);
388-
--color-accent: var(--accent);
389-
--color-accent-foreground: var(--accent-foreground);
390-
--color-destructive: var(--destructive);
391-
--color-border: var(--border);
392-
--color-input: var(--input);
393-
--color-ring: var(--ring);
394-
--color-chart-1: var(--chart-1);
395-
--color-chart-2: var(--chart-2);
396-
--color-chart-3: var(--chart-3);
397-
--color-chart-4: var(--chart-4);
398-
--color-chart-5: var(--chart-5);
399-
--color-sidebar: var(--sidebar);
400-
--color-sidebar-foreground: var(--sidebar-foreground);
401-
--color-sidebar-primary: var(--sidebar-primary);
402-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
403-
--color-sidebar-accent: var(--sidebar-accent);
404-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
405-
--color-sidebar-border: var(--sidebar-border);
406-
--color-sidebar-ring: var(--sidebar-ring);
407-
}
408-
409-
:root {
410-
--radius: 0.625rem;
411-
--background: oklch(1 0 0);
412-
--foreground: oklch(0.145 0 0);
413-
--card: oklch(1 0 0);
414-
--card-foreground: oklch(0.145 0 0);
415-
--popover: oklch(1 0 0);
416-
--popover-foreground: oklch(0.145 0 0);
417-
--primary: oklch(0.205 0 0);
418-
--primary-foreground: oklch(0.985 0 0);
419-
--secondary: oklch(0.97 0 0);
420-
--secondary-foreground: oklch(0.205 0 0);
421-
--muted: oklch(0.97 0 0);
422-
--muted-foreground: oklch(0.556 0 0);
423-
--accent: oklch(0.97 0 0);
424-
--accent-foreground: oklch(0.205 0 0);
425-
--destructive: oklch(0.577 0.245 27.325);
426-
--border: oklch(0.922 0 0);
427-
--input: oklch(0.922 0 0);
428-
--ring: oklch(0.708 0 0);
429-
--chart-1: oklch(0.646 0.222 41.116);
430-
--chart-2: oklch(0.6 0.118 184.704);
431-
--chart-3: oklch(0.398 0.07 227.392);
432-
--chart-4: oklch(0.828 0.189 84.429);
433-
--chart-5: oklch(0.769 0.188 70.08);
434-
--sidebar: oklch(0.985 0 0);
435-
--sidebar-foreground: oklch(0.145 0 0);
436-
--sidebar-primary: oklch(0.205 0 0);
437-
--sidebar-primary-foreground: oklch(0.985 0 0);
438-
--sidebar-accent: oklch(0.97 0 0);
439-
--sidebar-accent-foreground: oklch(0.205 0 0);
440-
--sidebar-border: oklch(0.922 0 0);
441-
--sidebar-ring: oklch(0.708 0 0);
442-
}
443-
444-
.dark {
445-
--background: oklch(0.145 0 0);
446-
--foreground: oklch(0.985 0 0);
447-
--card: oklch(0.205 0 0);
448-
--card-foreground: oklch(0.985 0 0);
449-
--popover: oklch(0.205 0 0);
450-
--popover-foreground: oklch(0.985 0 0);
451-
--primary: oklch(0.922 0 0);
452-
--primary-foreground: oklch(0.205 0 0);
453-
--secondary: oklch(0.269 0 0);
454-
--secondary-foreground: oklch(0.985 0 0);
455-
--muted: oklch(0.269 0 0);
456-
--muted-foreground: oklch(0.708 0 0);
457-
--accent: oklch(0.269 0 0);
458-
--accent-foreground: oklch(0.985 0 0);
459-
--destructive: oklch(0.704 0.191 22.216);
460-
--border: oklch(1 0 0 / 10%);
461-
--input: oklch(1 0 0 / 15%);
462-
--ring: oklch(0.556 0 0);
463-
--chart-1: oklch(0.488 0.243 264.376);
464-
--chart-2: oklch(0.696 0.17 162.48);
465-
--chart-3: oklch(0.769 0.188 70.08);
466-
--chart-4: oklch(0.627 0.265 303.9);
467-
--chart-5: oklch(0.645 0.246 16.439);
468-
--sidebar: oklch(0.205 0 0);
469-
--sidebar-foreground: oklch(0.985 0 0);
470-
--sidebar-primary: oklch(0.488 0.243 264.376);
471-
--sidebar-primary-foreground: oklch(0.985 0 0);
472-
--sidebar-accent: oklch(0.269 0 0);
473-
--sidebar-accent-foreground: oklch(0.985 0 0);
474-
--sidebar-border: oklch(1 0 0 / 10%);
475-
--sidebar-ring: oklch(0.556 0 0);
476-
}

0 commit comments

Comments
 (0)