winfunc · salmonumbrella · Jun 23, 2025 · Jun 23, 2025
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,6 +18,7 @@ import { MCPManager } from "@/components/MCPManager";
 import { NFOCredits } from "@/components/NFOCredits";
 import { ClaudeBinaryDialog } from "@/components/ClaudeBinaryDialog";
 import { Toast, ToastContainer } from "@/components/ui/toast";
+import { applyTheme } from "@/lib/theme";
 
 type View = "welcome" | "projects" | "agents" | "editor" | "settings" | "claude-file-editor" | "claude-code-session" | "usage-dashboard" | "mcp";
 
@@ -37,6 +38,15 @@ function App() {
   const [showClaudeBinaryDialog, setShowClaudeBinaryDialog] = useState(false);
   const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" } | null>(null);
 
+  // Apply theme on initial load
+  useEffect(() => {
+    api.getClaudeSettings().then((s) => {
+      if (s && typeof s === 'object' && s.theme) {
+        applyTheme(s.theme as any);
+      }
+    }).catch(() => {});
+  }, []);
+
   // Load projects on mount when in projects view
   useEffect(() => {
     if (view === "projects") {

diff --git a/src/assets/shimmer.css b/src/assets/shimmer.css
@@ -87,7 +87,7 @@
     105deg,
     currentColor 0%,
     currentColor 40%,
-    #d97757 50%,
+    var(--shimmer-color) 50%,
     currentColor 60%,
     currentColor 100%
   );
@@ -101,7 +101,7 @@
 
 .rotating-symbol {
   display: inline-block;
-  color: #d97757;
+  color: var(--shimmer-color);
   font-size: inherit;
   margin-right: 0.5rem;
   font-weight: bold;

diff --git a/src/components/AgentExecutionDemo.tsx b/src/components/AgentExecutionDemo.tsx
@@ -103,8 +103,8 @@ export const AgentExecutionDemo: React.FC = () => {
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     line-height: 1.6;
-    color: #333;
-    background: #f8fafc;
+    color: #cdd6f4;
+    background: #1e1e2e;
     min-height: 100vh;
 }
 
@@ -124,12 +124,12 @@ body {
 .header h1 {
     font-size: 2.5rem;
     font-weight: 700;
-    color: #1a202c;
+    color: #cdd6f4;
     margin-bottom: 8px;
 }
 
 .header p {
-    color: #718096;
+    color: #a6adc8;
     font-size: 1.1rem;
 }
 
@@ -142,22 +142,22 @@ body {
 
 /* Drop Zone */
 .drop-zone {
-    border: 2px dashed #cbd5e0;
+    border: 2px dashed #45475a;
     border-radius: 12px;
     padding: 40px 20px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s ease;
-    background: white;
+    background: #1e1e2e;
     position: relative;
 }
 
 .drop-zone:hover,
 .drop-zone.drag-over {
-    border-color: #4299e1;
-    background: #ebf8ff;
+    border-color: #89b4fa;
+    background: #313244;
     transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(66, 153, 225, 0.1);
+    box-shadow: 0 8px 25px rgba(137, 180, 250, 0.1);
 }
 
 /* ... many more lines of CSS ... */

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -23,6 +23,7 @@ import {
   type ClaudeSettings
 } from "@/lib/api";
 import { cn } from "@/lib/utils";
+import { applyTheme } from "@/lib/theme";
 import { Toast, ToastContainer } from "@/components/ui/toast";
 
 interface SettingsProps {
@@ -92,6 +93,9 @@ export const Settings: React.FC<SettingsProps> = ({
       }
 
       setSettings(loadedSettings);
+      if (loadedSettings.theme) {
+        applyTheme(loadedSettings.theme as any);
+      }
 
       // Parse permissions
       if (loadedSettings.permissions && typeof loadedSettings.permissions === 'object') {
@@ -159,6 +163,9 @@ export const Settings: React.FC<SettingsProps> = ({
 
       await api.saveClaudeSettings(updatedSettings);
       setSettings(updatedSettings);
+      if (updatedSettings.theme) {
+        applyTheme(updatedSettings.theme as any);
+      }
       setToast({ message: "Settings saved successfully!", type: "success" });
     } catch (err) {
       console.error("Failed to save settings:", err);
@@ -372,6 +379,25 @@ export const Settings: React.FC<SettingsProps> = ({
                         onCheckedChange={(checked) => updateSetting("verbose", checked)}
                       />
                     </div>
+
+                    {/* Catppuccin Mocha Theme */}
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-0.5 flex-1">
+                        <Label htmlFor="theme">Catppuccin Mocha Theme</Label>
+                        <p className="text-xs text-muted-foreground">
+                          Enable the Catppuccin color palette
+                        </p>
+                      </div>
+                      <Switch
+                        id="theme"
+                        checked={settings?.theme === 'catppuccin'}
+                        onCheckedChange={(checked) => {
+                          const theme = checked ? 'catppuccin' : 'dark';
+                          updateSetting('theme', theme);
+                          applyTheme(theme as any);
+                        }}
+                      />
+                    </div>
 
                     {/* Cleanup Period */}
                     <div className="space-y-2">

diff --git a/src/components/UsageDashboard.tsx b/src/components/UsageDashboard.tsx
@@ -499,9 +499,9 @@ export const UsageDashboard: React.FC<UsageDashboardProps> = ({ onBack }) => {
                                 </div>
 
                                 {/* Bar */}
-                                <div 
-                                  className="w-full bg-[#d97757] hover:opacity-80 transition-opacity rounded-t cursor-pointer"
-                                  style={{ height: `${heightPercent}%` }}
+                                <div
+                                  className="w-full hover:opacity-80 transition-opacity rounded-t cursor-pointer"
+                                  style={{ height: `${heightPercent}%`, backgroundColor: 'var(--usage-bar-color)' }}
                                 />
 
                                 {/* X-axis label – absolutely positioned below the bar so it doesn't affect bar height */}

diff --git a/src/lib/claudeSyntaxTheme.ts b/src/lib/claudeSyntaxTheme.ts
@@ -4,7 +4,7 @@
  */
 export const claudeSyntaxTheme: any = {
   'code[class*="language-"]': {
-    color: '#e3e8f0',
+    color: '#cdd6f4',
     background: 'transparent',
     textShadow: 'none',
     fontFamily: 'var(--font-mono)',
@@ -24,7 +24,7 @@ export const claudeSyntaxTheme: any = {
     hyphens: 'none',
   },
   'pre[class*="language-"]': {
-    color: '#e3e8f0',
+    color: '#cdd6f4',
     background: 'transparent',
     textShadow: 'none',
     fontFamily: 'var(--font-mono)',
@@ -53,94 +53,94 @@ export const claudeSyntaxTheme: any = {
     whiteSpace: 'normal',
   },
   'comment': {
-    color: '#6b7280',
+    color: '#6c7086',
     fontStyle: 'italic',
   },
   'prolog': {
-    color: '#6b7280',
+    color: '#6c7086',
   },
   'doctype': {
-    color: '#6b7280',
+    color: '#6c7086',
   },
   'cdata': {
-    color: '#6b7280',
+    color: '#6c7086',
   },
   'punctuation': {
-    color: '#9ca3af',
+    color: '#a6adc8',
   },
   'namespace': {
     opacity: '0.7',
   },
   'property': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
   },
   'tag': {
-    color: '#8b5cf6', // Violet
+    color: '#cba6f7', // Violet
   },
   'boolean': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
   },
   'number': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
   },
   'constant': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
   },
   'symbol': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
   },
   'deleted': {
-    color: '#ef4444',
+    color: '#f38ba8',
   },
   'selector': {
-    color: '#a78bfa', // Light Purple
+    color: '#b4befe', // Light Purple
   },
   'attr-name': {
-    color: '#a78bfa', // Light Purple
+    color: '#b4befe', // Light Purple
   },
   'string': {
-    color: '#10b981', // Emerald Green
+    color: '#a6e3a1', // Emerald Green
   },
   'char': {
-    color: '#10b981', // Emerald Green
+    color: '#a6e3a1', // Emerald Green
   },
   'builtin': {
-    color: '#8b5cf6', // Violet
+    color: '#cba6f7', // Violet
   },
   'url': {
-    color: '#10b981', // Emerald Green
+    color: '#a6e3a1', // Emerald Green
   },
   'inserted': {
-    color: '#10b981', // Emerald Green
+    color: '#a6e3a1', // Emerald Green
   },
   'entity': {
-    color: '#a78bfa', // Light Purple
+    color: '#b4befe', // Light Purple
     cursor: 'help',
   },
   'atrule': {
-    color: '#c084fc', // Light Violet
+    color: '#cba6f7', // Light Violet
   },
   'attr-value': {
-    color: '#10b981', // Emerald Green
+    color: '#a6e3a1', // Emerald Green
   },
   'keyword': {
-    color: '#c084fc', // Light Violet
+    color: '#cba6f7', // Light Violet
   },
   'function': {
-    color: '#818cf8', // Indigo
+    color: '#89b4fa', // Indigo
   },
   'class-name': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
   },
   'regex': {
-    color: '#06b6d4', // Cyan
+    color: '#89dceb', // Cyan
   },
   'important': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
     fontWeight: 'bold',
   },
   'variable': {
-    color: '#a78bfa', // Light Purple
+    color: '#b4befe', // Light Purple
   },
   'bold': {
     fontWeight: 'bold',
@@ -149,27 +149,27 @@ export const claudeSyntaxTheme: any = {
     fontStyle: 'italic',
   },
   'operator': {
-    color: '#9ca3af',
+    color: '#a6adc8',
   },
   'script': {
-    color: '#e3e8f0',
+    color: '#cdd6f4',
   },
   'parameter': {
-    color: '#fbbf24', // Yellow
+    color: '#f9e2af', // Yellow
   },
   'method': {
-    color: '#818cf8', // Indigo
+    color: '#89b4fa', // Indigo
   },
   'field': {
-    color: '#f59e0b', // Amber/Orange
+    color: '#fab387', // Amber/Orange
   },
   'annotation': {
-    color: '#6b7280',
+    color: '#6c7086',
   },
   'type': {
-    color: '#a78bfa', // Light Purple
+    color: '#b4befe', // Light Purple
   },
   'module': {
-    color: '#8b5cf6', // Violet
+    color: '#cba6f7', // Violet
   },
 }; 
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
@@ -0,0 +1,10 @@
+export type Theme = 'dark' | 'catppuccin';
+
+export function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+  if (theme === 'catppuccin') {
+    root.classList.add('theme-catppuccin');
+  } else {
+    root.classList.remove('theme-catppuccin');
+  }
+}