feat: themes

frontend/src/modules/ide/IDE.tsx

@@ -13,16 +13,45 @@ import {
   TitleBar,
   StatusBar,
 } from "./components";
+import { useThemeStore } from "@/modules/theme-bw/stores/theme.store";
 
 interface IDEProps {
   initialFiles?: FileNode;
   onBack?: () => void;
 }
 
+const darkColors = {
+  bg: "#1e1e1e",
+  bgSecondary: "#252526",
+  bgTertiary: "#2d2d30",
+  border: "#3e3e42",
+  textPrimary: "#cccccc",
+  textSecondary: "#858585",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
+const lightColors = {
+  bg: "#ffffff",
+  bgSecondary: "#f3f3f3",
+  bgTertiary: "#e8e8e8",
+  border: "#e0e0e0",
+  textPrimary: "#333333",
+  textSecondary: "#616161",
+  accent: "#0e639c",
+  accentHover: "#1177bb",
+  statusBar: "#007acc",
+};
+
 export const IDE: React.FC<IDEProps> = ({
   initialFiles: externalFiles,
   onBack,
 }: IDEProps = {}) => {
+  const theme = useThemeStore((s) => s.theme);
+  const isDark = theme === "dark";
+  const c = isDark ? darkColors : lightColors;
+
   const files = useIDEStore((state) => state.files);
   const openFiles = useIDEStore((state) => state.openFiles);
   const activeFile = useIDEStore((state) => state.activeFile);
@@ -51,7 +80,7 @@ export const IDE: React.FC<IDEProps> = ({
           height: "100vh",
           display: "flex",
           flexDirection: "column",
-          backgroundColor: "#1e1e1e",
+          backgroundColor: c.bg,
           fontFamily:
             "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
           position: "relative",
@@ -66,8 +95,8 @@ export const IDE: React.FC<IDEProps> = ({
               top: "40px",
               left: "12px",
               background: "transparent",
-              border: "1px solid #3e3e42",
-              color: "#cccccc",
+              border: `1px solid ${c.border}`,
+              color: c.textPrimary,
               cursor: "pointer",
               display: "flex",
               alignItems: "center",
@@ -79,14 +108,14 @@ export const IDE: React.FC<IDEProps> = ({
               zIndex: 10,
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
               e.currentTarget.style.color = "#fff";
               e.currentTarget.style.borderColor = "#555";
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
-              e.currentTarget.style.borderColor = "#3e3e42";
+              e.currentTarget.style.color = c.textPrimary;
+              e.currentTarget.style.borderColor = c.border;
             }}
             title="Go back"
           >
@@ -117,7 +146,7 @@ export const IDE: React.FC<IDEProps> = ({
               style={{
                 fontSize: "22px",
                 marginBottom: "12px",
-                color: "#cccccc",
+                color: c.textPrimary,
                 fontWeight: 300,
               }}
             >
@@ -127,7 +156,7 @@ export const IDE: React.FC<IDEProps> = ({
               style={{
                 fontSize: "13px",
                 marginBottom: "32px",
-                color: "#858585",
+                color: c.textSecondary,
               }}
             >
               Create a new project to get started
@@ -136,7 +165,7 @@ export const IDE: React.FC<IDEProps> = ({
               onClick={createNewProject}
               style={{
                 padding: "10px 24px",
-                backgroundColor: "#0e639c",
+                backgroundColor: c.accent,
                 border: "none",
                 borderRadius: "4px",
                 color: "#fff",
@@ -146,10 +175,10 @@ export const IDE: React.FC<IDEProps> = ({
                 transition: "background-color 0.1s",
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = "#1177bb";
+                e.currentTarget.style.backgroundColor = c.accentHover;
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "#0e639c";
+                e.currentTarget.style.backgroundColor = c.accent;
               }}
             >
               <MdAdd size={14} /> New Project
@@ -168,7 +197,7 @@ export const IDE: React.FC<IDEProps> = ({
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        backgroundColor: "#1e1e1e",
+        backgroundColor: c.bg,
         fontFamily:
           "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
       }}
@@ -176,14 +205,14 @@ export const IDE: React.FC<IDEProps> = ({
       <div
         style={{
           height: "30px",
-          backgroundColor: "#323233",
+          backgroundColor: c.bgTertiary,
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
           padding: "0 8px",
-          borderBottom: "1px solid #1e1e1e",
+          borderBottom: `1px solid ${c.bg}`,
           fontSize: "12px",
-          color: "#cccccc",
+          color: c.textPrimary,
           userSelect: "none",
           flexShrink: 0,
         }}
@@ -194,7 +223,7 @@ export const IDE: React.FC<IDEProps> = ({
             style={{
               background: "transparent",
               border: "none",
-              color: "#cccccc",
+              color: c.textPrimary,
               cursor: "pointer",
               display: "flex",
               alignItems: "center",
@@ -205,12 +234,12 @@ export const IDE: React.FC<IDEProps> = ({
               transition: "all 0.1s",
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.backgroundColor = c.border;
               e.currentTarget.style.color = "#fff";
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "#cccccc";
+              e.currentTarget.style.color = c.textPrimary;
             }}
             title="Go back"
           >

frontend/src/modules/ide/components/FilePicker.tsx

@@ -57,6 +57,7 @@ export const FilePicker: React.FC<FilePickerProps> = ({ files }) => {
       style={{
         height: "100%",
         overflowY: "auto",
+        backgroundColor: "var(--bg-primary)",
       }}
     >
       <FilePickerTree node={files} level={0} />

frontend/src/modules/ide/components/FilePickerItem.tsx

@@ -44,7 +44,7 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
           paddingLeft: `${paddingLeft}px`,
           paddingRight: "12px",
           height: "36px",
-          borderBottom: "1px solid #1a1a1a",
+          borderBottom: "1px solid var(--border)",
           cursor: "pointer",
           transition: "background-color 0.1s",
           gap: "8px",
@@ -57,7 +57,7 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
           }
         }}
         onMouseEnter={(e) => {
-          e.currentTarget.style.backgroundColor = "#2a2a2a";
+          e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.backgroundColor = "transparent";
@@ -65,7 +65,13 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
       >
         {/* Folder expand icon */}
         {isFolder && (
-          <span style={{ color: "#858585", display: "flex", flexShrink: 0 }}>
+          <span
+            style={{
+              color: "var(--text-secondary)",
+              display: "flex",
+              flexShrink: 0,
+            }}
+          >
             {isExpanded ? (
               <FiChevronDown size={14} />
             ) : (
@@ -77,9 +83,9 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
         {/* File/Folder icon */}
         <span style={{ display: "flex", flexShrink: 0 }}>
           {isFolder ? (
-            <FiFolder size={15} color="#dcb67a" />
+            <FiFolder size={15} color="var(--accent)" />
           ) : (
-            <FiFile size={15} color="#858585" />
+            <FiFile size={15} color="var(--text-secondary)" />
           )}
         </span>
 
@@ -87,7 +93,7 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
         <span
           style={{
             flex: 1,
-            color: "#cccccc",
+            color: "var(--text-primary)",
             fontSize: "13px",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -101,11 +107,11 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
         {!isFolder && extension && (
           <span
             style={{
-              color: "#858585",
+              color: "var(--text-secondary)",
               fontSize: "11px",
               fontFamily: "monospace",
               padding: "2px 6px",
-              backgroundColor: "#2a2a2a",
+              backgroundColor: "var(--bg-secondary)",
               borderRadius: "3px",
               flexShrink: 0,
             }}
@@ -120,7 +126,9 @@ export const FilePickerItem: React.FC<FilePickerItemProps> = ({
             style={{
               width: "18px",
               height: "18px",
-              border: isSelected ? "2px solid #0e639c" : "2px solid #555",
+              border: isSelected
+                ? "2px solid #0e639c"
+                : "2px solid var(--border)",
               borderRadius: "3px",
               backgroundColor: isSelected ? "#0e639c" : "transparent",
               display: "flex",