feat: themes

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",