feat: enhance global styles and component themes with new semantic colors; integrate ThemeProvider for improved theme management and update color usage across various components for consistency

components/layout/page-header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Menu } from "lucide-react";
 import { useSidebarContext } from "@/components/layout/sidebar-context";
@@ -21,6 +21,30 @@ export function PageHeader({
 }: PageHeaderProps) {
   const { setOpen } = useSidebarContext();
   const isMobile = useIsMobile();
+  const [textColor, setTextColor] = useState("var(--foreground)");
+
+  useEffect(() => {
+    const checkDarkBackground = () => {
+      const pageBackground = document.querySelector(".page-background");
+      if (pageBackground?.classList.contains("bg-solid-dark")) {
+        setTextColor("#f5f5f5");
+      } else {
+        setTextColor("var(--foreground)");
+      }
+    };
+
+    checkDarkBackground();
+    const observer = new MutationObserver(checkDarkBackground);
+    const pageBackground = document.querySelector(".page-background");
+    if (pageBackground) {
+      observer.observe(pageBackground, {
+        attributes: true,
+        attributeFilter: ["class"],
+      });
+    }
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <div className="flex flex-col gap-4 mb-2">
@@ -37,7 +61,13 @@ export function PageHeader({
         )}
         <div className="flex-1 min-w-0">
           <div className="flex items-start justify-between gap-2 mb-2">
-            <h1 className="text-2xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight leading-tight flex-1 min-w-0">
+            <h1
+              className="text-2xl md:text-4xl lg:text-5xl font-black tracking-tight leading-tight flex-1 min-w-0"
+              style={{
+                color: textColor,
+                WebkitTextFillColor: textColor,
+              }}
+            >
               {title}
             </h1>
             {rightContent && <div className="shrink-0">{rightContent}</div>}