Skip to content

Commit 9ffccc3

Browse files
stvncodestvncode
committed
Darkk mode
1 parent 70c4f31 commit 9ffccc3

21 files changed

+184
-118
lines changed

‎improv.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<title>Improv - Device Toolbox</title>
88
<script type="module" src="/src/pages/improv-details.ts"></script>
99
<script type="module" src="/src/components/app-header.ts"></script>
10+
<script type="module" src="/src/utils/dark-mode.ts"></script>
1011
<link
1112
rel="stylesheet"
1213
href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css"

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
rel="stylesheet"
1010
href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css"
1111
/>
12+
<script type="module" src="/src/utils/dark-mode.ts"></script>
1213
<style>
1314
@import url('src/styles/shoelace.css');
1415
@import url('src/styles/theme.css');
15-
1616
body {
1717
margin: 0;
1818
}

‎src/components/app-header.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ export class AppHeader extends LitElement {
77
static styles = css`
88
:host {
99
display: block;
10-
background: white;
10+
background: var(--app-bg-header);
11+
border-bottom: 1px solid var(--app-border);
1112
position: sticky;
1213
top: 0;
1314
z-index: 100;
@@ -38,7 +39,7 @@ export class AppHeader extends LitElement {
3839
.title {
3940
font-size: 1.25rem;
4041
font-weight: 500;
41-
color: #333;
42+
color: var(--app-text-primary);
4243
margin: 0;
4344
}
4445
@@ -49,18 +50,19 @@ export class AppHeader extends LitElement {
4950
}
5051
5152
.nav-link {
52-
color: #666;
53+
color: var(--app-text-secondary);
54+
border: 1px solid var(--app-border);
5355
text-decoration: none;
5456
padding: 8px 12px;
5557
border-radius: 6px;
56-
border: 1px solid #e0e0e0;
5758
transition: all 0.2s ease;
5859
font-weight: 400;
5960
}
6061
6162
.nav-link:hover {
62-
background: #f5f5f5;
63-
color: #333;
63+
background: var(--app-bg-secondary);
64+
color: var(--app-text-primary);
65+
border-color: var(--app-border-hover);
6466
}
6567
6668
.github-link {

‎src/components/details.ts‎

Lines changed: 46 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export class DetailsPage extends LitElement {
4141
padding-top: 20px;
4242
font-family:
4343
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
44+
background: var(--app-bg-primary);
45+
color: var(--app-text-primary);
4446
}
4547
4648
.container {
@@ -50,7 +52,7 @@ export class DetailsPage extends LitElement {
5052
}
5153
5254
a {
53-
color: #03a9f4;
55+
color: var(--wa-color-brand-50);
5456
text-decoration: none;
5557
}
5658
@@ -62,17 +64,17 @@ export class DetailsPage extends LitElement {
6264
display: inline-flex;
6365
align-items: center;
6466
gap: 8px;
65-
color: #03a9f4;
67+
color: var(--wa-color-brand-50);
6668
text-decoration: none;
6769
padding: 8px 16px;
6870
border-radius: 8px;
6971
transition: all 0.2s ease;
7072
margin-bottom: 20px;
71-
background: #e3f2fd;
73+
background: var(--app-category-bg);
7274
}
7375
7476
.back-button:hover {
75-
background: #c0e1f8;
77+
background: var(--app-bg-secondary);
7678
}
7779
7880
.back-button svg {
@@ -95,31 +97,31 @@ export class DetailsPage extends LitElement {
9597
}
9698
9799
.hero {
98-
background: white;
100+
background: var(--app-bg-card);
99101
border-radius: 16px;
100102
padding: 0 32px;
101-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
103+
box-shadow: 0 2px 8px var(--app-shadow);
102104
height: 100%;
103105
display: flex;
104106
flex-direction: column;
105107
}
106108
107109
.hero-title {
108-
color: #333;
110+
color: var(--app-text-primary);
109111
margin-top: 32px;
110112
font-size: 2.2rem;
111113
font-weight: 600;
112114
}
113115
114116
.hero .subtitle {
115-
color: #03a9f4;
117+
color: var(--wa-color-brand-50);
116118
font-size: 1.1rem;
117119
font-weight: 500;
118120
margin: 0 0 10px 0;
119121
}
120122
121123
.hero .description {
122-
color: #666;
124+
color: var(--app-text-secondary);
123125
line-height: 1.6;
124126
margin: 0;
125127
font-size: 1.05rem;
@@ -129,13 +131,13 @@ export class DetailsPage extends LitElement {
129131
}
130132
131133
.hero .secondary-description {
132-
color: #666;
134+
color: var(--app-text-secondary);
133135
line-height: 1.6;
134136
font-size: 1.05rem;
135137
}
136138
137139
.hero .tertiary-description {
138-
color: #666;
140+
color: var(--app-text-secondary);
139141
line-height: 1.6;
140142
font-size: 1.05rem;
141143
margin: 0;
@@ -157,7 +159,7 @@ export class DetailsPage extends LitElement {
157159
margin-top: 10px;
158160
background: transparent;
159161
border: none;
160-
color: #1976d2;
162+
color: var(--wa-color-brand-50);
161163
font-weight: 600;
162164
cursor: pointer;
163165
padding: 0;
@@ -171,24 +173,24 @@ export class DetailsPage extends LitElement {
171173
}
172174
173175
.hero-cta button.install {
174-
color: #03a9f4;
175-
background: #fff;
176-
border: 1px solid #03a9f4;
176+
color: var(--wa-color-brand-50);
177+
background: var(--app-bg-primary);
178+
border: 1px solid var(--wa-color-brand-50);
177179
border-radius: 8px;
178180
padding: 10px 16px;
179181
font-weight: 600;
180182
cursor: pointer;
181183
}
182184
183185
.hero-cta button.install:hover {
184-
background: #03a9f4;
185-
color: #fff;
186+
background: var(--wa-color-brand-50);
187+
color: var(--app-bg-primary);
186188
}
187189
188190
button.install {
189-
color: #03a9f4;
190-
background: #fff;
191-
border: 1px solid #03a9f4;
191+
color: var(--wa-color-brand-50);
192+
background: var(--app-bg-primary);
193+
border: 1px solid var(--wa-color-brand-50);
192194
border-radius: 8px;
193195
padding: 10px 16px;
194196
font-weight: 600;
@@ -198,15 +200,15 @@ export class DetailsPage extends LitElement {
198200
}
199201
200202
button.install:hover {
201-
background: #03a9f4;
202-
color: #fff;
203+
background: var(--wa-color-brand-50);
204+
color: var(--app-bg-primary);
203205
}
204206
205207
.actions-list {
206-
background: white;
208+
background: var(--app-bg-card);
207209
border-radius: 16px;
208210
padding: 8px;
209-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
211+
box-shadow: 0 2px 8px var(--app-shadow);
210212
height: 100%;
211213
box-sizing: border-box;
212214
position: relative;
@@ -225,7 +227,7 @@ export class DetailsPage extends LitElement {
225227
}
226228
227229
.action-item:hover {
228-
background: #fafafa;
230+
background: var(--app-bg-secondary);
229231
}
230232
231233
.action-item:last-child {
@@ -236,7 +238,7 @@ export class DetailsPage extends LitElement {
236238
width: 40px;
237239
height: 40px;
238240
border-radius: 50%;
239-
background: #e3f2fd;
241+
background: var(--app-category-bg);
240242
display: flex;
241243
align-items: center;
242244
justify-content: center;
@@ -245,20 +247,20 @@ export class DetailsPage extends LitElement {
245247
.icon-mask {
246248
width: 20px;
247249
height: 20px;
248-
background-color: #1976d2;
250+
background-color: var(--app-category-text);
249251
-webkit-mask: var(--icon-url) no-repeat center / contain;
250252
mask: var(--icon-url) no-repeat center / contain;
251253
}
252254
253255
.action-content h3 {
254256
margin: 0 0 6px 0;
255-
color: #333;
257+
color: var(--app-text-primary);
256258
font-size: 1rem;
257259
}
258260
259261
.action-content p {
260262
margin: 0;
261-
color: #666;
263+
color: var(--app-text-secondary);
262264
font-size: 0.95rem;
263265
line-height: 1.45;
264266
}
@@ -278,13 +280,13 @@ export class DetailsPage extends LitElement {
278280
.action-trailing svg {
279281
width: 16px;
280282
height: 16px;
281-
fill: #9e9e9e;
283+
fill: var(--app-text-muted);
282284
}
283285
284-
.action-trailing img {
285-
width: 16px;
286-
height: 16px;
287-
display: block;
286+
.chevron-icon {
287+
color: var(--app-text-primary);
288+
width: 20px !important;
289+
height: 20px !important;
288290
}
289291
290292
@media (max-width: 768px) {
@@ -449,11 +451,16 @@ export class DetailsPage extends LitElement {
449451
</div>
450452
<div class="action-trailing">
451453
${a.trailingIcon
452-
? html`<img
453-
src="${a.trailingIcon}"
454-
alt=""
455-
style="width: 20px; height: 20px;"
456-
/>`
454+
? html`<svg
455+
xmlns="http://www.w3.org/2000/svg"
456+
viewBox="0 0 24 24"
457+
class="chevron-icon"
458+
>
459+
<path
460+
fill="currentColor"
461+
d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"
462+
/>
463+
</svg>`
457464
: html`<svg
458465
xmlns="http://www.w3.org/2000/svg"
459466
viewBox="0 0 448 512"

‎src/components/tool-card.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export class ToolCard extends LitElement {
1616
}
1717
1818
.card {
19-
background: white;
19+
background: var(--app-bg-card);
2020
border-radius: 12px;
2121
overflow: hidden;
22-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
22+
box-shadow: 0 2px 8px var(--app-shadow);
2323
transition: all 0.3s ease;
2424
height: 100%;
2525
display: flex;
@@ -28,7 +28,7 @@ export class ToolCard extends LitElement {
2828
}
2929
3030
.card:hover {
31-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
31+
box-shadow: 0 4px 16px var(--app-shadow-hover);
3232
transform: translateY(-2px);
3333
}
3434
@@ -53,15 +53,15 @@ export class ToolCard extends LitElement {
5353
.card-title {
5454
font-size: 1.25rem;
5555
font-weight: 600;
56-
color: #333;
56+
color: var(--app-text-primary);
5757
margin: 0 0 8px 0;
5858
line-height: 1.3;
5959
}
6060
6161
.card-category {
6262
display: inline-block;
63-
background: #e3f2fd;
64-
color: #1976d2;
63+
background: var(--app-category-bg);
64+
color: var(--app-category-text);
6565
padding: 2px 8px;
6666
border-radius: 12px;
6767
font-size: 0.75rem;
@@ -70,7 +70,7 @@ export class ToolCard extends LitElement {
7070
}
7171
7272
.card-description {
73-
color: #666;
73+
color: var(--app-text-secondary);
7474
line-height: 1.5;
7575
margin: 0 0 40px 0;
7676
flex: 1;

‎src/components/warning-card.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export class WarningCard extends LitElement {
1313
}
1414
1515
.warning-card {
16-
background: #fff3e0;
17-
border: 1px solid #ffb74d;
16+
background: var(--wa-color-warning-fill-quiet);
17+
border: 1px solid var(--wa-color-warning-border-normal);
1818
border-radius: 8px;
1919
padding: 24px;
2020
display: flex;
@@ -26,7 +26,7 @@ export class WarningCard extends LitElement {
2626
flex-shrink: 0;
2727
width: 24px;
2828
height: 24px;
29-
color: #eb9136;
29+
color: var(--wa-color-warning-50);
3030
margin-top: 3px;
3131
}
3232
@@ -38,12 +38,12 @@ export class WarningCard extends LitElement {
3838
margin: 0 0 8px 0;
3939
font-size: 1.1rem;
4040
font-weight: 600;
41-
color: #e16725;
41+
color: var(--wa-color-warning-on-normal);
4242
}
4343
4444
.warning-description {
4545
margin: 0;
46-
color: #5d4037;
46+
color: var(--wa-color-warning-on-quiet);
4747
line-height: 1.5;
4848
}
4949
`;

‎src/main-app.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ export class MainApp extends LitElement {
1010
:host {
1111
display: block;
1212
min-height: 100vh;
13-
background: white;
13+
background: var(--app-bg-primary);
14+
color: var(--app-text-primary);
1415
}
1516
`;
1617

0 commit comments

Comments
 (0)