Feat/add clanker appearance select

src/components/layout/user-menu.tsx

@@ -1,6 +1,5 @@
 import { Link, useNavigate } from "@tanstack/react-router";
 import { ChevronDown, LogOut, Settings } from "lucide-react";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -76,9 +75,6 @@ export function UserMenu({ showIdentity = false, menuDirection = "down" }: UserM
               Settings
             </Link>
           </DropdownMenuItem>
-
-          <ThemeToggle variant="menu-item" />
-
           <DropdownMenuItem
             onSelect={() =>
               void signOut({

src/components/task-page-code-view.tsx

@@ -25,7 +25,7 @@ export function TaskPageCodeView({
   isRunnerBackedTask,
   preparingWorkspace,
 }: TaskPageCodeViewProps) {
-  const { theme } = useTheme();
+  const { mode } = useTheme();
 
   if (preparingWorkspace) {
     return (
@@ -96,7 +96,7 @@ export function TaskPageCodeView({
                 diffStyle: "split",
                 lineDiffType: "word",
                 overflow: "scroll",
-                themeType: theme,
+                themeType: mode,
               }}
               className="runner-diff-view"
             />

src/components/theme-provider.tsx

@@ -1,17 +1,24 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
 import { localStorageKeys } from "@/lib/session-state";
-import { applyTheme, defaultTheme, getStoredTheme, type Theme } from "@/lib/theme";
+import {
+  applyTheme,
+  type ClankerId,
+  defaultTheme,
+  getStoredTheme,
+  getThemeMode,
+  type ThemeMode,
+} from "@/lib/theme";
 
 type ThemeContextValue = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
+  theme: ClankerId;
+  mode: ThemeMode;
+  setTheme: (theme: ClankerId) => void;
 };
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>(defaultTheme);
+  const [theme, setThemeState] = useState<ClankerId>(defaultTheme);
 
   useEffect(() => {
     setThemeState(getStoredTheme());
@@ -21,7 +28,9 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     applyTheme(theme);
   }, [theme]);
 
-  const setTheme = (nextTheme: Theme) => {
+  const mode = getThemeMode(theme);
+
+  const setTheme = (nextTheme: ClankerId) => {
     setThemeState(nextTheme);
 
     if (typeof window === "undefined") {
@@ -35,14 +44,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
-  };
-
   return (
-    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
+    <ThemeContext.Provider value={{ theme, mode, setTheme }}>{children}</ThemeContext.Provider>
   );
 }
 

src/index.css

@@ -31,7 +31,8 @@
   --color-ring: var(--ring);
 }
 
-:root {
+:root,
+:root[data-theme="r2d2"] {
   --radius: 0.4rem;
   --background: #eaf1f8;
   --foreground: #0f2238;
@@ -57,29 +58,129 @@
   --body-grid: rgb(17 35 58 / 5%);
 }
 
-.dark {
-  --background: #101924;
-  --foreground: #edf4ff;
-  --card: #172332;
-  --card-foreground: #edf4ff;
-  --popover: #172332;
-  --popover-foreground: #edf4ff;
-  --primary: #7db7ff;
-  --primary-foreground: #0c1621;
-  --secondary: #2a3f56;
-  --secondary-foreground: #edf4ff;
-  --muted: #203043;
-  --muted-foreground: #a0b4ca;
-  --accent: #314d6b;
-  --accent-foreground: #edf4ff;
+:root[data-theme="bb8"] {
+  --background: #f5e6d4;
+  --foreground: #2c180d;
+  --card: #fffaf2;
+  --card-foreground: #2c180d;
+  --popover: #fffaf2;
+  --popover-foreground: #2c180d;
+  --primary: #e8791d;
+  --primary-foreground: #fff8ef;
+  --secondary: #e3c4a5;
+  --secondary-foreground: #3e2414;
+  --muted: #ead7c1;
+  --muted-foreground: #6a4326;
+  --accent: #f0bb84;
+  --accent-foreground: #2c180d;
+  --destructive: #c94a35;
+  --border: #744523;
+  --input: #fffdfa;
+  --ring: #e8791d;
+  --body-glow-primary: rgb(232 121 29 / 18%);
+  --body-glow-secondary: rgb(116 69 35 / 10%);
+  --body-glow-tertiary: rgb(255 250 242 / 44%);
+  --body-grid: rgb(44 24 13 / 5%);
+}
+
+:root[data-theme="bd1"] {
+  --background: #ecf6f4;
+  --foreground: #16343d;
+  --card: #f8fbfb;
+  --card-foreground: #16343d;
+  --popover: #f8fbfb;
+  --popover-foreground: #16343d;
+  --primary: #e3554f;
+  --primary-foreground: #fff7f6;
+  --secondary: #cfe4e2;
+  --secondary-foreground: #1e4953;
+  --muted: #dceceb;
+  --muted-foreground: #56727b;
+  --accent: #93d1cc;
+  --accent-foreground: #16343d;
+  --destructive: #c7443f;
+  --border: #2f8f92;
+  --input: #ffffff;
+  --ring: #2f8f92;
+  --body-glow-primary: rgb(47 143 146 / 16%);
+  --body-glow-secondary: rgb(227 85 79 / 10%);
+  --body-glow-tertiary: rgb(248 251 251 / 45%);
+  --body-grid: rgb(22 52 61 / 5%);
+}
+
+:root[data-theme="k2so"] {
+  --background: #111317;
+  --foreground: #eef2f5;
+  --card: #191d22;
+  --card-foreground: #eef2f5;
+  --popover: #191d22;
+  --popover-foreground: #eef2f5;
+  --primary: #f05a5a;
+  --primary-foreground: #170d0d;
+  --secondary: #2d333b;
+  --secondary-foreground: #eef2f5;
+  --muted: #20252c;
+  --muted-foreground: #a4acb7;
+  --accent: #464d57;
+  --accent-foreground: #eef2f5;
   --destructive: #ff7b7b;
-  --border: #5f7f9e;
-  --input: #122030;
-  --ring: #7db7ff;
-  --body-glow-primary: rgb(86 153 255 / 20%);
-  --body-glow-secondary: rgb(79 210 194 / 14%);
-  --body-glow-tertiary: rgb(9 13 20 / 38%);
-  --body-grid: rgb(237 244 255 / 4%);
+  --border: #8d96a3;
+  --input: #171b20;
+  --ring: #f05a5a;
+  --body-glow-primary: rgb(240 90 90 / 19%);
+  --body-glow-secondary: rgb(141 150 163 / 10%);
+  --body-glow-tertiary: rgb(7 8 10 / 40%);
+  --body-grid: rgb(238 242 245 / 4%);
+}
+
+:root[data-theme="ig11"] {
+  --background: #151816;
+  --foreground: #e3e7df;
+  --card: #202521;
+  --card-foreground: #e3e7df;
+  --popover: #202521;
+  --popover-foreground: #e3e7df;
+  --primary: #95a878;
+  --primary-foreground: #141713;
+  --secondary: #2e362f;
+  --secondary-foreground: #e3e7df;
+  --muted: #252c27;
+  --muted-foreground: #a6b0a0;
+  --accent: #485249;
+  --accent-foreground: #edf3e9;
+  --destructive: #d96f67;
+  --border: #7e8a78;
+  --input: #1b201c;
+  --ring: #95a878;
+  --body-glow-primary: rgb(149 168 120 / 17%);
+  --body-glow-secondary: rgb(93 103 91 / 13%);
+  --body-glow-tertiary: rgb(9 11 10 / 34%);
+  --body-grid: rgb(227 231 223 / 4%);
+}
+
+:root[data-theme="ig88"] {
+  --background: #131415;
+  --foreground: #e7eaee;
+  --card: #1c1f22;
+  --card-foreground: #e7eaee;
+  --popover: #1c1f22;
+  --popover-foreground: #e7eaee;
+  --primary: #c98f43;
+  --primary-foreground: #18110a;
+  --secondary: #2a2e33;
+  --secondary-foreground: #e7eaee;
+  --muted: #22262a;
+  --muted-foreground: #9fa6af;
+  --accent: #3d434a;
+  --accent-foreground: #edf1f4;
+  --destructive: #db6a62;
+  --border: #8d949c;
+  --input: #171a1c;
+  --ring: #c98f43;
+  --body-glow-primary: rgb(201 143 67 / 16%);
+  --body-glow-secondary: rgb(141 148 156 / 10%);
+  --body-glow-tertiary: rgb(6 7 8 / 40%);
+  --body-grid: rgb(231 234 238 / 4%);
 }
 
 html,

src/lib/session-state.ts

@@ -146,8 +146,8 @@ export const localStorageKeys = {
       "last-used-task-model",
     ),
   theme: () =>
-    createStorageStateKey<"light" | "dark">("local", "theme", {
-      parse: (value) => (value === "dark" ? "dark" : "light"),
+    createStorageStateKey<string>("local", "theme", {
+      parse: (value) => value,
       serialize: (value) => value,
     }),
 };