diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..fe9e127
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-21 - [Theme Switching Robustness]
+**Learning:** Using Tailwind utility classes like `dark:bg-black` for the root body background can be fragile if the dark mode toggle mechanism or configuration (`darkMode: "class"`) has subtle mismatches. Using CSS variables (`bg-[var(--background)]`) that are scoped in `:root` and `.dark` blocks is more robust because it relies on standard CSS inheritance, ensuring the background color always matches the active theme class on the document root. Also, adding `color-scheme: dark` is critical for native UI elements (scrollbars) to match.
+**Action:** When implementing dark mode, always define `color-scheme` in CSS and prefer CSS variables for the main background to avoid "flash" or mismatch issues.
diff --git a/app/globals.css b/app/globals.css
index d7efd95..ffb095d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -79,11 +79,13 @@
/* Base styles */
:root {
+ color-scheme: light;
--background: #f6f6f8;
--foreground: #0f172a;
}
.dark {
+ color-scheme: dark;
--background: #000000;
--foreground: #ffffff;
}
diff --git a/app/layout.tsx b/app/layout.tsx
index 268f65e..7f31992 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 04f5f07..b34e873 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -78,6 +78,7 @@ export function Sidebar() {