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",

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",

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",

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",

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",

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",

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",

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",