Skip to content

Commit 13f2eeb

Browse files
SableRafSableRaf
committed
Implement dark mode support and update color variables for improved theming
1 parent 1c53e42 commit 13f2eeb

4 files changed

Lines changed: 59 additions & 14 deletions

File tree

‎pcd-website/src/components/MapView.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ function setMapStyle(styleId: string, map: import('leaflet').Map, L: typeof impo
8686
});
8787
currentStyle.value = styleId;
8888
localStorage.setItem(STORAGE_KEY, styleId);
89+
document.documentElement.dataset.theme = styleId === 'dark' ? 'dark' : 'light';
8990
}
9091
9192
function onStyleChange(styleId: string) {

‎pcd-website/src/components/NodePanel.vue‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ watch(
9494
}
9595
);
9696
97+
9798
function downloadIcs(node: Node) {
9899
const { icsContent } = calendarLinks(node);
99100
const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });
@@ -238,33 +239,33 @@ function getParagraphs(text: string): string[] {
238239
}
239240
240241
.panel-close:hover {
241-
background: #f5f5f5;
242+
background: var(--color-border);
242243
}
243244
244245
.panel-content {
245246
padding: 3rem 1.5rem 2rem;
246247
}
247248
248249
.panel-placeholder {
249-
background: #fffbea;
250-
border: 1px solid #e8b84b;
250+
background: var(--color-callout-placeholder-bg);
251+
border: 1px solid var(--color-callout-placeholder-border);
251252
border-radius: 4px;
252253
padding: 0.625rem 0.875rem;
253254
font-size: 0.875rem;
254255
line-height: 1.45;
255256
margin-bottom: 1rem;
256-
color: #6b4c00;
257+
color: var(--color-callout-placeholder-text);
257258
}
258259
259260
.panel-unconfirmed {
260-
background: #e8f0fe;
261-
border: 1px solid #7baaf7;
261+
background: var(--color-callout-unconfirmed-bg);
262+
border: 1px solid var(--color-callout-unconfirmed-border);
262263
border-radius: 4px;
263264
padding: 0.625rem 0.875rem;
264265
font-size: 0.875rem;
265266
line-height: 1.45;
266267
margin-bottom: 1rem;
267-
color: #1a3a6b;
268+
color: var(--color-callout-unconfirmed-text);
268269
}
269270
270271
.panel-unconfirmed a {

‎pcd-website/src/pages/index.astro‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ const nodes = loadNodes();
3232
/>
3333
<link rel="preconnect" href="https://fonts.googleapis.com" />
3434
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
35+
<script is:inline>
36+
const stored = localStorage.getItem('pcd-map-style');
37+
const isDark = stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches);
38+
document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
39+
</script>
3540
</head>
3641
<body>
3742
<a href="#map" class="skip-link">Skip to map</a>

‎pcd-website/src/styles/global.css‎

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
--color-bg-panel: #ffffff;
1313
--color-border: #e0e0e0;
1414
--color-overlay: rgba(0, 0, 0, 0.4);
15+
--color-callout-placeholder-bg: #fffbea;
16+
--color-callout-placeholder-border: #e8b84b;
17+
--color-callout-placeholder-text: #6b4c00;
18+
--color-callout-unconfirmed-bg: #e8f0fe;
19+
--color-callout-unconfirmed-border: #7baaf7;
20+
--color-callout-unconfirmed-text: #1a3a6b;
1521

1622
--spacing-xs: 0.25rem;
1723
--spacing-sm: 0.5rem;
@@ -110,7 +116,7 @@ body {
110116
}
111117

112118
#burger-btn:hover {
113-
background: #f5f5f5;
119+
background: var(--color-border);
114120
}
115121

116122
/* ─── Leaflet Popup Overrides ───────────────────────────────── */
@@ -142,25 +148,25 @@ body {
142148
}
143149

144150
.popup-content .popup-placeholder {
145-
background: #fffbea;
146-
border: 1px solid #e8b84b;
151+
background: var(--color-callout-placeholder-bg);
152+
border: 1px solid var(--color-callout-placeholder-border);
147153
border-radius: 4px;
148154
padding: 0.5rem 0.625rem;
149155
font-size: 0.8125rem;
150156
line-height: 1.4;
151157
margin-bottom: 0.625rem;
152-
color: #6b4c00;
158+
color: var(--color-callout-placeholder-text);
153159
}
154160

155161
.popup-content .popup-unconfirmed {
156-
background: #e8f0fe;
157-
border: 1px solid #7baaf7;
162+
background: var(--color-callout-unconfirmed-bg);
163+
border: 1px solid var(--color-callout-unconfirmed-border);
158164
border-radius: 4px;
159165
padding: 0.5rem 0.625rem;
160166
font-size: 0.8125rem;
161167
line-height: 1.4;
162168
margin-bottom: 0.625rem;
163-
color: #1a3a6b;
169+
color: var(--color-callout-unconfirmed-text);
164170
}
165171

166172
.popup-content .popup-unconfirmed a {
@@ -261,6 +267,38 @@ body {
261267
text-decoration: underline;
262268
}
263269

270+
/* ─── Dark Mode Tokens ──────────────────────────────────────── */
271+
[data-theme="dark"] {
272+
--color-focus: #79b8ff;
273+
--color-text: #e8e8e8;
274+
--color-text-muted: #999;
275+
--color-bg: #1a1a1a;
276+
--color-bg-panel: #242424;
277+
--color-border: #3a3a3a;
278+
--color-overlay: rgba(0, 0, 0, 0.6);
279+
--color-callout-placeholder-bg: #2d2510;
280+
--color-callout-placeholder-border: #7a5f18;
281+
--color-callout-placeholder-text: #f0c96a;
282+
--color-callout-unconfirmed-bg: #0f1e3a;
283+
--color-callout-unconfirmed-border: #2c5099;
284+
--color-callout-unconfirmed-text: #8ab4f8;
285+
}
286+
287+
/* ─── Leaflet Popup Dark Mode ───────────────────────────────── */
288+
[data-theme="dark"] {
289+
.leaflet-popup-content-wrapper,
290+
.leaflet-popup-tip {
291+
background: var(--color-bg-panel);
292+
color: var(--color-text);
293+
}
294+
.leaflet-popup-close-button {
295+
color: var(--color-text-muted) !important;
296+
}
297+
.leaflet-popup-close-button:hover {
298+
color: var(--color-text) !important;
299+
}
300+
}
301+
264302
/* ─── Marker Cluster Overrides ──────────────────────────────── */
265303
/* Custom clusters are rendered via iconCreateFunction in MapView.vue */
266304
.marker-cluster-custom {

0 commit comments

Comments
 (0)