Skip to content

Commit 56bf821

Browse files
makelinuxmakelinux
committed
feat: add light mode support with theme toggle
- Add theme toggle in settings (Light/Dark/System) - Preserve dark mode colors as possible - 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 56bf821

File tree

9 files changed

+260
-177
lines changed

9 files changed

+260
-177
lines changed

‎icons/icon.png‎

15.8 KB
Loading

‎settings.css‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ body {
88
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
99
-webkit-font-smoothing: antialiased;
1010
-moz-osx-font-smoothing: grayscale;
11-
background: #f7f7f8;
12-
color: #343541;
11+
background: var(--bg-primary);
12+
color: var(--text-primary);
1313
}
1414

1515
.settings-container {
@@ -28,21 +28,21 @@ body {
2828
.settings-header h1 {
2929
font-size: 28px;
3030
font-weight: 600;
31-
color: #343541;
31+
color: var(--text-primary);
3232
margin-bottom: 8px;
3333
}
3434

3535
.settings-header p {
36-
color: #8e8ea0;
36+
color: var(--text-secondary);
3737
font-size: 14px;
3838
}
3939

4040
.settings-content {
41-
background: #ffffff;
41+
background: var(--bg-primary);
4242
border-radius: 12px;
4343
padding: 32px;
4444
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
45-
border: 1px solid #e5e7eb;
45+
border: 1px solid var(--border-primary);
4646
}
4747

4848
.setting-group {
@@ -57,7 +57,7 @@ body {
5757
display: block;
5858
font-weight: 500;
5959
margin-bottom: 10px;
60-
color: #343541;
60+
color: var(--text-primary);
6161
font-size: 14px;
6262
}
6363

@@ -69,49 +69,49 @@ body {
6969

7070
.provider-button {
7171
padding: 14px 12px;
72-
border: 1.5px solid #d9d9e3;
72+
border: 1.5px solid var(--border-secondary);
7373
border-radius: 8px;
74-
background: #ffffff;
74+
background: var(--bg-primary);
7575
cursor: pointer;
7676
font-size: 14px;
7777
font-weight: 500;
7878
transition: all 0.15s ease;
79-
color: #343541;
79+
color: var(--text-primary);
8080
text-align: center;
8181
}
8282

8383
.provider-button:hover {
84-
border-color: #2563eb;
85-
background: #f7f7f8;
84+
border-color: var(--accent-color);
85+
background: var(--bg-secondary);
8686
}
8787

8888
.provider-button.active {
89-
border-color: #2563eb;
90-
background: #2563eb;
91-
color: white;
89+
border-color: var(--accent-color);
90+
background: var(--accent-color);
91+
color: #ffffff;
9292
}
9393

9494
.model-select {
9595
width: 100%;
9696
padding: 12px 14px;
97-
border: 1.5px solid #d9d9e3;
97+
border: 1.5px solid var(--border-secondary);
9898
border-radius: 8px;
9999
font-size: 14px;
100-
background: #ffffff;
100+
background: var(--bg-primary);
101101
cursor: pointer;
102102
transition: all 0.15s ease;
103-
color: #343541;
103+
color: var(--text-primary);
104104
font-family: inherit;
105105
}
106106

107107
.model-select:hover {
108-
border-color: #2563eb;
108+
border-color: var(--accent-color);
109109
}
110110

111111
.model-select:focus {
112112
outline: none;
113-
border-color: #2563eb;
114-
box-shadow: 0 0 0 1px #2563eb;
113+
border-color: var(--accent-color);
114+
box-shadow: 0 0 0 1px var(--accent-color);
115115
}
116116

117117
.api-key-input-wrapper {
@@ -123,58 +123,58 @@ body {
123123
.api-key-input {
124124
flex: 1;
125125
padding: 12px 14px;
126-
border: 1.5px solid #d9d9e3;
126+
border: 1.5px solid var(--border-secondary);
127127
border-radius: 8px;
128128
font-size: 14px;
129129
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
130130
transition: all 0.15s ease;
131-
background: #ffffff;
132-
color: #343541;
131+
background: var(--bg-primary);
132+
color: var(--text-primary);
133133
}
134134

135135
.api-key-input:hover {
136-
border-color: #2563eb;
136+
border-color: var(--accent-color);
137137
}
138138

139139
.api-key-input:focus {
140140
outline: none;
141-
border-color: #2563eb;
142-
box-shadow: 0 0 0 1px #2563eb;
141+
border-color: var(--accent-color);
142+
box-shadow: 0 0 0 1px var(--accent-color);
143143
}
144144

145145
.api-key-input::placeholder {
146-
color: #8e8ea0;
146+
color: var(--text-secondary);
147147
}
148148

149149
.toggle-visibility {
150150
padding: 12px 14px;
151-
border: 1.5px solid #d9d9e3;
151+
border: 1.5px solid var(--border-secondary);
152152
border-radius: 8px;
153-
background: #ffffff;
153+
background: var(--bg-primary);
154154
cursor: pointer;
155155
font-size: 16px;
156156
transition: all 0.15s ease;
157-
color: #343541;
157+
color: var(--text-primary);
158158
min-width: 48px;
159159
display: flex;
160160
align-items: center;
161161
justify-content: center;
162162
}
163163

164164
.toggle-visibility:hover {
165-
border-color: #2563eb;
166-
background: #f7f7f8;
165+
border-color: var(--accent-color);
166+
background: var(--bg-secondary);
167167
}
168168

169169
.help-text {
170170
margin-top: 8px;
171171
font-size: 12px;
172-
color: #8e8ea0;
172+
color: var(--text-secondary);
173173
line-height: 1.5;
174174
}
175175

176176
.help-text a {
177-
color: #2563eb;
177+
color: var(--accent-color);
178178
text-decoration: none;
179179
font-weight: 500;
180180
}
@@ -188,9 +188,9 @@ body {
188188
font-size: 12px;
189189
width: 100%;
190190
padding: 12px;
191-
background-color: #000000;
192-
color: #ffffff;
193-
border: 1px solid rgba(0, 0, 0, 0.2);
191+
background-color: var(--save-button-bg);
192+
color: var(--text-primary);
193+
border: 1px solid var(--border-secondary);
194194
border-radius: 4px;
195195
font-weight: 500;
196196
cursor: pointer;
@@ -207,8 +207,8 @@ body {
207207
}
208208

209209
.save-button:hover:not(:disabled) {
210-
background-color: #1a1a1a;
211-
border-color: rgba(0, 0, 0, 0.4);
210+
background-color: var(--bg-primary);
211+
border-color: var(--border-secondary);
212212
}
213213

214214
.save-button:active:not(:disabled) {
@@ -221,7 +221,7 @@ body {
221221
}
222222

223223
.save-button.saved {
224-
background-color: #000000;
224+
background-color: var(--save-button-bg);
225225
}
226226

227227
.feature-cards {
@@ -233,15 +233,15 @@ body {
233233

234234
.feature-card {
235235
padding: 20px;
236-
background: #ffffff;
237-
border: 1px solid #e5e7eb;
236+
background: var(--bg-primary);
237+
border: 1px solid var(--border-primary);
238238
border-radius: 8px;
239239
text-align: center;
240240
transition: all 0.15s ease;
241241
}
242242

243243
.feature-card:hover {
244-
border-color: #2563eb;
244+
border-color: var(--accent-color);
245245
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
246246
}
247247

@@ -266,21 +266,21 @@ body {
266266
.info-box {
267267
margin-top: 24px;
268268
padding: 16px;
269-
background: #eff6ff;
270-
border: 1px solid #dbeafe;
269+
background: var(--info-box-bg);
270+
border: 1px solid var(--info-box-border);
271271
border-radius: 8px;
272272
}
273273

274274
.info-box h3 {
275275
font-size: 13px;
276276
font-weight: 600;
277277
margin-bottom: 6px;
278-
color: #1e40af;
278+
color: var(--info-box-heading);
279279
}
280280

281281
.info-box p {
282282
font-size: 12px;
283-
color: #1e3a8a;
283+
color: var(--info-box-text);
284284
line-height: 1.6;
285285
}
286286

‎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)