Skip to content

Commit 2b92b14

Browse files
weltekiwelteki
committed
Improve color theme
Add proper support for dark and light mode Signed-off-by: Han Verstraete (OpenFaaS Ltd) <[email protected]>
1 parent 575ec39 commit 2b92b14

File tree

7 files changed

+218
-155
lines changed

7 files changed

+218
-155
lines changed

‎client/src/App.css‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,26 @@
1313
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
1414
}
1515

16+
.header {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
gap: 1rem;
22+
margin-bottom: 2rem;
23+
position: relative;
24+
}
25+
1626
.title {
1727
font-size: 2.5rem;
18-
color: ##00fff1;
19-
margin-bottom: 0.5rem;
28+
color: var(--text-primary);
29+
margin: 0;
2030
font-weight: 600;
2131
}
2232

2333
.branding {
2434
font-size: 1rem;
25-
color: #888;
26-
margin-bottom: 2rem;
35+
color: var(--text-secondary);
2736
font-style: italic;
2837
}
2938

@@ -36,24 +45,25 @@
3645

3746
.nav-button {
3847
padding: 0.75rem 1.5rem;
39-
background-color: #f0f0f0;
40-
color: #333;
41-
border: 1px solid #ddd;
48+
background-color: var(--button-bg);
49+
color: var(--text-primary);
50+
border: 1px solid var(--border-color);
4251
border-radius: 6px;
4352
cursor: pointer;
4453
font-size: 1rem;
54+
transition: all 0.2s ease;
4555
}
4656

4757
.nav-button:hover {
48-
background-color: #e0e0e0;
58+
background-color: var(--button-hover-bg);
4959
}
5060

5161
.nav-button.active {
52-
background-color: #007bff;
62+
background-color: var(--primary-color);
5363
color: white;
54-
border-color: #0056b3;
64+
border-color: var(--primary-color);
5565
}
5666

5767
.nav-button.active:hover {
58-
background-color: #0056b3;
68+
background-color: var(--primary-hover);
5969
}

‎client/src/App.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ function App() {
1111

1212
return (
1313
<div className="app">
14-
<h1 className="title">Function Editor</h1>
15-
<div className="branding">Powered by OpenFaaS</div>
14+
<div className="header">
15+
<h1 className="title">Function Editor</h1>
16+
<div className="branding">Powered by OpenFaaS</div>
17+
</div>
1618

1719
<div className="navigation">
1820
<button

‎client/src/components/FunctionEditor.css‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
}
77

88
.editor-description {
9-
color: #00fff1;
9+
color: var(--primary-color);
1010
margin-bottom: 1.5rem;
1111
font-size: 1rem;
1212
line-height: 1.5;
1313
}
1414

1515
.editor-description code {
16-
background-color: rgba(0, 255, 241, 0.1);
16+
background-color: var(--code-bg);
1717
padding: 0.2rem 0.4rem;
1818
border-radius: 3px;
1919
font-family: 'Courier New', Courier, monospace;
@@ -22,31 +22,31 @@
2222
.tabs {
2323
display: flex;
2424
gap: 0.5rem;
25-
border-bottom: 1px solid #333;
25+
border-bottom: 1px solid var(--border-color);
2626
}
2727

2828
.tab-button {
2929
padding: 0.5rem 1rem;
3030
background: none;
3131
border: none;
32-
color: #00fff1;
32+
color: var(--primary-color);
3333
cursor: pointer;
3434
font-size: 1rem;
3535
transition: all 0.2s ease;
3636
border-bottom: 2px solid transparent;
3737
}
3838

3939
.tab-button:hover {
40-
background-color: rgba(0, 255, 241, 0.1);
40+
background-color: var(--hover-bg);
4141
}
4242

4343
.tab-button.active {
44-
background-color: rgba(0, 255, 241, 0.05);
45-
border-bottom: 2px solid #00fff1;
44+
background-color: var(--hover-bg);
45+
border-bottom: 2px solid var(--primary-color);
4646
}
4747

4848
.editor-container {
49-
border: 1px solid #333;
49+
border: 1px solid var(--border-color);
5050
border-radius: 4px;
5151
overflow: hidden;
5252
}
@@ -75,55 +75,55 @@
7575
}
7676

7777
.publish-button {
78-
background-color: #4caf50;
78+
background-color: var(--success-color);
7979
color: white;
8080
border: none;
8181
}
8282

8383
.publish-button:hover {
84-
background-color: #45a049;
84+
background-color: var(--success-hover);
8585
}
8686

8787
.publish-button:disabled {
88-
background-color: #cccccc;
88+
background-color: var(--disabled-color);
8989
cursor: not-allowed;
9090
}
9191

9292
.reset-button {
93-
background-color: #f44336;
93+
background-color: var(--error-color);
9494
color: white;
9595
border: none;
9696
}
9797

9898
.reset-button:hover {
99-
background-color: #d32f2f;
99+
background-color: var(--error-hover);
100100
}
101101

102102
.reset-button:disabled {
103-
background-color: #cccccc;
103+
background-color: var(--disabled-color);
104104
cursor: not-allowed;
105105
}
106106

107107
.cancel-button {
108-
background-color: #ff9800;
108+
background-color: var(--warning-color);
109109
color: white;
110110
border: none;
111111
}
112112

113113
.cancel-button:hover {
114-
background-color: #f57c00;
114+
background-color: var(--warning-hover);
115115
}
116116

117117
.unsaved-changes {
118118
display: flex;
119119
align-items: center;
120120
gap: 5px;
121-
color: #ff9800;
121+
color: var(--warning-color);
122122
font-size: 14px;
123123
}
124124

125125
.unsaved-icon {
126-
color: #ff9800;
126+
color: var(--warning-color);
127127
font-size: 16px;
128128
}
129129

@@ -143,13 +143,13 @@
143143
}
144144

145145
.status-message.success {
146-
background-color: rgba(0, 255, 0, 0.1);
147-
color: #00ff00;
146+
background-color: var(--success-bg);
147+
color: var(--success-color);
148148
}
149149

150150
.status-message.error {
151-
background-color: rgba(255, 0, 0, 0.1);
152-
color: #ff0000;
151+
background-color: var(--error-bg);
152+
color: var(--error-color);
153153
}
154154

155155
.status-icon {
@@ -160,9 +160,9 @@
160160
display: inline-block;
161161
width: 16px;
162162
height: 16px;
163-
border: 2px solid rgba(0, 0, 0, 0.3);
163+
border: 2px solid var(--spinner-border);
164164
border-radius: 50%;
165-
border-top-color: #000;
165+
border-top-color: var(--spinner-color);
166166
animation: spin 1s ease-in-out infinite;
167167
}
168168

@@ -176,16 +176,16 @@
176176
left: 0;
177177
right: 0;
178178
bottom: 0;
179-
background-color: rgba(0, 0, 0, 0.7);
179+
background-color: var(--modal-overlay);
180180
display: flex;
181181
align-items: center;
182182
justify-content: center;
183183
z-index: 1000;
184184
}
185185

186186
.error-modal-content {
187-
background-color: #1e1e1e;
188-
border: 1px solid #333;
187+
background-color: var(--bg-primary);
188+
border: 1px solid var(--border-color);
189189
border-radius: 4px;
190190
padding: 1.5rem;
191191
width: 80%;
@@ -196,11 +196,11 @@
196196

197197
.error-modal-content h3 {
198198
margin-top: 0;
199-
color: #ff0000;
199+
color: var(--error-color);
200200
}
201201

202202
.error-modal-content pre {
203-
background-color: #000;
203+
background-color: var(--bg-secondary);
204204
padding: 1rem;
205205
border-radius: 4px;
206206
overflow-x: auto;
@@ -211,31 +211,31 @@
211211
.close-modal-button {
212212
margin-top: 1rem;
213213
padding: 0.5rem 1rem;
214-
background-color: #333;
215-
color: #fff;
214+
background-color: var(--button-bg);
215+
color: var(--text-primary);
216216
border: none;
217217
border-radius: 4px;
218218
cursor: pointer;
219219
}
220220

221221
.close-modal-button:hover {
222-
background-color: #444;
222+
background-color: var(--button-hover-bg);
223223
}
224224

225225
.error-box {
226226
margin-top: 20px;
227-
border: 1px solid #ff6b6b;
227+
border: 1px solid var(--error-color);
228228
border-radius: 4px;
229-
background-color: rgba(255, 107, 107, 0.1);
229+
background-color: var(--error-bg);
230230
overflow: hidden;
231231
}
232232

233233
.error-header {
234234
display: flex;
235235
align-items: center;
236236
padding: 10px 15px;
237-
background-color: rgba(255, 107, 107, 0.2);
238-
border-bottom: 1px solid #ff6b6b;
237+
background-color: var(--error-bg);
238+
border-bottom: 1px solid var(--error-color);
239239
}
240240

241241
.error-icon {
@@ -245,7 +245,7 @@
245245

246246
.error-title {
247247
font-weight: bold;
248-
color: #ff6b6b;
248+
color: var(--error-color);
249249
}
250250

251251
.error-content {
@@ -261,5 +261,5 @@
261261
font-family: monospace;
262262
font-size: 13px;
263263
line-height: 1.5;
264-
color: #d4d4d4;
264+
color: var(--text-primary);
265265
}

‎client/src/components/FunctionEditor.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const defaultPackageJson = `{
2929
"dependencies": {}
3030
}`;
3131

32-
const FunctionEditor = ({ functionName }) => {
32+
const FunctionEditor = ({ functionName, setFunctionName }) => {
3333
const [handlerCode, setHandlerCode] = useState(defaultHandler);
3434
const [packageJson, setPackageJson] = useState(defaultPackageJson);
3535
const [activeTab, setActiveTab] = useState('handler');
@@ -324,7 +324,7 @@ const FunctionEditor = ({ functionName }) => {
324324
language="javascript"
325325
value={handlerCode}
326326
onChange={handleHandlerChange}
327-
theme="vs-dark"
327+
theme={window.matchMedia('(prefers-color-scheme: dark)').matches ? 'vs-dark' : 'light'}
328328
options={{
329329
minimap: { enabled: false },
330330
fontSize: 14,
@@ -340,7 +340,7 @@ const FunctionEditor = ({ functionName }) => {
340340
language="json"
341341
value={packageJson}
342342
onChange={handlePackageJsonChange}
343-
theme="vs-dark"
343+
theme={window.matchMedia('(prefers-color-scheme: dark)').matches ? 'vs-dark' : 'light'}
344344
options={{
345345
minimap: { enabled: false },
346346
fontSize: 14,

0 commit comments

Comments
 (0)