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.

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 <id>' 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);
             }
         }
         """,