Skip to content

Commit d413054

Browse files
makelinuxmakelinux
committed
feat: add light mode support with theme toggle
- Add theme toggle in settings (Light/Dark/System) - Preserve dark mode colors - Implement CSS variables for dynamic theming in sidepanel and settings - Store theme preference in Chrome storage - Replace hardcoded colors with theme-aware variables - Update icon.png with transparent background (replacing black background)
1 parent bec32fe commit d413054

File tree

9 files changed

+270
-178
lines changed

9 files changed

+270
-178
lines changed

‎icons/icon.png‎

15.8 KB
Loading

‎settings.css‎

Lines changed: 56 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@
55
}
66

77
body {
8-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
8+
font-family:
9+
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
10+
Arial, sans-serif;
911
-webkit-font-smoothing: antialiased;
1012
-moz-osx-font-smoothing: grayscale;
11-
background: #f7f7f8;
12-
color: #343541;
13+
background: var(--bg-primary);
14+
color: var(--text-primary);
15+
transition:
16+
background-color 0.2s ease,
17+
color 0.2s ease;
1318
}
1419

1520
.settings-container {
@@ -28,21 +33,21 @@ body {
2833
.settings-header h1 {
2934
font-size: 28px;
3035
font-weight: 600;
31-
color: #343541;
36+
color: var(--text-primary);
3237
margin-bottom: 8px;
3338
}
3439

3540
.settings-header p {
36-
color: #8e8ea0;
41+
color: var(--text-secondary);
3742
font-size: 14px;
3843
}
3944

4045
.settings-content {
41-
background: #ffffff;
46+
background: var(--bg-primary);
4247
border-radius: 12px;
4348
padding: 32px;
4449
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
45-
border: 1px solid #e5e7eb;
50+
border: 1px solid var(--border-primary);
4651
}
4752

4853
.setting-group {
@@ -57,7 +62,7 @@ body {
5762
display: block;
5863
font-weight: 500;
5964
margin-bottom: 10px;
60-
color: #343541;
65+
color: var(--text-primary);
6166
font-size: 14px;
6267
}
6368

@@ -69,49 +74,49 @@ body {
6974

7075
.provider-button {
7176
padding: 14px 12px;
72-
border: 1.5px solid #d9d9e3;
77+
border: 1.5px solid var(--border-secondary);
7378
border-radius: 8px;
74-
background: #ffffff;
79+
background: var(--bg-primary);
7580
cursor: pointer;
7681
font-size: 14px;
7782
font-weight: 500;
7883
transition: all 0.15s ease;
79-
color: #343541;
84+
color: var(--text-primary);
8085
text-align: center;
8186
}
8287

8388
.provider-button:hover {
84-
border-color: #2563eb;
85-
background: #f7f7f8;
89+
border-color: var(--accent-color);
90+
background: var(--bg-secondary);
8691
}
8792

8893
.provider-button.active {
89-
border-color: #2563eb;
90-
background: #2563eb;
91-
color: white;
94+
border-color: var(--accent-color);
95+
background: var(--accent-color);
96+
color: #ffffff;
9297
}
9398

9499
.model-select {
95100
width: 100%;
96101
padding: 12px 14px;
97-
border: 1.5px solid #d9d9e3;
102+
border: 1.5px solid var(--border-secondary);
98103
border-radius: 8px;
99104
font-size: 14px;
100-
background: #ffffff;
105+
background: var(--bg-primary);
101106
cursor: pointer;
102107
transition: all 0.15s ease;
103-
color: #343541;
108+
color: var(--text-primary);
104109
font-family: inherit;
105110
}
106111

107112
.model-select:hover {
108-
border-color: #2563eb;
113+
border-color: var(--accent-color);
109114
}
110115

111116
.model-select:focus {
112117
outline: none;
113-
border-color: #2563eb;
114-
box-shadow: 0 0 0 1px #2563eb;
118+
border-color: var(--accent-color);
119+
box-shadow: 0 0 0 1px var(--accent-color);
115120
}
116121

117122
.api-key-input-wrapper {
@@ -123,58 +128,59 @@ body {
123128
.api-key-input {
124129
flex: 1;
125130
padding: 12px 14px;
126-
border: 1.5px solid #d9d9e3;
131+
border: 1.5px solid var(--border-secondary);
127132
border-radius: 8px;
128133
font-size: 14px;
129-
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
134+
font-family:
135+
"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Courier, monospace;
130136
transition: all 0.15s ease;
131-
background: #ffffff;
132-
color: #343541;
137+
background: var(--bg-primary);
138+
color: var(--text-primary);
133139
}
134140

135141
.api-key-input:hover {
136-
border-color: #2563eb;
142+
border-color: var(--accent-color);
137143
}
138144

139145
.api-key-input:focus {
140146
outline: none;
141-
border-color: #2563eb;
142-
box-shadow: 0 0 0 1px #2563eb;
147+
border-color: var(--accent-color);
148+
box-shadow: 0 0 0 1px var(--accent-color);
143149
}
144150

145151
.api-key-input::placeholder {
146-
color: #8e8ea0;
152+
color: var(--text-secondary);
147153
}
148154

149155
.toggle-visibility {
150156
padding: 12px 14px;
151-
border: 1.5px solid #d9d9e3;
157+
border: 1.5px solid var(--border-secondary);
152158
border-radius: 8px;
153-
background: #ffffff;
159+
background: var(--bg-primary);
154160
cursor: pointer;
155161
font-size: 16px;
156162
transition: all 0.15s ease;
157-
color: #343541;
163+
color: var(--text-primary);
158164
min-width: 48px;
159165
display: flex;
160166
align-items: center;
161167
justify-content: center;
162168
}
163169

164170
.toggle-visibility:hover {
165-
border-color: #2563eb;
166-
background: #f7f7f8;
171+
border-color: var(--accent-color);
172+
background: var(--bg-secondary);
167173
}
168174

169175
.help-text {
170176
margin-top: 8px;
171177
font-size: 12px;
172-
color: #8e8ea0;
178+
color: var(--text-secondary);
173179
line-height: 1.5;
174180
}
175181

176182
.help-text a {
177-
color: #2563eb;
183+
color: var(--accent-color);
178184
text-decoration: none;
179185
font-weight: 500;
180186
}
@@ -188,9 +194,9 @@ body {
188194
font-size: 12px;
189195
width: 100%;
190196
padding: 12px;
191-
background-color: #000000;
192-
color: #ffffff;
193-
border: 1px solid rgba(0, 0, 0, 0.2);
197+
background-color: var(--save-button-bg);
198+
color: var(--text-primary);
199+
border: 1px solid var(--border-secondary);
194200
border-radius: 4px;
195201
font-weight: 500;
196202
cursor: pointer;
@@ -207,8 +213,8 @@ body {
207213
}
208214

209215
.save-button:hover:not(:disabled) {
210-
background-color: #1a1a1a;
211-
border-color: rgba(0, 0, 0, 0.4);
216+
background-color: var(--bg-primary);
217+
border-color: var(--border-secondary);
212218
}
213219

214220
.save-button:active:not(:disabled) {
@@ -221,7 +227,7 @@ body {
221227
}
222228

223229
.save-button.saved {
224-
background-color: #000000;
230+
background-color: var(--save-button-bg);
225231
}
226232

227233
.feature-cards {
@@ -233,15 +239,15 @@ body {
233239

234240
.feature-card {
235241
padding: 20px;
236-
background: #ffffff;
237-
border: 1px solid #e5e7eb;
242+
background: var(--bg-primary);
243+
border: 1px solid var(--border-primary);
238244
border-radius: 8px;
239245
text-align: center;
240246
transition: all 0.15s ease;
241247
}
242248

243249
.feature-card:hover {
244-
border-color: #2563eb;
250+
border-color: var(--accent-color);
245251
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
246252
}
247253

@@ -266,21 +272,21 @@ body {
266272
.info-box {
267273
margin-top: 24px;
268274
padding: 16px;
269-
background: #eff6ff;
270-
border: 1px solid #dbeafe;
275+
background: var(--info-box-bg);
276+
border: 1px solid var(--info-box-border);
271277
border-radius: 8px;
272278
}
273279

274280
.info-box h3 {
275281
font-size: 13px;
276282
font-weight: 600;
277283
margin-bottom: 6px;
278-
color: #1e40af;
284+
color: var(--info-box-heading);
279285
}
280286

281287
.info-box p {
282288
font-size: 12px;
283-
color: #1e3a8a;
289+
color: var(--info-box-text);
284290
line-height: 1.6;
285291
}
286292

‎settings.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Atlas Settings</title>
7+
<link rel="stylesheet" href="theme.css">
78
<link rel="stylesheet" href="settings.css">
89
</head>
910
<body>

‎settings.tsx‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ function SettingsPage() {
1717
model: 'gemini-2.5-pro',
1818
toolMode: 'tool-router',
1919
composioApiKey: '',
20+
theme: 'system',
2021
});
2122
const [saved, setSaved] = useState(false);
2223
const [showApiKey, setShowApiKey] = useState(false);
@@ -26,11 +27,40 @@ function SettingsPage() {
2627
// Load settings from chrome.storage
2728
chrome.storage.local.get(['atlasSettings'], (result) => {
2829
if (result.atlasSettings) {
29-
setSettings(result.atlasSettings);
30+
setSettings({
31+
...result.atlasSettings,
32+
theme: result.atlasSettings.theme || 'system',
33+
});
3034
}
3135
});
3236
}, []);
3337

38+
// Apply theme on load and changes
39+
useEffect(() => {
40+
const applyTheme = () => {
41+
let theme = settings.theme || 'system';
42+
43+
if (theme === 'system') {
44+
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
45+
}
46+
47+
document.documentElement.setAttribute('data-theme', theme);
48+
};
49+
50+
applyTheme();
51+
52+
// Listen for system theme changes
53+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
54+
const handleChange = () => {
55+
if (settings.theme === 'system') {
56+
applyTheme();
57+
}
58+
};
59+
60+
mediaQuery.addEventListener('change', handleChange);
61+
return () => mediaQuery.removeEventListener('change', handleChange);
62+
}, [settings.theme]);
63+
3464
const handleSave = () => {
3565
chrome.storage.local.set({ atlasSettings: settings }, () => {
3666
setSaved(true);
@@ -53,6 +83,30 @@ function SettingsPage() {
5383
</div>
5484

5585
<div className="settings-content">
86+
<div className="setting-group">
87+
<label>Theme</label>
88+
<div className="provider-buttons">
89+
<button
90+
className={`provider-button ${settings.theme === 'light' ? 'active' : ''}`}
91+
onClick={() => setSettings({ ...settings, theme: 'light' })}
92+
>
93+
☀️ Light
94+
</button>
95+
<button
96+
className={`provider-button ${settings.theme === 'dark' ? 'active' : ''}`}
97+
onClick={() => setSettings({ ...settings, theme: 'dark' })}
98+
>
99+
🌙 Dark
100+
</button>
101+
<button
102+
className={`provider-button ${settings.theme === 'system' ? 'active' : ''}`}
103+
onClick={() => setSettings({ ...settings, theme: 'system' })}
104+
>
105+
💻 System
106+
</button>
107+
</div>
108+
</div>
109+
56110
<div className="setting-group">
57111
<label>AI Provider</label>
58112
<div className="provider-info">

0 commit comments

Comments
 (0)