From 22a8dc7ceb4e2dd334bfd74191d306db52a33b4a Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Thu, 28 May 2026 14:14:19 +0800
Subject: [PATCH] fix: ensure theme switching works for all containers
 including sage-shell, topbar, sidebar, and main content area

---
 wwwroot/shell_theme.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/wwwroot/shell_theme.css b/wwwroot/shell_theme.css
index 515d39d..9215966 100644
--- a/wwwroot/shell_theme.css
+++ b/wwwroot/shell_theme.css
@@ -78,6 +78,17 @@ body {
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
+/* Ensure theme variables override bricks.css hardcoded values */
+[data-theme="dark"] body {
+  background-color: var(--sage-bg-primary);
+  color: var(--sage-text-primary);
+}
+
+[data-theme="light"] body {
+  background-color: var(--sage-bg-primary);
+  color: var(--sage-text-primary);
+}
+
 /* ===== Shell Layout ===== */
 .sage-shell {
   width: 100%;
@@ -85,6 +96,9 @@ body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background-color: var(--sage-bg-primary);
+  color: var(--sage-text-primary);
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .sage-topbar {
@@ -695,6 +709,16 @@ body {
   color: var(--sage-brand);
 }
 
+/* ===== Utility Classes ===== */
+.sage-brand-title {
+  color: var(--sage-text-primary);
+  font-weight: bold;
+}
+
+.sage-text-secondary {
+  color: var(--sage-text-secondary);
+}
+
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
   .sage-sidebar {