Skip to content

Commit 6562e37

Browse files
JamesEjembiJamesEjembi
authored
Merge pull request #33 from Jokay1997/solar-high-contrast-theme
feat: Solar high-contrast theme for outdoor laptop use (Closes #14)
2 parents e1863c8 + 3135c63 commit 6562e37

10 files changed

Lines changed: 509 additions & 59 deletions

File tree

‎.github/workflows/test.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ jobs:
1616
with:
1717
node-version: "22"
1818
- run: npm ci
19+
- run: node scripts/check-contrast.mjs
1920
- run: npm run build

‎app/globals.css‎

Lines changed: 151 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,166 @@
11
@import "tailwindcss";
22

33
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
4+
--color-bg: #f7f4ee;
5+
--color-text: #171512;
6+
--color-text-secondary: #6f5f48;
7+
--color-text-tertiary: #3e3830;
8+
--color-border: #d8d0c1;
9+
--color-border-light: #cfc4b1;
10+
--color-surface: #ffffff;
11+
--color-surface-alt: #faf8f3;
12+
--color-primary: #0f766e;
13+
--color-primary-hover: #115e59;
14+
--color-primary-text: #ffffff;
15+
--color-nav-bg: #171512;
16+
--color-nav-text: #ffffff;
17+
--color-nav-border: rgba(255, 255, 255, 0.15);
18+
--color-nav-surface: rgba(255, 255, 255, 0.08);
19+
--color-warning-text: #f3d28b;
20+
--color-progress-bg: #eadfce;
21+
--color-progress-fill: #0f766e;
22+
--color-tag-bg: #eef7f2;
23+
--color-tag-text: #0f766e;
24+
--color-danger: #9a3412;
25+
--color-danger-text: #9a3412;
26+
--color-warning: #d97706;
27+
--color-warning-fill: #d97706;
28+
--color-table-header-bg: #faf8f3;
29+
--color-table-divider: #ece5d8;
30+
--focus-ring-color: #0f766e;
31+
}
32+
33+
@media (prefers-color-scheme: dark) {
34+
:root {
35+
--color-bg: #0a0a0a;
36+
--color-text: #ededed;
37+
--color-text-secondary: #a3a3a3;
38+
--color-text-tertiary: #d4d4d4;
39+
--color-border: #262626;
40+
--color-border-light: #404040;
41+
--color-surface: #171717;
42+
--color-surface-alt: #1f1f1f;
43+
--color-primary: #2dd4bf;
44+
--color-primary-hover: #5eead4;
45+
--color-primary-text: #0a0a0a;
46+
--color-nav-bg: #0f0f0f;
47+
--color-nav-text: #ededed;
48+
--color-nav-border: rgba(255, 255, 255, 0.1);
49+
--color-nav-surface: rgba(255, 255, 255, 0.05);
50+
--color-warning-text: #fbbf24;
51+
--color-progress-bg: #262626;
52+
--color-progress-fill: #2dd4bf;
53+
--color-tag-bg: #134e4a;
54+
--color-tag-text: #2dd4bf;
55+
--color-danger: #fca5a5;
56+
--color-danger-text: #fca5a5;
57+
--color-warning: #fbbf24;
58+
--color-warning-fill: #fbbf24;
59+
--color-table-header-bg: #1a1a1a;
60+
--color-table-divider: #262626;
61+
--focus-ring-color: #2dd4bf;
62+
}
63+
}
64+
65+
.dark {
66+
--color-bg: #0a0a0a;
67+
--color-text: #ededed;
68+
--color-text-secondary: #a3a3a3;
69+
--color-text-tertiary: #d4d4d4;
70+
--color-border: #262626;
71+
--color-border-light: #404040;
72+
--color-surface: #171717;
73+
--color-surface-alt: #1f1f1f;
74+
--color-primary: #2dd4bf;
75+
--color-primary-hover: #5eead4;
76+
--color-primary-text: #0a0a0a;
77+
--color-nav-bg: #0f0f0f;
78+
--color-nav-text: #ededed;
79+
--color-nav-border: rgba(255, 255, 255, 0.1);
80+
--color-nav-surface: rgba(255, 255, 255, 0.05);
81+
--color-warning-text: #fbbf24;
82+
--color-progress-bg: #262626;
83+
--color-progress-fill: #2dd4bf;
84+
--color-tag-bg: #134e4a;
85+
--color-tag-text: #2dd4bf;
86+
--color-danger: #fca5a5;
87+
--color-danger-text: #fca5a5;
88+
--color-warning: #fbbf24;
89+
--color-warning-fill: #fbbf24;
90+
--color-table-header-bg: #1a1a1a;
91+
--color-table-divider: #262626;
92+
--focus-ring-color: #2dd4bf;
93+
}
94+
95+
.solar {
96+
--color-bg: #ffffff;
97+
--color-text: #000000;
98+
--color-text-secondary: #1a1a1a;
99+
--color-text-tertiary: #2a2a2a;
100+
--color-border: #666666;
101+
--color-border-light: #999999;
102+
--color-surface: #f5f5f5;
103+
--color-surface-alt: #ebebeb;
104+
--color-primary: #0020b3;
105+
--color-primary-hover: #001999;
106+
--color-primary-text: #ffffff;
107+
--color-nav-bg: #000000;
108+
--color-nav-text: #ffffff;
109+
--color-nav-border: rgba(255, 255, 255, 0.2);
110+
--color-nav-surface: rgba(255, 255, 255, 0.1);
111+
--color-warning-text: #000000;
112+
--color-progress-bg: #cccccc;
113+
--color-progress-fill: #0022cc;
114+
--color-tag-bg: #e0e8ff;
115+
--color-tag-text: #001999;
116+
--color-danger: #8b0000;
117+
--color-danger-text: #8b0000;
118+
--color-warning: #4a3a00;
119+
--color-warning-fill: #3a2e00;
120+
--color-table-header-bg: #e0e0e0;
121+
--color-table-divider: #cccccc;
122+
--focus-ring-color: #000000;
6123
}
7124

8125
@theme inline {
9-
--color-background: var(--background);
10-
--color-foreground: var(--foreground);
126+
--color-background: var(--color-bg);
127+
--color-foreground: var(--color-text);
128+
--color-muted: var(--color-text-secondary);
129+
--color-muted-text: var(--color-text-tertiary);
130+
--color-border: var(--color-border);
131+
--color-border-light: var(--color-border-light);
132+
--color-surface: var(--color-surface);
133+
--color-surface-alt: var(--color-surface-alt);
134+
--color-primary: var(--color-primary);
135+
--color-primary-hover: var(--color-primary-hover);
136+
--color-primary-text: var(--color-primary-text);
137+
--color-nav-bg: var(--color-nav-bg);
138+
--color-nav-text: var(--color-nav-text);
139+
--color-nav-border: var(--color-nav-border);
140+
--color-nav-surface: var(--color-nav-surface);
141+
--color-warning-text: var(--color-warning-text);
142+
--color-progress-bg: var(--color-progress-bg);
143+
--color-progress-fill: var(--color-progress-fill);
144+
--color-tag-bg: var(--color-tag-bg);
145+
--color-tag-text: var(--color-tag-text);
146+
--color-danger: var(--color-danger);
147+
--color-danger-text: var(--color-danger-text);
148+
--color-warning: var(--color-warning);
149+
--color-warning-fill: var(--color-warning-fill);
150+
--color-table-header-bg: var(--color-table-header-bg);
151+
--color-table-divider: var(--color-table-divider);
152+
--color-focus-ring: var(--focus-ring-color);
11153
--font-sans: var(--font-geist-sans);
12154
--font-mono: var(--font-geist-mono);
13155
}
14156

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
19-
}
157+
*:focus-visible {
158+
outline: 3px solid var(--focus-ring-color);
159+
outline-offset: 2px;
20160
}
21161

22162
body {
23-
background: var(--background);
24-
color: var(--foreground);
163+
background: var(--color-bg);
164+
color: var(--color-text);
25165
font-family: Arial, Helvetica, sans-serif;
26166
}

‎app/layout.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,15 @@ export default function RootLayout({
5353
}: Readonly<{
5454
children: React.ReactNode;
5555
}>) {
56+
const blockingScript = `
57+
(function(){try{var t=localStorage.getItem("lumina-theme");if(t==="solar"||t==="dark"){document.documentElement.classList.add(t)}}catch(e){}})();
58+
`;
59+
5660
return (
57-
<html lang="en">
61+
<html lang="en" suppressHydrationWarning>
62+
<head>
63+
<script dangerouslySetInnerHTML={{ __html: blockingScript }} />
64+
</head>
5865
<body
5966
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
6067
>

0 commit comments

Comments
 (0)