Skip to content

Commit 76ec4af

Browse files
burincburinc
authored
Merge pull request #132 from burinc/main
fix(weather): Fix dark mode CSS inheritance in weather components
2 parents 9fde94d + a6a4ef9 commit 76ec4af

6 files changed

Lines changed: 160 additions & 46 deletions

File tree

‎src/scittle/weather/complete_dashboard.cljs‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
"CSS for light and dark mode support using Quarto's data-bs-theme attribute"
1414
[]
1515
[:style "
16-
/* Light mode (default) */
17-
[data-bs-theme='light'] {
16+
/* Light mode (default) - inherits from parent */
17+
[data-bs-theme='light'],
18+
[data-bs-theme='light'] * {
1819
--card-bg: #ffffff;
1920
--card-secondary-bg: #f9fafb;
2021
--input-bg: #ffffff;
@@ -29,8 +30,26 @@
2930
--shadow-color: rgba(0, 0, 0, 0.1);
3031
}
3132
32-
/* Dark mode */
33-
[data-bs-theme='dark'] {
33+
/* Dark mode - inherits from parent */
34+
[data-bs-theme='dark'],
35+
[data-bs-theme='dark'] * {
36+
--card-bg: #1f2937;
37+
--card-secondary-bg: #111827;
38+
--input-bg: #111827;
39+
--text-primary: #f3f4f6;
40+
--text-secondary: #d1d5db;
41+
--text-tertiary: #9ca3af;
42+
--border-color: #374151;
43+
--border-color-dark: #4b5563;
44+
--button-bg: #374151;
45+
--button-hover: #4b5563;
46+
--button-text: #f3f4f6;
47+
--shadow-color: rgba(0, 0, 0, 0.3);
48+
}
49+
50+
/* Also check for Quarto's dark class on body */
51+
.quarto-dark,
52+
.quarto-dark * {
3453
--card-bg: #1f2937;
3554
--card-secondary-bg: #111827;
3655
--input-bg: #111827;
@@ -254,13 +273,13 @@
254273
(def tabs-container-style
255274
{:display "flex"
256275
:gap "5px"
257-
:border-bottom "2px solid #374151"
276+
:border-bottom "2px solid var(--border-color-dark, #4b5563)"
258277
:margin-bottom "20px"})
259278

260279
(defn tab-style [active?]
261280
{:padding "12px 24px"
262281
:background (if active? "#3b82f6" "transparent")
263-
:color (if active? "white" "#6b7280")
282+
:color (if active? "white" "var(--text-secondary, #6b7280)")
264283
:border "none"
265284
:border-bottom (if active? "2px solid #3b82f6" "2px solid transparent")
266285
:cursor "pointer"
@@ -338,7 +357,7 @@
338357

339358
(def metric-label-style
340359
{:font-size "12px"
341-
:color "#9ca3af"
360+
:color "var(--text-tertiary, #9ca3af)"
342361
:margin-bottom "5px"
343362
:text-transform "uppercase"
344363
:font-weight "600"})
@@ -363,7 +382,7 @@
363382
(def loading-style
364383
{:text-align "center"
365384
:padding "60px"
366-
:color "#9ca3af"})
385+
:color "var(--text-tertiary, #9ca3af)"})
367386

368387
;; ============================================================================
369388
;; Quick Cities
@@ -430,7 +449,7 @@
430449
:on-click #(on-unit-change u)}
431450
u])]]
432451

433-
[:div {:style {:font-size "13px" :color "#9ca3af"}}
452+
[:div {:style {:font-size "13px" :color "var(--text-tertiary, #9ca3af)"}}
434453
"🔄 Auto-refresh: Off"]])
435454

436455
(defn tabs-navigation [{:keys [active-tab on-tab-change]}]
@@ -491,7 +510,7 @@
491510
(get-weather-icon (:shortForecast period))]
492511
[:div {:style {:font-size "24px" :font-weight "600" :color "#3b82f6"}}
493512
(format-temp (:temperature period) unit)]
494-
[:div {:style {:font-size "13px" :color "#9ca3af" :margin-top "8px"}}
513+
[:div {:style {:font-size "13px" :color "var(--text-tertiary, #9ca3af)" :margin-top "8px"}}
495514
(:shortForecast period)]])]))
496515

497516
(defn hourly-view [{:keys [hourly unit]}]
@@ -518,7 +537,7 @@
518537
[:div {:style {:font-size "64px"}} "✅"]
519538
[:div {:style {:font-size "18px" :font-weight "500" :margin-top "15px"}}
520539
"No Active Weather Alerts"]
521-
[:div {:style {:font-size "14px" :color "#9ca3af" :margin-top "8px"}}
540+
[:div {:style {:font-size "14px" :color "var(--text-tertiary, #9ca3af)" :margin-top "8px"}}
522541
"All clear! No weather warnings or advisories."]]
523542

524543
[:div

‎src/scittle/weather/current_conditions.cljs‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
"CSS for light and dark mode support using Quarto's data-bs-theme attribute"
1414
[]
1515
[:style "
16-
/* Light mode (default) */
17-
[data-bs-theme='light'] {
16+
/* Light mode (default) - inherits from parent */
17+
[data-bs-theme='light'],
18+
[data-bs-theme='light'] * {
1819
--card-bg: #ffffff;
1920
--card-secondary-bg: #f9fafb;
2021
--input-bg: #ffffff;
@@ -29,8 +30,26 @@
2930
--shadow-color: rgba(0, 0, 0, 0.1);
3031
}
3132
32-
/* Dark mode */
33-
[data-bs-theme='dark'] {
33+
/* Dark mode - inherits from parent */
34+
[data-bs-theme='dark'],
35+
[data-bs-theme='dark'] * {
36+
--card-bg: #1f2937;
37+
--card-secondary-bg: #111827;
38+
--input-bg: #111827;
39+
--text-primary: #f3f4f6;
40+
--text-secondary: #d1d5db;
41+
--text-tertiary: #9ca3af;
42+
--border-color: #374151;
43+
--border-color-dark: #4b5563;
44+
--button-bg: #374151;
45+
--button-hover: #4b5563;
46+
--button-text: #f3f4f6;
47+
--shadow-color: rgba(0, 0, 0, 0.3);
48+
}
49+
50+
/* Also check for Quarto's dark class on body */
51+
.quarto-dark,
52+
.quarto-dark * {
3453
--card-bg: #1f2937;
3554
--card-secondary-bg: #111827;
3655
--input-bg: #111827;
@@ -228,7 +247,7 @@
228247
(def temp-display-style
229248
{:text-align "center"
230249
:padding "30px 0"
231-
:border-bottom "1px solid #e0e0e0"})
250+
:border-bottom "1px solid var(--border-color, #e5e7eb)"})
232251

233252
(def large-temp-style
234253
{:font-size "72px"
@@ -278,7 +297,7 @@
278297

279298
(def metric-label-style
280299
{:font-size "13px"
281-
:color "#9ca3af"
300+
:color "var(--text-tertiary, #9ca3af)"
282301
:margin "0 0 5px 0"
283302
:font-weight "500"
284303
:text-transform "uppercase"
@@ -293,15 +312,15 @@
293312
(def station-info-style
294313
{:margin-top "20px"
295314
:padding-top "20px"
296-
:border-top "1px solid #e0e0e0"
315+
:border-top "1px solid var(--border-color, #e5e7eb)"
297316
:font-size "13px"
298-
:color "#9ca3af"
317+
:color "var(--text-tertiary, #9ca3af)"
299318
:text-align "center"})
300319

301320
(def loading-style
302321
{:text-align "center"
303322
:padding "40px"
304-
:color "#9ca3af"})
323+
:color "var(--text-tertiary, #9ca3af)"})
305324

306325
(def error-style
307326
{:background "#fef2f2"

‎src/scittle/weather/forecast_viewer.cljs‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
"CSS for light and dark mode support using Quarto's data-bs-theme attribute"
1414
[]
1515
[:style "
16-
/* Light mode (default) */
17-
[data-bs-theme='light'] {
16+
/* Light mode (default) - inherits from parent */
17+
[data-bs-theme='light'],
18+
[data-bs-theme='light'] * {
1819
--card-bg: #ffffff;
1920
--card-secondary-bg: #f9fafb;
2021
--input-bg: #ffffff;
@@ -29,8 +30,26 @@
2930
--shadow-color: rgba(0, 0, 0, 0.1);
3031
}
3132
32-
/* Dark mode */
33-
[data-bs-theme='dark'] {
33+
/* Dark mode - inherits from parent */
34+
[data-bs-theme='dark'],
35+
[data-bs-theme='dark'] * {
36+
--card-bg: #1f2937;
37+
--card-secondary-bg: #111827;
38+
--input-bg: #111827;
39+
--text-primary: #f3f4f6;
40+
--text-secondary: #d1d5db;
41+
--text-tertiary: #9ca3af;
42+
--border-color: #374151;
43+
--border-color-dark: #4b5563;
44+
--button-bg: #374151;
45+
--button-hover: #4b5563;
46+
--button-text: #f3f4f6;
47+
--shadow-color: rgba(0, 0, 0, 0.3);
48+
}
49+
50+
/* Also check for Quarto's dark class on body */
51+
.quarto-dark,
52+
.quarto-dark * {
3453
--card-bg: #1f2937;
3554
--card-secondary-bg: #111827;
3655
--input-bg: #111827;
@@ -283,7 +302,7 @@
283302

284303
(def wind-style
285304
{:font-size "13px"
286-
:color "#9ca3af"
305+
:color "var(--text-tertiary, #9ca3af)"
287306
:margin "5px 0"})
288307

289308
(def precip-style
@@ -295,7 +314,7 @@
295314
(def loading-style
296315
{:text-align "center"
297316
:padding "40px"
298-
:color "#9ca3af"})
317+
:color "var(--text-tertiary, #9ca3af)"})
299318

300319
(def error-style
301320
{:background "#fef2f2"

‎src/scittle/weather/hourly_forecast.cljs‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
"CSS for light and dark mode support using Quarto's data-bs-theme attribute"
1414
[]
1515
[:style "
16-
/* Light mode (default) */
17-
[data-bs-theme='light'] {
16+
/* Light mode (default) - inherits from parent */
17+
[data-bs-theme='light'],
18+
[data-bs-theme='light'] * {
1819
--card-bg: #ffffff;
1920
--card-secondary-bg: #f9fafb;
2021
--input-bg: #ffffff;
@@ -29,8 +30,26 @@
2930
--shadow-color: rgba(0, 0, 0, 0.1);
3031
}
3132
32-
/* Dark mode */
33-
[data-bs-theme='dark'] {
33+
/* Dark mode - inherits from parent */
34+
[data-bs-theme='dark'],
35+
[data-bs-theme='dark'] * {
36+
--card-bg: #1f2937;
37+
--card-secondary-bg: #111827;
38+
--input-bg: #111827;
39+
--text-primary: #f3f4f6;
40+
--text-secondary: #d1d5db;
41+
--text-tertiary: #9ca3af;
42+
--border-color: #374151;
43+
--border-color-dark: #4b5563;
44+
--button-bg: #374151;
45+
--button-hover: #4b5563;
46+
--button-text: #f3f4f6;
47+
--shadow-color: rgba(0, 0, 0, 0.3);
48+
}
49+
50+
/* Also check for Quarto's dark class on body */
51+
.quarto-dark,
52+
.quarto-dark * {
3453
--card-bg: #1f2937;
3554
--card-secondary-bg: #111827;
3655
--input-bg: #111827;
@@ -363,13 +382,13 @@
363382

364383
(def wind-display-style
365384
{:font-size "12px"
366-
:color "#9ca3af"
385+
:color "var(--text-tertiary, #9ca3af)"
367386
:margin "4px 0"})
368387

369388
(def loading-style
370389
{:text-align "center"
371390
:padding "40px"
372-
:color "#9ca3af"})
391+
:color "var(--text-tertiary, #9ca3af)"})
373392

374393
(def error-style
375394
{:background "#fef2f2"

‎src/scittle/weather/simple_lookup.cljs‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
(ns scittle.weather.simple-lookup
22
"Simple weather lookup demo - minimal example showing basic API usage.
3-
3+
44
This is the simplest possible weather app:
55
- Two input fields for coordinates
66
- One button to fetch weather
77
- Display location and temperature
8-
8+
99
Demonstrates:
1010
- Basic API call with keyword arguments
1111
- Loading state
@@ -27,8 +27,9 @@
2727
"CSS for light and dark mode support using Quarto's data-bs-theme attribute"
2828
[]
2929
[:style "
30-
/* Light mode (default) */
31-
[data-bs-theme='light'] {
30+
/* Light mode (default) - inherits from parent */
31+
[data-bs-theme='light'],
32+
[data-bs-theme='light'] * {
3233
--card-bg: #ffffff;
3334
--card-secondary-bg: #f9fafb;
3435
--input-bg: #ffffff;
@@ -43,8 +44,9 @@
4344
--shadow-color: rgba(0, 0, 0, 0.1);
4445
}
4546
46-
/* Dark mode */
47-
[data-bs-theme='dark'] {
47+
/* Dark mode - inherits from parent */
48+
[data-bs-theme='dark'],
49+
[data-bs-theme='dark'] * {
4850
--card-bg: #1f2937;
4951
--card-secondary-bg: #111827;
5052
--input-bg: #111827;
@@ -58,7 +60,24 @@
5860
--button-text: #f3f4f6;
5961
--shadow-color: rgba(0, 0, 0, 0.3);
6062
}
61-
63+
64+
/* Also check for Quarto's dark class on body */
65+
.quarto-dark,
66+
.quarto-dark * {
67+
--card-bg: #1f2937;
68+
--card-secondary-bg: #111827;
69+
--input-bg: #111827;
70+
--text-primary: #f3f4f6;
71+
--text-secondary: #d1d5db;
72+
--text-tertiary: #9ca3af;
73+
--border-color: #374151;
74+
--border-color-dark: #4b5563;
75+
--button-bg: #374151;
76+
--button-hover: #4b5563;
77+
--button-text: #f3f4f6;
78+
--shadow-color: rgba(0, 0, 0, 0.3);
79+
}
80+
6281
/* Hover states - applied universally */
6382
button:not(.btn-primary):hover {
6483
background: var(--button-hover) !important;

0 commit comments

Comments
 (0)