feat: color updates (#527)

### TL;DR

Implemented a warm cave-inspired color theme across the application, replacing the previous gray palette with earthy tones.

### What changed?

- Updated the color palette in both light and dark themes to use warm, earthy tones inspired by caves
- Modified editor theme colors to match the new aesthetic
- Updated terminal colors to complement the new theme
- Adjusted StatusBar and RightSidebarContent components to use CSS variables for consistent theming

### How to test?

1. Run the application in both light and dark modes to verify the new color scheme
2. Check the code editor to ensure syntax highlighting is visually appealing
3. Open the terminal to confirm the colors match the new theme
4. Verify that the StatusBar and right sidebar components render correctly with the new colors
5. Test the application in different color gamuts (standard and P3) if possible

### Why make this change?

The warm cave-inspired theme provides a more cohesive and visually comfortable experience compared to the previous color scheme. The earthy tones create a natural, organic feel that reduces eye strain during extended use while maintaining good contrast for readability. This theme also gives the application a more distinctive visual identity.

Author: k11kirky

apps/array/src/renderer/components/StatusBar.tsx

@@ -13,7 +13,10 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
   const { statusText, keyHints } = useStatusBarStore();
 
   return (
-    <Box className="flex flex-row items-center justify-between border-gray-6 border-t bg-gray-2 px-4 py-2">
+    <Box
+      className="flex flex-row items-center justify-between border-t px-4 py-2"
+      style={{ backgroundColor: "var(--gray-2)", borderColor: "var(--gray-6)" }}
+    >
       <Flex align="center" gap="2">
         <StatusBarMenu />
         <Code size="1" variant="ghost" color="gray">

apps/array/src/renderer/features/code-editor/theme/editorTheme.ts

@@ -10,40 +10,42 @@ function withAlpha(hex: string, alpha: number): string {
   return `${hex}${a}`;
 }
 
+// Warm cave-inspired dark theme colors
 const dark = {
   chalky: "#e5c07b",
   coral: "#e06c75",
   cyan: "#56b6c2",
-  invalid: "#ffffff",
-  ivory: "#abb2bf",
-  stone: "#7d8799",
+  invalid: "#f7eddf",
+  ivory: "#c4baa8",
+  stone: "#8a8275",
   malibu: "#61afef",
   sage: "#98c379",
   whiskey: "#d19a66",
   violet: "#c678dd",
-  background: "#21252b",
-  highlightBackground: "#2c313a",
-  tooltipBackground: "#353a42",
-  selection: "#3E4451",
-  cursor: "#528bff",
+  background: "#1a1815",
+  highlightBackground: "#2a2621",
+  tooltipBackground: "#322e28",
+  selection: "#453f37",
+  cursor: "#f1a82c",
 };
 
+// Warm cave-inspired light theme colors
 const light = {
   chalky: "#c18401",
-  coral: "#e45649",
+  coral: "#c45649",
   cyan: "#0184bc",
-  invalid: "#000000",
-  ivory: "#383a42",
-  stone: "#a0a1a7",
+  invalid: "#2d2b29",
+  ivory: "#3d3832",
+  stone: "#9a9282",
   malibu: "#4078f2",
   sage: "#50a14f",
   whiskey: "#986801",
   violet: "#a626a4",
-  background: "#fafafa",
-  highlightBackground: "#d0d0d0",
-  tooltipBackground: "#f0f0f0",
-  selection: "#d7d7d7",
-  cursor: "#526fff",
+  background: "#f7eddf",
+  highlightBackground: "#ebe1d3",
+  tooltipBackground: "#f1e5d5",
+  selection: "#ddd5c7",
+  cursor: "#dc9300",
 };
 
 function createEditorTheme(colors: typeof dark, isDark: boolean) {
@@ -290,14 +292,14 @@ export const mergeViewTheme = EditorView.baseTheme({
     },
   },
   "&light .cm-collapsedLines": {
-    color: "#444",
+    color: "#3d3832",
     background:
-      "linear-gradient(to bottom, transparent 0, #f3f3f3 30%, #f3f3f3 70%, transparent 100%)",
+      "linear-gradient(to bottom, transparent 0, #ebe1d3 30%, #ebe1d3 70%, transparent 100%)",
   },
   "&dark .cm-collapsedLines": {
-    color: "#ddd",
+    color: "#c4baa8",
     background:
-      "linear-gradient(to bottom, transparent 0, #222 30%, #222 70%, transparent 100%)",
+      "linear-gradient(to bottom, transparent 0, #2a2621 30%, #2a2621 70%, transparent 100%)",
   },
   ".cm-changeGutter": { width: "3px", paddingLeft: "1px" },
   "&light.cm-merge-a .cm-changedLineGutter, &light .cm-deletedLineGutter": {

apps/array/src/renderer/features/right-sidebar/components/RightSidebarContent.tsx

@@ -48,7 +48,11 @@ export function RightSidebarContent({
   const [activeTab, setActiveTab] = useState<TabId>("changes");
 
   return (
-    <Flex direction="column" height="100%">
+    <Flex
+      direction="column"
+      height="100%"
+      style={{ backgroundColor: "var(--color-background)" }}
+    >
       <Flex
         style={{
           borderBottom: "1px solid var(--gray-6)",

apps/array/src/renderer/features/terminal/services/TerminalManager.ts

@@ -70,22 +70,23 @@ type EventType = keyof EventPayloadMap;
 type Listener<T extends EventType> = (payload: EventPayloadMap[T]) => void;
 
 function getTerminalTheme(isDarkMode: boolean) {
+  // Warm cave-inspired terminal colors
   return isDarkMode
     ? {
         background: "transparent",
-        foreground: "#eeeeea",
+        foreground: "#f7eddf",
         cursor: "#dc9300",
-        cursorAccent: "#eeeeea",
+        cursorAccent: "#f7eddf",
         selectionBackground: "rgba(255, 203, 129, 0.3)",
-        selectionForeground: "#eeeeea",
+        selectionForeground: "#f7eddf",
       }
     : {
         background: "transparent",
-        foreground: "#1f1f1f",
+        foreground: "#2d2b29",
         cursor: "#dc9300",
-        cursorAccent: "#1f1f1f",
+        cursorAccent: "#2d2b29",
         selectionBackground: "rgba(255, 189, 87, 0.4)",
-        selectionForeground: "#1f1f1f",
+        selectionForeground: "#2d2b29",
       };
 }