fix(theme): replace hardcoded hex colors with CSS variables and apply theme settings at runtime

- Replace #141415 with var(--cortex-bg-primary) across layout components
- Replace #1C1C1D with var(--cortex-bg-secondary) across layout components
- Replace #2E2F31 with var(--cortex-border-default) across layout components
- Replace hardcoded icon/text colors with semantic CSS variables
- Add createEffect in AppCore to apply uiFontFamily, uiFontSize, and
  zoomLevel from SettingsContext to document.documentElement.style
- Update tests to match new CSS variable output

Closes #21896, #21897

Author: echobt

src/AppCore.tsx

@@ -37,6 +37,7 @@ import { useLayout } from "@/context/LayoutContext";
 import { useSettings } from "@/context/SettingsContext";
 import { useNotifications } from "@/context/NotificationsContext";
 import { useOutput } from "@/context/OutputContext";
+import { useSettings } from "@/context/SettingsContext";
 import { useWindowEvents } from "@/hooks/useWindowEvents";
 import { useAutoSave } from "@/hooks/useAutoSave";
 import { initGlobalErrorHandler } from "@/lib/error-handler";
@@ -281,7 +282,7 @@ function AppContent(props: ParentProps) {
   const layout = useLayout();
   const notifications = useNotifications();
   const output = useOutput();
-  const settingsCtx = useSettings();
+  const { settings } = useSettings();
 
   // Window lifecycle events (close-requested with dirty file prompt, focus/blur,
   // beforeunload, visibilitychange, force-close cleanup)
@@ -290,12 +291,21 @@ function AppContent(props: ParentProps) {
   // Auto-save dirty files based on user settings (afterDelay, onFocusChange, onWindowChange)
   useAutoSave();
 
+  // Apply theme settings (font family, font size, zoom) to document root
   createEffect(() => {
-    const theme = settingsCtx.settings().theme;
-    const root = document.documentElement.style;
-    root.setProperty("font-family", theme.uiFontFamily);
-    root.setProperty("font-size", `${theme.uiFontSize}px`);
-    root.setProperty("zoom", String(theme.zoomLevel));
+    const theme = settings().theme;
+    const docStyle = document.documentElement.style;
+    if (theme.uiFontFamily) {
+      docStyle.setProperty("font-family", theme.uiFontFamily);
+    }
+    if (theme.uiFontSize) {
+      docStyle.setProperty("font-size", `${theme.uiFontSize}px`);
+    }
+    if (theme.zoomLevel && theme.zoomLevel !== 1) {
+      docStyle.setProperty("zoom", String(theme.zoomLevel));
+    } else {
+      docStyle.removeProperty("zoom");
+    }
   });
 
   // Global error handler (unhandled rejections, uncaught errors)

src/components/cortex/CortexActivityBar.tsx

@@ -134,15 +134,15 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
   const [isHovered, setIsHovered] = createSignal(false);
 
   const bg = () => {
-    if (props.isActive) return "#BFFF00";
+    if (props.isActive) return "var(--cortex-accent-primary)";
     if (isHovered()) return "var(--cortex-sidebar-selected)";
     return "transparent";
   };
 
   const iconColor = () => {
     if (props.isActive) return "var(--cortex-icon-active)";
-    if (isHovered()) return "#FCFCFC";
-    return "#8C8D8F";
+    if (isHovered()) return "var(--cortex-text-primary)";
+    return "var(--cortex-icon-inactive)";
   };
 
   return (
@@ -186,7 +186,7 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
             "align-items": "center",
             "justify-content": "center",
             padding: "0 var(--cortex-space-1)",
-            background: "#BFFF00",
+            background: "var(--cortex-accent-primary)",
             color: "var(--cortex-icon-active)",
             "font-family": "var(--cortex-font-sans)",
             "font-size": "9px",

src/components/cortex/CortexCodeEditor.tsx

@@ -173,7 +173,7 @@ const EditorPlaceholder: Component = () => {
     "align-items": "center",
     "justify-content": "center",
     background: "var(--cortex-bg-primary)",
-    color: "#8C8D8F",
+    color: "var(--cortex-text-secondary)",
     gap: "16px",
   });
 

src/components/cortex/__tests__/CortexFileExplorer.test.tsx

@@ -299,11 +299,11 @@ describe("CortexFileExplorer", () => {
       expect(div?.style.borderRadius).toBe("16px");
     });
 
-    it("should have correct background color var(--cortex-bg-primary)", () => {
+    it("should use cortex-bg-primary CSS variable for background", () => {
       const { container } = render(() => <CortexFileExplorer />);
       const div = container.firstChild as HTMLElement;
       const bg = div?.style.background;
-      expect(bg === "var(--cortex-bg-primary)" || bg === "#141415" || bg === "rgb(20, 20, 21)").toBe(true);
+      expect(bg).toContain("var(--cortex-bg-primary)");
     });
   });
 });

src/components/cortex/primitives/CortexHeaderItem.tsx

@@ -41,7 +41,7 @@ export const CortexHeaderItem: Component<CortexHeaderItemProps> = (props) => {
     padding: "8px 10px",
     gap: "10px",
     border: "none",
-    background: isHighlighted() ? "#1C1C1D" : "transparent",
+    background: isHighlighted() ? "var(--cortex-bg-secondary)" : "transparent",
     "border-radius": isHighlighted() ? "8px" : "0",
     color: isHighlighted() ? "#FCFCFC" : "#8C8D8F",
     "font-family": "'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",

src/components/cortex/primitives/CortexSeparator.tsx

@@ -28,7 +28,7 @@ export const CortexSeparator: Component<CortexSeparatorProps> = (props) => {
   const lineStyle = (): JSX.CSSProperties => ({
     width: "100%",
     height: "0",
-    "border-bottom": "1px solid #2E2F31",
+    "border-bottom": "1px solid var(--cortex-border-default)",
   });
 
   return (

src/components/cortex/titlebar/TitleBarDropdownMenu.tsx

@@ -79,14 +79,14 @@ const DropdownMenuItem: Component<{ item: MenuItem; onClick: () => void }> = (pr
     "justify-content": "space-between",
     gap: "8px",
     padding: "4px 8px",
-    background: hovered() ? "#252628" : "transparent",
+    background: hovered() ? "var(--cortex-bg-hover)" : "transparent",
     border: "none",
     cursor: "pointer",
     "font-family": "'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
     "font-size": "12px",
     "font-weight": "400",
     "line-height": "1.167em",
-    color: "#FCFCFC",
+    color: "var(--cortex-text-primary)",
     "text-align": "left",
     "border-radius": hovered() ? "4px" : "0",
     "box-sizing": "border-box",
@@ -102,7 +102,7 @@ const DropdownMenuItem: Component<{ item: MenuItem; onClick: () => void }> = (pr
       <span>{props.item.label}</span>
       <Show when={props.item.shortcut}>
         <span style={{
-          color: "#8C8D8F",
+          color: "var(--cortex-text-secondary)",
           "font-family": "'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
           "font-size": "12px",
           "font-weight": "400",

src/components/cortex/titlebar/__tests__/TitleBarDropdownMenu.test.tsx

@@ -97,7 +97,7 @@ describe("TitleBarDropdownMenu", () => {
       const dropdown = container.firstElementChild as HTMLElement;
       const style = dropdown.getAttribute("style") || "";
       expect(style).toContain("min-width:243px");
-      expect(style).toMatch(/(var\(--cortex-bg-secondary\)|#1C1C1D|rgb\(28,\s*28,\s*29\))/i);
+      expect(style).toContain("var(--cortex-bg-secondary)");
       expect(style).toContain("border-radius:8px");
       expect(style).toContain("z-index:9999");
     });
@@ -186,7 +186,7 @@ describe("TitleBarDropdownMenu", () => {
       expect(button.style.background).toBe("transparent");
 
       await fireEvent.mouseEnter(button);
-      expect(button.style.background).toMatch(/rgb\(37,\s*38,\s*40\)|#252628/i);
+      expect(button.style.background).toContain("var(--cortex-bg-hover)");
 
       await fireEvent.mouseLeave(button);
       expect(button.style.background).toBe("transparent");

src/components/layout/ActivityBar.tsx

@@ -112,9 +112,9 @@ const ActivityBarButton: Component<{
   };
 
   const color = () => {
-    if (props.isActive) return "#141415";
-    if (hovered()) return "#FCFCFC";
-    return "#8C8D8F";
+    if (props.isActive) return "var(--cortex-icon-active)";
+    if (hovered()) return "var(--cortex-text-primary)";
+    return "var(--cortex-icon-inactive)";
   };
 
   return (