theming

2026-02-17 10:06:53 +00:00
parent 4cdd257735
commit 13e8866875
54 changed files with 2537 additions and 76 deletions
@@ -55,8 +55,8 @@ export function App() {
          <Route path="/chat/:sessionId" element={<ClaudeChat />} />
          <Route path="/chat/opencode/new" element={<OpenCodeChat />} />
          <Route path="/chat/opencode/:sessionId" element={<OpenCodeChat />} />
-          {plugins?.FileBrowser !== false && <Route path="/files" element={<Files />} />}
-          {plugins?.Terminal !== false && <Route path="/terminal" element={<Terminal />} />}
+          <Route path="/files" element={<Files />} />
+          <Route path="/terminal" element={<Terminal />} />
          <Route path="/plans" element={<Plans />} />
          <Route path="/skills" element={<Skills />} />
          <Route path="/tasks" element={<Tasks />} />
@@ -1,49 +0,0 @@
-import { Palette, Sun, Moon } from 'lucide-react';
-import { useTheme } from '@/components/ui/ThemeProvider';
-import { Card } from '@/components/Card';
-import { useSettings } from '@/state/useSettings';
-
-export const Appearance = () => {
-  const { settings, saveSettings } = useSettings();
-  const { theme, setTheme } = useTheme();
-
-  const handleThemeChange = (newTheme: string) => {
-    setTheme(newTheme);
-    saveSettings({ ...settings, appearance: { ...settings.appearance, theme: newTheme } });
-  };
-
-  return (
-    <Card className="p-6 h-fit">
-      <div className="flex items-center gap-3 mb-6">
-        <Palette className="h-5 w-5 text-duck-forest" />
-        <h2 className="text-xl font-bold text-duck-dark">Appearance</h2>
-      </div>
-
-      <div className="grid gap-3">
-        <span className="text-duck-dark/70 text-sm">Theme</span>
-        <div className="flex items-center border border-duck-dark/20 rounded-md overflow-hidden">
-          <button
-            type="button"
-            onClick={() => handleThemeChange('light')}
-            className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium cursor-pointer transition-colors ${
-              theme === 'light' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-dark/50 hover:bg-duck-dark/5'
-            }`}
-          >
-            <Sun className="h-4 w-4" />
-            Light
-          </button>
-          <button
-            type="button"
-            onClick={() => handleThemeChange('dark')}
-            className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium cursor-pointer transition-colors ${
-              theme === 'dark' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-dark/50 hover:bg-duck-dark/5'
-            }`}
-          >
-            <Moon className="h-4 w-4" />
-            Dark
-          </button>
-        </div>
-      </div>
-    </Card>
-  );
-};
@@ -0,0 +1,31 @@
+import { useSettings } from '@/state/useSettings';
+import { themes } from 'themes';
+
+export const Appearance = () => {
+  const { settings, saveSettings } = useSettings();
+
+  const handleColorThemeChange = (colorTheme: string) => {
+    saveSettings({ ...settings, appearance: { ...settings.appearance, colorTheme } });
+  };
+
+  const activeColorTheme = settings.appearance.colorTheme ?? 'DuckPond';
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 pt-2">
+      {themes.map((t) => (
+        <button
+          key={t.id}
+          type="button"
+          onClick={() => handleColorThemeChange(t.id)}
+          className={`rounded-md px-3 py-2.5 text-sm font-medium cursor-pointer transition-colors ${
+            activeColorTheme === t.id
+              ? 'bg-duck-teal text-white ring-2 ring-duck-teal/50'
+              : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+          }`}
+        >
+          {t.name}
+        </button>
+      ))}
+    </div>
+  );
+};
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
-import { Search, User, Lock, Globe, ListChecks } from 'lucide-react';
+import { Search, User, Lock, Globe, ListChecks, Palette } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
 import { Card } from '@/components/Card';
@@ -8,6 +8,7 @@ import { UserData } from './UserData';
 import { ChangePassword } from './ChangePassword';
 import { Languages } from './Languages';
 import { TaskDefaults } from './TaskDefaults';
+import { Appearance } from './Appearance';

 const sections = [
  {
@@ -17,6 +18,13 @@ const sections = [
    description: 'Update your name and avatar.',
    content: <UserData />,
  },
+  {
+    key: 'appearance',
+    icon: Palette,
+    title: 'Appearance',
+    description: 'Color theme and light/dark mode.',
+    content: <Appearance />,
+  },
  {
    key: 'tasks',
    icon: ListChecks,
@@ -2,7 +2,6 @@ import { Link } from 'react-router';
 import { Bot, ChevronRight } from 'lucide-react';
 import { Card } from '@/components/Card';
 import { DashboardLayout } from '../Layout';
-import { Appearance } from './Appearance';

 export const Settings = () => {
  return (
@@ -23,7 +22,6 @@ export const Settings = () => {
              </div>
            </Card>
          </Link>
-          <Appearance />
        </div>
      </div>
    </DashboardLayout>
@@ -7,6 +7,17 @@ import { Toaster } from '@/components/ui/toaster';
 import { Toaster as Sonner } from 'sonner';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import 'themes/DuckPond/client';
+import 'themes/TokyoNight/client';
+import 'themes/CatppuccinLatte/client';
+import 'themes/CatppuccinMocha/client';
+import 'themes/Everforest/client';
+import 'themes/Gruvbox/client';
+import 'themes/Kanagawa/client';
+import 'themes/MatteBlack/client';
+import 'themes/Nord/client';
+import 'themes/OsakaJade/client';
+import 'themes/Ristretto/client';
+import 'themes/RosePine/client';
 import './styles/index.css';

 const headLinks = [
@@ -16,6 +16,7 @@ export type UserSettings = {
  };
  appearance: {
    theme: string;
+    colorTheme: string;
  };
  languages: {
    spoken: string[];
@@ -44,6 +45,7 @@ export const DEFAULT_SETTINGS: UserSettings = {
  },
  appearance: {
    theme: 'light',
+    colorTheme: 'DuckPond',
  },
  languages: {
    spoken: ['en'],
@@ -1,32 +1,48 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useTheme } from '@/components/ui/ThemeProvider';
 import { useSettings } from './useSettings';
-import { DEFAULT_SETTINGS } from './types/user-settings';
+
+const THEME_MODES: Record<string, 'light' | 'dark'> = {
+  DuckPond: 'light',
+  TokyoNight: 'dark',
+  CatppuccinLatte: 'light',
+  CatppuccinMocha: 'dark',
+  Everforest: 'dark',
+  Gruvbox: 'dark',
+  Kanagawa: 'dark',
+  MatteBlack: 'dark',
+  Nord: 'dark',
+  OsakaJade: 'dark',
+  Ristretto: 'dark',
+  RosePine: 'dark',
+};
+
+const BG_IMAGES: Record<string, string> = {
+  DuckPond: 'url(/static/landscape1.jpg)',
+};

 export const useThemeSync = () => {
-  const { settings, saveSettings } = useSettings();
+  const { settings } = useSettings();
  const { setTheme } = useTheme();
-  const migrated = useRef(false);

  useEffect(() => {
    if (!settings) return;
+    const colorTheme = settings.appearance.colorTheme ?? 'DuckPond';
+    const root = document.documentElement;

-    // One-time migration: if settings are default and localStorage has a theme, save it
-    if (!migrated.current) {
-      migrated.current = true;
-      const lsTheme = localStorage.getItem('officer-theme');
-      if (
-        lsTheme &&
-        settings.appearance.theme === DEFAULT_SETTINGS.appearance.theme &&
-        lsTheme !== settings.appearance.theme
-      ) {
-        const updated = { ...settings, appearance: { ...settings.appearance, theme: lsTheme } };
-        saveSettings(updated);
-        setTheme(lsTheme);
-        return;
-      }
+    // Set data attribute for CSS scoping (DuckPond uses :root as default)
+    if (colorTheme === 'DuckPond') {
+      root.removeAttribute('data-color-theme');
+    } else {
+      root.setAttribute('data-color-theme', colorTheme);
    }

-    setTheme(settings.appearance.theme);
-  }, [settings?.appearance.theme]);
+    // Set light/dark class based on theme mode
+    const mode = THEME_MODES[colorTheme] ?? 'light';
+    setTheme(mode);
+
+    // Set background image
+    const bgImage = BG_IMAGES[colorTheme] ?? 'none';
+    root.style.setProperty('--page-bg-image', bgImage);
+  }, [settings?.appearance?.colorTheme]);
 };