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. --- .tasks/tasks.jsonl | 2 +- Biz/PodcastItLater/Web.py | 26 +++++++++++++------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/.tasks/tasks.jsonl b/.tasks/tasks.jsonl index 7749a03..da44cd5 100644 --- a/.tasks/tasks.jsonl +++ b/.tasks/tasks.jsonl @@ -35,4 +35,4 @@ {"taskCreatedAt":"2025-11-09T22:19:27.303689497Z","taskDependencies":[],"taskId":"t-1pIV0ZF","taskNamespace":"Biz/PodcastItLater.hs","taskParent":"t-143KQl2","taskStatus":"Done","taskTitle":"Implement billing page UI component with pricing and upgrade options","taskType":"WorkTask","taskUpdatedAt":"2025-11-09T23:04:20.974801117Z"} {"taskCreatedAt":"2025-11-09T22:38:46.235799803Z","taskDependencies":[],"taskId":"t-1qZlMb4","taskNamespace":null,"taskParent":null,"taskStatus":"Open","taskTitle":"Add a 'task show ' command that prints out a long, easy to read (for humans) version of the task. Include dependencies and all information fields in the output","taskType":"WorkTask","taskUpdatedAt":"2025-11-09T22:38:46.235799803Z"} {"taskCreatedAt":"2025-11-09T22:56:18.897655607Z","taskDependencies":[],"taskId":"t-1s8ADC0","taskNamespace":"Biz/PodcastItLater.hs","taskParent":null,"taskStatus":"Done","taskTitle":"Make PodcastItLater UI mobile-friendly and responsive","taskType":"WorkTask","taskUpdatedAt":"2025-11-09T23:09:16.712244322Z"} -{"taskCreatedAt":"2025-11-10T01:32:42.893029428Z","taskDependencies":[],"taskId":"t-64tkB5","taskNamespace":"Biz/PodcastItLater.hs","taskParent":null,"taskStatus":"Done","taskTitle":"Add dark mode support to PodcastItLater UI","taskType":"WorkTask","taskUpdatedAt":"2025-11-10T01:36:37.714733642Z"} +{"taskCreatedAt":"2025-11-10T01:32:42.893029428Z","taskDependencies":[],"taskId":"t-64tkB5","taskNamespace":"Biz/PodcastItLater.hs","taskParent":null,"taskStatus":"Done","taskTitle":"Add dark mode support to PodcastItLater UI","taskType":"WorkTask","taskUpdatedAt":"2025-11-10T02:16:39.202726983Z"} 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