From a106ab762b3c6d0ddfea061a3dab86571296f307 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Mon, 10 Nov 2025 06:11:01 -0500 Subject: 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. --- Biz/PodcastItLater/Web.py | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'Biz/PodcastItLater') 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); } } """, -- cgit v1.2.3