feat: add theming system with color palettes, wallpapers, and transparency controls

apps/web/src/appSettings.ts

@@ -24,6 +24,18 @@ const AppSettingsSchema = Schema.Struct({
   customCodexModels: Schema.Array(Schema.String).pipe(
     Schema.withConstructorDefault(() => Option.some([])),
   ),
+  colorThemeId: Schema.String.pipe(
+    Schema.withConstructorDefault(() => Option.some("")),
+  ),
+  backgroundImage: Schema.String.pipe(
+    Schema.withConstructorDefault(() => Option.some("")),
+  ),
+  backgroundOpacity: Schema.Number.pipe(
+    Schema.withConstructorDefault(() => Option.some(0.85)),
+  ),
+  backgroundBlur: Schema.Number.pipe(
+    Schema.withConstructorDefault(() => Option.some(0)),
+  ),
 });
 export type AppSettings = typeof AppSettingsSchema.Type;
 export interface AppModelOption {
@@ -71,6 +83,8 @@ function normalizeAppSettings(settings: AppSettings): AppSettings {
   return {
     ...settings,
     customCodexModels: normalizeCustomModelSlugs(settings.customCodexModels, "codex"),
+    backgroundOpacity: Math.min(1.0, Math.max(0.1, settings.backgroundOpacity)),
+    backgroundBlur: Math.min(32, Math.max(0, settings.backgroundBlur)),
   };
 }
 

apps/web/src/components/BackgroundLayer.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+
+import { useAppSettings } from "../appSettings";
+import { getInteractiveOpacityRate, interactiveOpacity, nestedOpacity } from "../lib/colorThemes";
+import { resolveBackgroundImageUrl } from "../lib/wallpapers";
+
+export function BackgroundLayer() {
+  const { settings } = useAppSettings();
+  const { backgroundImage, backgroundOpacity, backgroundBlur, colorThemeId } = settings;
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (backgroundImage) {
+      root.setAttribute("data-has-wallpaper", "true");
+
+      const rate = getInteractiveOpacityRate(colorThemeId || undefined);
+      const overlayPct = `${Math.round(backgroundOpacity * 100)}%`;
+      const interactivePct = `${Math.round(interactiveOpacity(backgroundOpacity, rate * 0.4) * 100)}%`;
+      const nestedPct = `${Math.round(nestedOpacity(backgroundOpacity, rate) * 100)}%`;
+
+      root.style.setProperty("--wp-overlay", overlayPct);
+      root.style.setProperty("--wp-interactive", interactivePct);
+      root.style.setProperty("--wp-nested", nestedPct);
+    } else {
+      root.removeAttribute("data-has-wallpaper");
+      root.style.removeProperty("--wp-overlay");
+      root.style.removeProperty("--wp-interactive");
+      root.style.removeProperty("--wp-nested");
+    }
+    return () => {
+      root.removeAttribute("data-has-wallpaper");
+      root.style.removeProperty("--wp-overlay");
+      root.style.removeProperty("--wp-interactive");
+      root.style.removeProperty("--wp-nested");
+    };
+  }, [backgroundImage, backgroundOpacity, colorThemeId]);
+
+  if (!backgroundImage) return null;
+
+  const imageUrl = resolveBackgroundImageUrl(backgroundImage);
+  const overlayPercent = Math.round(backgroundOpacity * 100);
+
+  return (
+    <>
+      {/* Wallpaper image layer */}
+      <div
+        className="pointer-events-none fixed"
+        style={{
+          zIndex: -20,
+          inset: `-${backgroundBlur + 8}px`,
+          backgroundImage: `url(${imageUrl})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+          filter: backgroundBlur > 0 ? `blur(${backgroundBlur}px)` : undefined,
+        }}
+      />
+      {/* Color overlay */}
+      <div
+        className="pointer-events-none fixed inset-0"
+        style={{
+          zIndex: -10,
+          backgroundColor: `color-mix(in srgb, var(--background) ${overlayPercent}%, transparent)`,
+        }}
+      />
+    </>
+  );
+}

apps/web/src/hooks/useColorTheme.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+import { useAppSettings } from "../appSettings";
+import { applyColorTheme } from "../lib/colorThemes";
+import { useTheme } from "./useTheme";
+
+export function useColorThemeEffect(): void {
+  const { resolvedTheme } = useTheme();
+  const { settings } = useAppSettings();
+  const { colorThemeId, backgroundImage } = settings;
+
+  useEffect(() => {
+    if (resolvedTheme === "dark" && colorThemeId) {
+      applyColorTheme(colorThemeId, !!backgroundImage);
+    } else {
+      applyColorTheme(null);
+    }
+  }, [resolvedTheme, colorThemeId, backgroundImage]);
+}

apps/web/src/index.css

@@ -120,6 +120,51 @@
   }
 }
 
+/*
+ * Wallpaper transparency system
+ *
+ * BackgroundLayer sets three CSS custom properties on :root:
+ *   --wp-overlay       raw opacity (e.g. "85%") — controls base overlay
+ *   --wp-interactive   interactiveOpacity result — sidebar, inputs (stays visible)
+ *   --wp-nested        nestedOpacity result — cards, headers (subtle tint)
+ *
+ * The overlay div (z-index: -10) uses --wp-overlay. UI panels reference the
+ * other two so interactive elements resist transparency changes.
+ */
+
+/* Fully transparent — let the overlay show through */
+:root[data-has-wallpaper] body,
+:root[data-has-wallpaper] .bg-background,
+:root[data-has-wallpaper] .bg-sidebar,
+:root[data-has-wallpaper] [data-slot="sidebar-inset"],
+:root[data-has-wallpaper] [data-slot="sidebar-inset"] > div,
+:root[data-has-wallpaper] [data-slot="sidebar-container"] {
+  background-color: transparent !important;
+}
+
+/* Interactive tier — inputs stay highly visible */
+:root[data-has-wallpaper] [data-slot="input-control"] {
+  background-color: color-mix(in srgb, var(--background) var(--wp-interactive, 97%), transparent) !important;
+}
+
+/* Chat header matches sidebar tint */
+:root[data-has-wallpaper] [data-slot="sidebar-inset"] > div > header {
+  background-color: color-mix(in srgb, var(--card) var(--wp-nested, 34%), transparent) !important;
+}
+
+/* Nested tier — sidebar, cards, panels, code blocks get a subtle tint */
+:root[data-has-wallpaper] [data-slot="sidebar-inner"] {
+  background-color: color-mix(in srgb, var(--card) var(--wp-nested, 34%), transparent) !important;
+}
+
+:root[data-has-wallpaper] .bg-card {
+  background-color: color-mix(in srgb, var(--card) var(--wp-nested, 34%), transparent) !important;
+}
+
+:root[data-has-wallpaper] .bg-muted {
+  background-color: color-mix(in srgb, var(--muted) var(--wp-nested, 34%), transparent) !important;
+}
+
 body {
   font-family:
     "DM Sans",