From c846966535ef2531eab581a8c4e77f6bebdd1b5b Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Wed, 12 Nov 2025 15:26:43 -0500 Subject: Refactor UI components and add dark mode to admin pages - Create shared UI module (Biz/PodcastItLater/UI.py) with: - create_bootstrap_styles() - create_auto_dark_mode_style() - create_htmx_script() - create_bootstrap_js() - Update Admin.py to use shared UI module and add dark mode support - Update Web.py to use shared UI module - Admin Queue and User Management pages now support automatic dark mode --- Biz/PodcastItLater/Web.py | 37 +++---------------------------------- 1 file changed, 3 insertions(+), 34 deletions(-) (limited to 'Biz/PodcastItLater/Web.py') diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py index c4df33d..c1abf02 100644 --- a/Biz/PodcastItLater/Web.py +++ b/Biz/PodcastItLater/Web.py @@ -20,6 +20,7 @@ import Biz.EmailAgent import Biz.PodcastItLater.Admin as Admin import Biz.PodcastItLater.Billing as Billing import Biz.PodcastItLater.Core as Core +import Biz.PodcastItLater.UI as UI import html as html_module import httpx import ludic.html as html @@ -53,38 +54,6 @@ from typing import override logger = Log.setup() -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 - applies Bootstrap dark theme via media query */ - @media (prefers-color-scheme: dark) { - :root { - color-scheme: dark; - --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-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; - --bs-border-color: #495057; - --bs-border-color-translucent: rgba(255, 255, 255, 0.15); - } - } - """, - ) - - # Configuration area = App.from_env() BASE_URL = os.getenv("BASE_URL", "http://localhost:8000") @@ -697,7 +666,7 @@ class BillingPage(Component[AnyChildren, BillingPageAttrs]): "@1.11.3/font/bootstrap-icons.min.css');", ), # Auto dark mode CSS (must come after Bootstrap) - create_auto_dark_mode_style(), + UI.create_auto_dark_mode_style(), html.div( html.div( html.h1( @@ -1019,7 +988,7 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): "@1.11.3/font/bootstrap-icons.min.css');", ), # Auto dark mode CSS (must come after Bootstrap) - create_auto_dark_mode_style(), + UI.create_auto_dark_mode_style(), # Bootstrap container html.div( # Header -- cgit v1.2.3