diff options
| author | Ben Sima <ben@bsima.me> | 2025-11-10 06:11:01 -0500 |
|---|---|---|
| committer | Ben Sima <ben@bsima.me> | 2025-11-10 06:11:01 -0500 |
| commit | a106ab762b3c6d0ddfea061a3dab86571296f307 (patch) | |
| tree | ae9e16f41c15e5eb785f3604a765616c7c58c4cd /Biz/PodcastItLater | |
| parent | 71b649b61e413df75d3a4da4155ccc9d60343ae7 (diff) | |
Fix dark mode CSS variables
- Set all CSS variables on :root instead of html/body - Added RGB
variants needed by Bootstrap - Added secondary, tertiary, and border
color variants - Removed unnecessary light mode media query
This should now properly apply dark theme when system prefers dark
mode.
Diffstat (limited to 'Biz/PodcastItLater')
| -rw-r--r-- | Biz/PodcastItLater/Web.py | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py index d91587a..2ba5d37 100644 --- a/Biz/PodcastItLater/Web.py +++ b/Biz/PodcastItLater/Web.py @@ -57,28 +57,28 @@ def create_auto_dark_mode_style() -> html.style: """Create CSS for automatic dark mode based on prefers-color-scheme.""" return html.style( """ - /* Auto dark mode - sets Bootstrap theme based on system preference */ + /* Auto dark mode - applies Bootstrap dark theme via media query */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; - } - html { --bs-body-color: #dee2e6; + --bs-body-color-rgb: 222, 226, 230; --bs-body-bg: #212529; + --bs-body-bg-rgb: 33, 37, 41; --bs-emphasis-color: #fff; - --bs-border-color: #495057; + --bs-emphasis-color-rgb: 255, 255, 255; + --bs-secondary-color: rgba(222, 226, 230, 0.75); + --bs-secondary-bg: #343a40; + --bs-tertiary-color: rgba(222, 226, 230, 0.5); + --bs-tertiary-bg: #2b3035; + --bs-heading-color: inherit; --bs-link-color: #6ea8fe; --bs-link-hover-color: #8bb9fe; + --bs-link-color-rgb: 110, 168, 254; + --bs-link-hover-color-rgb: 139, 185, 254; --bs-code-color: #e685b5; - } - body { - color: var(--bs-body-color); - background-color: var(--bs-body-bg); - } - } - @media (prefers-color-scheme: light) { - :root { - color-scheme: light; + --bs-border-color: #495057; + --bs-border-color-translucent: rgba(255, 255, 255, 0.15); } } """, |