diff --git a/.tests/frontend/terminal-sexy.test.js b/.tests/frontend/terminal-sexy.test.js
new file mode 100644
index 000000000..61a6a38bf
--- /dev/null
+++ b/.tests/frontend/terminal-sexy.test.js
@@ -0,0 +1,146 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import {
+  clearTerminalSexyCatalogCache,
+  groupTerminalSexyCatalog,
+  importTerminalSexyTheme,
+  loadTerminalSexyCatalog,
+  normalizeTerminalSexyCatalog,
+  searchTerminalSexyThemes,
+  selectTerminalSexyFeaturedThemes,
+} from "../../frontend/src/utils/terminalSexyThemes.js";
+
+const originalFetch = globalThis.fetch;
+const originalSetTimeout = globalThis.setTimeout;
+
+const scheme = {
+  name: "Solarized Dark",
+  background: "#002b36",
+  foreground: "#839496",
+  color: [
+    "#073642", "#dc322f", "#859900", "#b58900", "#268bd2", "#d33682", "#2aa198", "#eee8d5",
+    "#002b36", "#cb4b16", "#586e75", "#657b83", "#839496", "#6c71c4", "#93a1a1", "#fdf6e3",
+  ],
+};
+
+test.afterEach(() => {
+  globalThis.fetch = originalFetch;
+  globalThis.setTimeout = originalSetTimeout;
+  clearTerminalSexyCatalogCache();
+});
+
+test("terminal.sexy catalogs normalize and discard unsafe paths", () => {
+  const catalog = normalizeTerminalSexyCatalog(["base16/solarized.dark", "collection/Dawn", "../unsafe"]);
+  assert.deepEqual(catalog.map((entry) => entry.label), ["solarized", "Dawn"]);
+  assert.equal(catalog[0].appearance, "dark");
+  assert.equal(catalog[1].category, "collection");
+});
+
+test("terminal.sexy light and dark paths share one theme card", () => {
+  const catalog = normalizeTerminalSexyCatalog(["base16/solarized.dark", "base16/solarized.light"]);
+  const [group] = groupTerminalSexyCatalog(catalog);
+  assert.equal(group.label, "solarized");
+  assert.deepEqual(Object.keys(group.sources), ["dark", "light"]);
+});
+
+test("terminal.sexy featured themes choose five stable schemes", () => {
+  const catalog = normalizeTerminalSexyCatalog([
+    "base16/monokai.dark",
+    "base16/solarized.dark",
+    "base16/ocean.dark",
+    "collection/dawn",
+    "xcolors.net/zenburn",
+    "base16/3024.dark",
+  ]);
+  assert.deepEqual(
+    selectTerminalSexyFeaturedThemes(catalog).map((entry) => entry.path),
+    ["base16/monokai.dark", "base16/solarized.dark", "base16/ocean.dark", "collection/dawn", "xcolors.net/zenburn"],
+  );
+});
+
+test("terminal.sexy schemes can be searched and imported with variants", async () => {
+  const lightScheme = {
+    ...scheme,
+    name: "Solarized Light",
+    background: "#fdf6e3",
+    foreground: "#657b83",
+  };
+  globalThis.fetch = async (input) => {
+    const url = String(input);
+    if (url.endsWith("/index.json")) return new Response(JSON.stringify(["base16/solarized.dark", "base16/solarized.light"]));
+    if (url.endsWith("/base16/solarized.dark.json")) return new Response(JSON.stringify(scheme));
+    if (url.endsWith("/base16/solarized.light.json")) return new Response(JSON.stringify(lightScheme));
+    throw new Error(`Unexpected URL: ${url}`);
+  };
+
+  const [result] = await searchTerminalSexyThemes("solarized");
+  assert.equal(result.label, "solarized");
+  assert.deepEqual(Object.keys(result.sources), ["dark", "light"]);
+  const theme = await importTerminalSexyTheme(result);
+  assert.equal(theme.label, "solarized");
+  assert.equal(theme.appearance, "light");
+  assert.equal(theme.colors.chrome, "#fdf6e3");
+  assert.equal(theme.variants.dark.chrome, "#002b36");
+});
+
+test("paired terminal.sexy sources keep their declared light and dark modes", async () => {
+  const measuredDark = { ...scheme, name: "Measured dark light source", background: "#101010" };
+  globalThis.fetch = async (input) => {
+    const url = String(input);
+    if (url.endsWith("/base16/solarized.dark.json")) return new Response(JSON.stringify(scheme));
+    if (url.endsWith("/base16/solarized.light.json")) return new Response(JSON.stringify(measuredDark));
+    throw new Error(`Unexpected URL: ${url}`);
+  };
+
+  const theme = await importTerminalSexyTheme({
+    id: "terminal-sexy-solarized",
+    label: "solarized",
+    sources: {
+      dark: { path: "base16/solarized.dark" },
+      light: { path: "base16/solarized.light" },
+    },
+  });
+
+  assert.equal(theme.appearance, "light");
+  assert.equal(theme.colors.chrome, "#101010");
+  assert.equal(theme.variants.dark.chrome, "#002b36");
+});
+
+test("terminal.sexy catalog failures do not poison later retries", async () => {
+  let attempts = 0;
+  globalThis.fetch = async () => {
+    attempts += 1;
+    if (attempts === 1) return new Response("unavailable", { status: 503 });
+    return new Response(JSON.stringify(["base16/solarized.dark"]));
+  };
+
+  await assert.rejects(loadTerminalSexyCatalog(), /unavailable/);
+  const catalog = await loadTerminalSexyCatalog();
+  assert.equal(catalog[0].path, "base16/solarized.dark");
+  assert.equal(attempts, 2);
+});
+
+test("terminal.sexy catalog rejects malformed and oversized responses", async () => {
+  globalThis.fetch = async () => new Response("not json");
+  await assert.rejects(loadTerminalSexyCatalog(), /unavailable/);
+
+  clearTerminalSexyCatalogCache();
+  globalThis.fetch = async () => new Response(JSON.stringify(["x".repeat(256 * 1024)]));
+  await assert.rejects(loadTerminalSexyCatalog(), /unavailable/);
+});
+
+test("terminal.sexy catalog requests abort when they exceed the timeout", async () => {
+  let requestSignal;
+  globalThis.setTimeout = (callback) => {
+    callback();
+    return 1;
+  };
+  globalThis.fetch = async (_input, options) => {
+    requestSignal = options.signal;
+    throw new Error("aborted");
+  };
+
+  await assert.rejects(loadTerminalSexyCatalog(), /unavailable/);
+  assert.equal(requestSignal.aborted, true);
+});
diff --git a/.tests/frontend/theme-settings.test.js b/.tests/frontend/theme-settings.test.js
new file mode 100644
index 000000000..9c05464f4
--- /dev/null
+++ b/.tests/frontend/theme-settings.test.js
@@ -0,0 +1,20 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+
+test("main Themes cards do not expose modal-only scheme actions", async () => {
+  const source = await readFile(
+    new URL("../../frontend/src/pages/Settings/components/ThemeSettings.jsx", import.meta.url),
+    "utf8",
+  );
+  const sectionStart = source.indexOf('aria-labelledby="theme-themes-heading"');
+  const sectionEnd = source.indexOf("<SchemeSearchModal", sectionStart);
+  assert.ok(sectionStart >= 0);
+  assert.ok(sectionEnd > sectionStart);
+
+  const themesSection = source.slice(sectionStart, sectionEnd);
+  assert.equal(themesSection.includes("<SchemeCard"), false);
+  assert.equal(themesSection.includes("onPreview"), false);
+  assert.equal(themesSection.includes("onAdd"), false);
+  assert.equal(themesSection.includes("theme-settings__preview-note"), false);
+});
diff --git a/.tests/frontend/theme.test.js b/.tests/frontend/theme.test.js
index a6f3c0ede..2401ad5d9 100644
--- a/.tests/frontend/theme.test.js
+++ b/.tests/frontend/theme.test.js
@@ -1,12 +1,21 @@
 import test from "node:test";
 import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import { runInNewContext } from "node:vm";
 
 import {
+  applyThemePreview,
+  BUILT_IN_THEMES,
+  CUSTOM_THEMES_STORAGE_KEY,
+  getCustomThemes,
+  getThemeSettings,
+  installCustomTheme,
+  invalidateThemeCaches,
+  replaceCustomTheme,
   THEME_STORAGE_KEY,
-  getThemePreference,
-  normalizeThemePreference,
-  setThemePreference,
+  setThemeSelection,
 } from "../../frontend/src/utils/theme.js";
+import { parseTerminalSexyTheme } from "../../frontend/src/utils/terminalSexyThemes.js";
 
 const originalDocument = globalThis.document;
 const originalLocalStorage = globalThis.localStorage;
@@ -14,15 +23,51 @@ const originalLocalStorage = globalThis.localStorage;
 test.afterEach(() => {
   globalThis.document = originalDocument;
   globalThis.localStorage = originalLocalStorage;
+  invalidateThemeCaches();
 });
 
-test("theme preferences default invalid stored values to system", () => {
-  assert.equal(normalizeThemePreference("light"), "light");
-  assert.equal(normalizeThemePreference("dark"), "dark");
-  assert.equal(normalizeThemePreference("sepia"), "system");
-
-  globalThis.localStorage = { getItem: () => "sepia" };
-  assert.equal(getThemePreference(), "system");
+test("Aurral keeps the original light and dark palettes", () => {
+  const [aurral] = BUILT_IN_THEMES;
+  assert.deepEqual(
+    {
+      chrome: aurral.colors.chrome,
+      surface: aurral.colors.surface,
+      surfaceRaised: aurral.colors.surfaceRaised,
+      surfacePopover: aurral.colors.surfacePopover,
+      surfaceHover: aurral.colors.surfaceHover,
+      accent: aurral.colors.accent,
+      text: aurral.colors.text,
+    },
+    {
+      chrome: "#e5e7eb",
+      surface: "#ffffff",
+      surfaceRaised: "#f1f1f1",
+      surfacePopover: "#e4e4e4",
+      surfaceHover: "#d0d0d0",
+      accent: "#4d7c0f",
+      text: "#171717",
+    },
+  );
+  assert.deepEqual(
+    {
+      chrome: aurral.variants.dark.chrome,
+      surface: aurral.variants.dark.surface,
+      surfaceRaised: aurral.variants.dark.surfaceRaised,
+      surfacePopover: aurral.variants.dark.surfacePopover,
+      surfaceHover: aurral.variants.dark.surfaceHover,
+      accent: aurral.variants.dark.accent,
+      text: aurral.variants.dark.text,
+    },
+    {
+      chrome: "#000000",
+      surface: "#121212",
+      surfaceRaised: "#202020",
+      surfacePopover: "#2d2d2d",
+      surfaceHover: "#424242",
+      accent: "#84cc16",
+      text: "#ffffff",
+    },
+  );
 });
 
 test("theme preferences persist explicit themes and clear the system override", () => {
@@ -39,11 +84,134 @@ test("theme preferences persist explicit themes and clear the system override",
     setItem: (key, value) => stored.set(key, value),
   };
 
-  assert.equal(setThemePreference("light"), "light");
+  setThemeSelection("aurral", "light");
   assert.equal(attributes.get("data-theme"), "light");
   assert.equal(stored.get(THEME_STORAGE_KEY), "light");
 
-  assert.equal(setThemePreference("system"), "system");
+  setThemeSelection("aurral", "system");
   assert.equal(attributes.has("data-theme"), false);
   assert.equal(stored.get(THEME_STORAGE_KEY), "system");
 });
+
+test("temporary theme previews change the page without changing saved selection", () => {
+  const attributes = new Map();
+  const stored = new Map();
+  const styles = new Map();
+  globalThis.document = {
+    documentElement: {
+      style: {
+        setProperty: (name, value) => styles.set(name, value),
+        removeProperty: (name) => styles.delete(name),
+      },
+      removeAttribute: (name) => attributes.delete(name),
+      setAttribute: (name, value) => attributes.set(name, value),
+    },
+    querySelectorAll: () => [],
+  };
+  globalThis.localStorage = {
+    getItem: (key) => stored.get(key) ?? null,
+    setItem: (key, value) => stored.set(key, value),
+  };
+
+  const preview = {
+    id: "terminal-sexy-preview",
+    label: "Preview",
+    appearance: "dark",
+    colors: { ...BUILT_IN_THEMES[0].variants.dark, accent: "#ff00aa" },
+  };
+  applyThemePreview(preview, "dark");
+
+  assert.equal(styles.get("--aurral-accent"), "#ff00aa");
+  assert.equal(attributes.get("data-theme-id"), "terminal-sexy-preview");
+  assert.equal(stored.has(THEME_STORAGE_KEY), false);
+  assert.deepEqual(getThemeSettings(), { themeId: "aurral", appearance: "system" });
+});
+
+test("terminal.sexy ANSI colors become a complete Aurral palette", () => {
+  const source = {
+    name: "Example Dark",
+    background: "#1e1e1e",
+    foreground: "#d4d4d4",
+    color: [
+      "#000000", "#dc322f", "#859900", "#b58900", "#268bd2", "#d33682", "#2aa198", "#eee8d5",
+      "#073642", "#cb4b16", "#586e75", "#657b83", "#839496", "#6c71c4", "#93a1a1", "#fdf6e3",
+    ],
+  };
+
+  const theme = parseTerminalSexyTheme(source);
+  assert.equal(theme.label, "Example Dark");
+  assert.equal(theme.appearance, "dark");
+  assert.equal(theme.colors.chrome, "#1e1e1e");
+  assert.equal(theme.colors.accent, "#268bd2");
+  assert.equal(theme.colors.danger, "#dc322f");
+  assert.equal(Object.keys(theme.colors).length, BUILT_IN_THEMES[0] && Object.keys(BUILT_IN_THEMES[0].colors).length);
+});
+
+test("custom themes persist and restore their selected mode", () => {
+  const stored = new Map();
+  globalThis.localStorage = {
+    getItem: (key) => stored.get(key) ?? null,
+    setItem: (key, value) => stored.set(key, value),
+    removeItem: (key) => stored.delete(key),
+  };
+  globalThis.document = {
+    documentElement: {
+      style: { setProperty() {}, removeProperty() {} },
+      setAttribute() {},
+      removeAttribute() {},
+    },
+    querySelectorAll: () => [],
+  };
+
+  const theme = installCustomTheme({
+    id: "midnight-garden",
+    label: "Midnight garden",
+    appearance: "dark",
+    colors: { accent: "#6cc5ff" },
+  });
+  assert.equal(stored.has(CUSTOM_THEMES_STORAGE_KEY), true);
+  assert.equal(getCustomThemes()[0].id, theme.id);
+
+  replaceCustomTheme({ ...theme, variants: { light: { accent: "#e5b567" } } });
+  assert.equal(getCustomThemes()[0].variants.light.accent, "#e5b567");
+
+  setThemeSelection(theme.id, "dark");
+  assert.deepEqual(getThemeSettings(), { themeId: theme.id, appearance: "dark" });
+});
+
+test("theme bootstrap restores a saved custom palette before app startup", async () => {
+  const source = await readFile(new URL("../../frontend/public/theme.js", import.meta.url), "utf8");
+  const values = new Map();
+  const dataset = {};
+  const storage = new Map([
+    [THEME_STORAGE_KEY, "terminal-sexy-custom"],
+    ["aurralThemeAppearance:v1", "dark"],
+    [CUSTOM_THEMES_STORAGE_KEY, JSON.stringify([{
+      version: 1,
+      id: "terminal-sexy-custom",
+      name: "Custom",
+      appearance: "light",
+      colors: { chrome: "#eeeeee", surface: "#ffffff", accent: "#315fcb" },
+      variants: { dark: { chrome: "#101010", surface: "#181818", accent: "#6cc5ff" } },
+    }])],
+  ]);
+
+  runInNewContext(source, {
+    localStorage: { getItem: (key) => storage.get(key) ?? null },
+    matchMedia: () => ({ matches: false }),
+    document: {
+      documentElement: {
+        dataset,
+        style: {
+          setProperty: (name, value) => values.set(name, value),
+          removeProperty: () => {},
+        },
+      },
+    },
+  });
+
+  assert.equal(dataset.theme, "dark");
+  assert.equal(dataset.themeId, "terminal-sexy-custom");
+  assert.equal(values.get("--aurral-chrome"), "#101010");
+  assert.equal(values.get("--aurral-accent"), "#6cc5ff");
+});
diff --git a/docs/src/content/docs/using/overview.mdx b/docs/src/content/docs/using/overview.mdx
index 269d0fd7c..0638c4e5d 100644
--- a/docs/src/content/docs/using/overview.mdx
+++ b/docs/src/content/docs/using/overview.mdx
@@ -60,9 +60,12 @@ When you configure Ticketmaster, this section shows nearby concerts for specifie
 
 ![Aurral profile listening history](../../../assets/screenshots/profile-listening.webp)
 
-Profile contains appearance, listening history, Lidarr defaults, and personal preferences. Select
-**System**, **Light**, or **Dark** under **Appearance**. System follows the appearance setting of
-your device. Aurral saves the theme on the current device.
+Profile contains appearance, listening history, Lidarr defaults, and personal preferences. Under
+**Appearance**, choose a built-in palette, **System**, **Light**, or **Dark** mode. Aurral saves the
+selection on the current device. Browse the pre-existing terminal.sexy color schemes, preview them,
+and select them like any other theme. Matching light and dark schemes share one card and follow the
+selected mode; use **Find a scheme** to search the collection, preview results, and add the ones you
+want to keep in a modal.
 
 Aurral supports Last.fm, ListenBrainz, and Koito history.
 
diff --git a/frontend/public/theme.js b/frontend/public/theme.js
index 9bea5d324..03f9cc07a 100644
--- a/frontend/public/theme.js
+++ b/frontend/public/theme.js
@@ -1,4 +1,31 @@
 try {
   const theme = localStorage.getItem("aurralTheme");
-  if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
+  const appearance = localStorage.getItem("aurralThemeAppearance:v1");
+  const systemMode = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  const requestedMode = theme === "light" || theme === "dark"
+    ? theme
+    : appearance === "light" || appearance === "dark"
+      ? appearance
+      : systemMode;
+  const root = document.documentElement;
+  let mode = requestedMode;
+
+  if (theme && theme !== "system" && theme !== "light" && theme !== "dark") {
+    const storedThemes = JSON.parse(localStorage.getItem("aurralThemes:v1") || "[]");
+    const selected = Array.isArray(storedThemes) ? storedThemes.find((item) => item?.id === theme) : null;
+    const colors = selected?.variants?.[requestedMode] || selected?.colors;
+    if (selected?.variants?.[requestedMode]) mode = requestedMode;
+    else if (selected?.appearance === "light" || selected?.appearance === "dark") mode = selected.appearance;
+    if (root.style && colors && typeof colors === "object") {
+      for (const [role, value] of Object.entries(colors)) {
+        if (/^#[\da-f]{3,8}$/i.test(value)) {
+          root.style.setProperty(`--aurral-${role.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`, value);
+        }
+      }
+    }
+    root.dataset.themeId = theme;
+  }
+
+  root.dataset.theme = mode;
+  if (root.style) root.style.colorScheme = mode;
 } catch {}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 03f49fd44..f29047aee 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,6 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
+import { initializeTheme } from "./utils/theme.js";
+
+initializeTheme();
 
 if (!window.location.pathname.endsWith("/oauth.html")) {
   ReactDOM.createRoot(document.getElementById("root")).render(
diff --git a/frontend/src/pages/Settings/components/SettingsAccountTab.jsx b/frontend/src/pages/Settings/components/SettingsAccountTab.jsx
index 7de4cb8df..c400bc66d 100644
--- a/frontend/src/pages/Settings/components/SettingsAccountTab.jsx
+++ b/frontend/src/pages/Settings/components/SettingsAccountTab.jsx
@@ -1,12 +1,9 @@
 import { useState } from "react";
 import { resetDiscoveryFeedback } from "../../../utils/api/endpoints/discovery.js";
-import {
-  getThemePreference,
-  setThemePreference,
-} from "../../../utils/theme.js";
 import { SettingsInput, SettingsSelect } from "./SettingsField";
 import PillToggle from "../../../components/PillToggle";
 import { PlexSelfLinkSection } from "./PlexSelfLinkSection";
+import { ThemeSettings } from "./ThemeSettings";
 
 import { Link } from "react-router-dom";
 import { RotateCcw } from "lucide-react";
@@ -35,7 +32,6 @@ export function SettingsAccountTab({
   setSidebarArtEnabled,
 }) {
   const [resettingTastes, setResettingTastes] = useState(false);
-  const [theme, setTheme] = useState(getThemePreference);
 
   const handleResetDiscoveryTastes = async () => {
     if (resettingTastes) return;
@@ -91,25 +87,9 @@ export function SettingsAccountTab({
           <div className="settings-page__section-intro">
             <h3 className="settings-page__section-title">Appearance</h3>
           </div>
-          <fieldset className="settings-page__fields profile-settings__fields">
-            <div className="profile-settings__field">
-              <label className="profile-settings__label" htmlFor="profile-theme">
-                Theme
-              </label>
-              <SettingsSelect
-                id="profile-theme"
-                value={theme}
-                onChange={(event) => setTheme(setThemePreference(event.target.value))}
-              >
-                <option value="system">System</option>
-                <option value="light">Light</option>
-                <option value="dark">Dark</option>
-              </SettingsSelect>
-              <p className="settings-page__hint">
-                System follows the appearance setting of your device.
-              </p>
-            </div>
-            {profileVariant && showSidebarArt ? (
+          <ThemeSettings showSuccess={showSuccess} showError={showError} />
+          {profileVariant && showSidebarArt ? (
+            <fieldset className="settings-page__fields profile-settings__fields">
               <div className="profile-settings__field">
                 <label className="profile-settings__label" htmlFor="profile-sidebar-art">
                   Environment art
@@ -124,8 +104,8 @@ export function SettingsAccountTab({
                   Show the nightly or preview environment art in the sidebar.
                 </p>
               </div>
-            ) : null}
-          </fieldset>
+            </fieldset>
+          ) : null}
         </div>
 
         <div className="settings-page__section profile-settings__section">
diff --git a/frontend/src/pages/Settings/components/ThemeSettings.jsx b/frontend/src/pages/Settings/components/ThemeSettings.jsx
new file mode 100644
index 000000000..6b00f704b
--- /dev/null
+++ b/frontend/src/pages/Settings/components/ThemeSettings.jsx
@@ -0,0 +1,612 @@
+import { createPortal } from "react-dom";
+import { useEffect, useId, useRef, useState } from "react";
+import { Check, Loader2, Monitor, Moon, Palette, Plus, Search, Sun, Trash2, X } from "lucide-react";
+import TooltipButton from "../../../components/TooltipButton.jsx";
+import { useModalDialog } from "../../../hooks/useModalDialog.js";
+import {
+  applyThemePreview,
+  applyThemeSelection,
+  BUILT_IN_THEMES,
+  getCustomThemes,
+  getThemeColorsForMode,
+  getThemeSettings,
+  installCustomTheme,
+  removeCustomTheme,
+  replaceCustomTheme,
+  setThemeSelection,
+  THEME_APPEARANCES,
+  subscribeToCustomThemes,
+  subscribeToThemeChanges,
+} from "../../../utils/theme.js";
+import {
+  importTerminalSexyTheme,
+  loadTerminalSexyCatalog,
+  searchTerminalSexyThemes,
+  selectTerminalSexyFeaturedThemes,
+} from "../../../utils/terminalSexyThemes.js";
+import "./themeSettings.css";
+
+const APPEARANCE_OPTIONS = [
+  { id: "system", label: "System", Icon: Monitor },
+  { id: "light", label: "Light", Icon: Sun },
+  { id: "dark", label: "Dark", Icon: Moon },
+].filter((option) => THEME_APPEARANCES.includes(option.id));
+
+function previewMode(theme, mode) {
+  if (mode === "dark" && getThemeColorsForMode(theme, "dark")) return "dark";
+  if (mode === "light" && getThemeColorsForMode(theme, "light")) return "light";
+  return theme.appearance;
+}
+
+function ModePreview({ appearance }) {
+  const light = getThemeColorsForMode(BUILT_IN_THEMES[0], "light");
+  const dark = getThemeColorsForMode(BUILT_IN_THEMES[0], "dark");
+  const colors = appearance === "dark" ? dark : light;
+  return (
+    <span
+      className={`theme-settings__mode-preview is-${appearance}`}
+      style={{
+        "--theme-preview-canvas": colors.surface,
+        "--theme-preview-chrome": colors.chrome,
+        "--theme-preview-raised": colors.surfaceRaised,
+        "--theme-preview-border": colors.border,
+        "--theme-preview-text": colors.text,
+        "--theme-preview-muted": colors.textMuted,
+        "--theme-preview-accent": colors.accent,
+        "--theme-preview-light-canvas": light.surface,
+        "--theme-preview-light-chrome": light.chrome,
+        "--theme-preview-light-raised": light.surfaceRaised,
+        "--theme-preview-light-border": light.border,
+        "--theme-preview-light-text": light.text,
+        "--theme-preview-light-muted": light.textMuted,
+        "--theme-preview-light-accent": light.accent,
+        "--theme-preview-dark-canvas": dark.surface,
+        "--theme-preview-dark-chrome": dark.chrome,
+        "--theme-preview-dark-raised": dark.surfaceRaised,
+        "--theme-preview-dark-border": dark.border,
+        "--theme-preview-dark-text": dark.text,
+        "--theme-preview-dark-muted": dark.textMuted,
+        "--theme-preview-dark-accent": dark.accent,
+      }}
+      aria-hidden="true"
+    >
+      <span className="theme-settings__mode-preview-sidebar" />
+      <span className="theme-settings__mode-preview-main" />
+      <span className="theme-settings__mode-preview-panel" />
+    </span>
+  );
+}
+
+function AppearanceModeCard({ option, active, onSelect }) {
+  const Icon = option.Icon;
+  return (
+    <button
+      type="button"
+      className={`theme-settings__mode-card${active ? " is-active" : ""}`}
+      aria-pressed={active}
+      onClick={onSelect}
+    >
+      <ModePreview appearance={option.id} />
+      <span className="theme-settings__mode-card-label">
+        <Icon aria-hidden="true" />
+        {option.label}
+      </span>
+    </button>
+  );
+}
+
+function ThemeSwatch({ colors, loading = false }) {
+  return (
+    <span
+      className={`theme-settings__swatch${loading ? " is-loading" : ""}`}
+      style={colors ? { background: colors.surface, borderColor: colors.border } : undefined}
+      aria-hidden="true"
+    >
+      {colors ? (
+        <>
+          <span className="theme-settings__swatch-bar" style={{ background: colors.chrome }} />
+          <span className="theme-settings__swatch-line" style={{ background: colors.text }} />
+          <span className="theme-settings__swatch-line is-short" style={{ background: colors.textMuted }} />
+          <span className="theme-settings__swatch-accent" style={{ background: colors.accent }} />
+        </>
+      ) : <Palette />}
+    </span>
+  );
+}
+
+function ThemeCard({ theme, active, mode, custom, metaLabel, onSelect, onRemove }) {
+  const colors = getThemeColorsForMode(theme, previewMode(theme, mode)) || theme.colors;
+  return (
+    <div className={`theme-settings__card${active ? " is-active" : ""}${custom ? " is-custom" : ""}`}>
+      <button
+        type="button"
+        className="theme-settings__card-select"
+        aria-pressed={active}
+        onClick={onSelect}
+      >
+        <ThemeSwatch colors={colors} />
+        <span className="theme-settings__card-copy">
+          <span className="theme-settings__card-label">{theme.label}</span>
+          <span className="theme-settings__card-meta">{metaLabel || (custom ? "Added" : "Built in")}</span>
+        </span>
+        {active ? <Check className="theme-settings__active-icon" aria-hidden="true" /> : null}
+      </button>
+      {custom && onRemove ? (
+        <TooltipButton
+          type="button"
+          className="btn btn-icon btn-xs btn-ghost-danger theme-settings__remove"
+          onClick={onRemove}
+          label={`Remove ${theme.label}`}
+        >
+          <Trash2 aria-hidden="true" />
+        </TooltipButton>
+      ) : null}
+    </div>
+  );
+}
+
+function schemeModeLabel(scheme) {
+  const modes = Object.keys(scheme.sources || {}).filter((mode) => mode === "light" || mode === "dark");
+  return modes.length > 1 ? modes.join(" + ") : modes[0] || "classic";
+}
+
+function SchemeCard({ scheme, theme, mode, active, loading, installing, installBusy, installed, onPreview, onAdd }) {
+  const colors = theme ? getThemeColorsForMode(theme, previewMode(theme, mode)) || theme.colors : null;
+  return (
+    <article className={`theme-settings__scheme-card${active ? " is-previewing" : ""}`}>
+      <button
+        type="button"
+        className="theme-settings__scheme-preview"
+        aria-pressed={active}
+        aria-label={`Preview ${scheme.label}`}
+        onClick={onPreview}
+        disabled={loading || installing}
+      >
+        <ThemeSwatch colors={colors} loading={loading} />
+        <span className="theme-settings__card-copy">
+          <span className="theme-settings__card-label">{scheme.label}</span>
+          <span className="theme-settings__card-meta">{scheme.category} · {schemeModeLabel(scheme)}</span>
+        </span>
+        {active ? <span className="theme-settings__scheme-state">Preview</span> : null}
+      </button>
+      <div className="theme-settings__scheme-actions">
+        <button
+          type="button"
+          className="btn btn-ghost"
+          disabled={loading || installing || installBusy || installed}
+          onClick={onAdd}
+        >
+          {loading || installing ? <Loader2 className="theme-settings__spin" aria-hidden="true" /> : installed ? <Check aria-hidden="true" /> : <Plus aria-hidden="true" />}
+          {loading ? "Loading…" : installing ? "Adding…" : installed ? "Added" : "Add"}
+        </button>
+      </div>
+    </article>
+  );
+}
+
+function SchemeSearchModal({
+  open,
+  query,
+  results,
+  searching,
+  error,
+  previewing,
+  loading,
+  installing,
+  mode,
+  onClose,
+  onQueryChange,
+  onSearch,
+  onPreview,
+  onAdd,
+  isInstalled,
+  isPreviewing,
+  getTheme,
+  selectedThemeId,
+  onSelect,
+  onRemove,
+}) {
+  const titleId = useId();
+  const { dialogRef, handleBackdropClick } = useModalDialog({ open, onClose });
+  if (!open) return null;
+  return createPortal(
+    <div className="artist-modal-backdrop theme-settings__modal-backdrop" onClick={handleBackdropClick}>
+      <div
+        ref={dialogRef}
+        className="theme-settings__search-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+      >
+        <div className="theme-settings__modal-header">
+          <div>
+            <h3 id={titleId}>Find a scheme</h3>
+            <p>Search terminal.sexy, preview a scheme, then add it.</p>
+          </div>
+          <TooltipButton
+            type="button"
+            className="btn btn-icon btn-xs btn-ghost"
+            onClick={onClose}
+            label="Close"
+          >
+            <X aria-hidden="true" />
+          </TooltipButton>
+        </div>
+        <form className="theme-settings__search" role="search" onSubmit={(event) => { event.preventDefault(); onSearch(); }}>
+          <Search aria-hidden="true" />
+          <input
+            type="search"
+            value={query}
+            autoFocus
+            placeholder="Try Solarized, Monokai, or Dawn"
+            aria-label="Search terminal.sexy schemes"
+            onChange={(event) => onQueryChange(event.target.value)}
+          />
+          <button type="submit" className="btn btn-secondary" disabled={!query.trim() || searching || Boolean(installing)}>
+            {searching ? <Loader2 className="theme-settings__spin" aria-hidden="true" /> : <Search aria-hidden="true" />} Search
+          </button>
+        </form>
+        {previewing ? <p className="theme-settings__preview-note" role="status">Previewing {previewing.label}. Add it to keep this theme.</p> : null}
+        {error ? <p className="theme-settings__error" role="alert">{error}</p> : null}
+        {searching ? <p className="theme-settings__status" role="status"><Loader2 className="theme-settings__spin" aria-hidden="true" /> Finding schemes…</p> : null}
+        {results ? (
+          results.length ? (
+            <div className="theme-settings__grid">
+              {results.map((scheme) => {
+                const theme = getTheme(scheme);
+                return theme && isInstalled(scheme) ? (
+                  <ThemeCard
+                    key={scheme.id}
+                    theme={theme}
+                    active={selectedThemeId === theme.id && !previewing}
+                    mode={mode}
+                    custom
+                    onSelect={() => onSelect(theme.id)}
+                    onRemove={() => onRemove(theme)}
+                  />
+                ) : (
+                  <SchemeCard
+                    key={scheme.id}
+                    scheme={scheme}
+                    theme={theme}
+                    mode={mode}
+                    active={isPreviewing(scheme)}
+                    loading={loading === scheme.id}
+                    installing={installing === scheme.id}
+                    installBusy={Boolean(installing)}
+                    installed={isInstalled(scheme)}
+                    onPreview={() => void onPreview(scheme)}
+                    onAdd={() => void onAdd(scheme)}
+                  />
+                );
+              })}
+            </div>
+          ) : <p className="theme-settings__empty">No terminal.sexy schemes found. Try a broader search.</p>
+        ) : null}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export function ThemeSettings({ showSuccess, showError }) {
+  const [settings, setSettings] = useState(getThemeSettings);
+  const [customThemes, setCustomThemes] = useState(getCustomThemes);
+  const [featuredThemes, setFeaturedThemes] = useState(null);
+  const [featuredError, setFeaturedError] = useState("");
+  const [terminalSexySearchOpen, setTerminalSexySearchOpen] = useState(false);
+  const [terminalSexyQuery, setTerminalSexyQuery] = useState("");
+  const [terminalSexyResults, setTerminalSexyResults] = useState(null);
+  const [terminalSexySearching, setTerminalSexySearching] = useState(false);
+  const [terminalSexyInstalling, setTerminalSexyInstalling] = useState(null);
+  const [terminalSexyPreviewing, setTerminalSexyPreviewing] = useState(null);
+  const [terminalSexyLoading, setTerminalSexyLoading] = useState(null);
+  const [terminalSexyError, setTerminalSexyError] = useState("");
+  const themeCacheRef = useRef(new Map());
+  const searchAbortRef = useRef(null);
+  const previewAbortRef = useRef(null);
+  const previewRef = useRef(null);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    const refresh = () => {
+      const nextSettings = getThemeSettings();
+      setSettings(nextSettings);
+      setCustomThemes([...getCustomThemes()]);
+      if (previewRef.current) applyThemePreview(previewRef.current.theme, nextSettings.appearance);
+    };
+    const unsubscribeTheme = subscribeToThemeChanges(refresh);
+    const unsubscribeCustom = subscribeToCustomThemes(refresh);
+    return () => {
+      unsubscribeTheme();
+      unsubscribeCustom();
+    };
+  }, []);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    const controller = new AbortController();
+    const loadFeatured = async () => {
+      try {
+        const catalog = await loadTerminalSexyCatalog();
+        const schemes = selectTerminalSexyFeaturedThemes(catalog);
+        const resolved = await Promise.all(schemes.map(async (scheme) => {
+          try {
+            const theme = await importTerminalSexyTheme(scheme, { signal: controller.signal });
+            themeCacheRef.current.set(scheme.id, theme);
+            const existing = getCustomThemes().find((item) => item.id === theme.id);
+            if (existing && !existing.variants && theme.variants) {
+              try {
+                replaceCustomTheme(theme);
+                if (!previewRef.current && getThemeSettings().themeId === theme.id) applyThemeSelection(getThemeSettings());
+              } catch (migrationError) {
+                if (!controller.signal.aborted) setFeaturedError(migrationError instanceof Error ? migrationError.message : "An existing theme could not be updated.");
+              }
+            }
+            return { ...scheme, theme };
+          } catch (error) {
+            if (!controller.signal.aborted) setFeaturedError(error instanceof Error ? error.message : "Featured terminal.sexy schemes could not be loaded.");
+            return null;
+          }
+        }));
+        if (!controller.signal.aborted && mountedRef.current) {
+          const available = resolved.filter(Boolean);
+          setFeaturedThemes(available);
+          if (!available.length) setFeaturedError("Featured terminal.sexy schemes could not be loaded. Search to retry.");
+        }
+      } catch (error) {
+        if (!controller.signal.aborted && mountedRef.current) {
+          setFeaturedThemes([]);
+          setFeaturedError(error instanceof Error ? error.message : "Featured terminal.sexy schemes could not be loaded.");
+        }
+      }
+    };
+    void loadFeatured();
+    return () => controller.abort();
+  }, []);
+
+  useEffect(() => () => {
+    mountedRef.current = false;
+    searchAbortRef.current?.abort();
+    previewAbortRef.current?.abort();
+    if (previewRef.current) applyThemeSelection(getThemeSettings());
+  }, []);
+
+  const clearPreview = () => {
+    const hadPreview = Boolean(previewRef.current);
+    previewAbortRef.current?.abort();
+    previewAbortRef.current = null;
+    previewRef.current = null;
+    setTerminalSexyPreviewing(null);
+    setTerminalSexyLoading(null);
+    if (hadPreview) applyThemeSelection(getThemeSettings());
+  };
+
+  const rememberTheme = (scheme, theme) => {
+    themeCacheRef.current.set(scheme.id, theme);
+    return theme;
+  };
+
+  const handleModeChange = (appearance) => {
+    setThemeSelection(settings.themeId, appearance);
+    if (previewRef.current) applyThemePreview(previewRef.current.theme, appearance);
+  };
+
+  const handleSelect = (themeId) => {
+    clearPreview();
+    setThemeSelection(themeId, settings.appearance);
+  };
+
+  const openSearch = () => {
+    setTerminalSexyError("");
+    setTerminalSexyResults(null);
+    setTerminalSexySearchOpen(true);
+  };
+
+  const closeSearch = () => {
+    searchAbortRef.current?.abort();
+    searchAbortRef.current = null;
+    clearPreview();
+    setTerminalSexySearching(false);
+    setTerminalSexyError("");
+    setTerminalSexyResults(null);
+    setTerminalSexySearchOpen(false);
+  };
+
+  const handleTerminalSexySearch = async () => {
+    const query = terminalSexyQuery.trim();
+    if (!query) return;
+    searchAbortRef.current?.abort();
+    const controller = new AbortController();
+    searchAbortRef.current = controller;
+    setTerminalSexySearching(true);
+    setTerminalSexyError("");
+    setTerminalSexyResults(null);
+    try {
+      const results = await searchTerminalSexyThemes(query, { signal: controller.signal });
+      if (!controller.signal.aborted && mountedRef.current) setTerminalSexyResults(results);
+    } catch (searchError) {
+      if (!controller.signal.aborted && mountedRef.current) setTerminalSexyError(searchError instanceof Error ? searchError.message : "Terminal.sexy search failed.");
+    } finally {
+      if (searchAbortRef.current === controller && mountedRef.current) {
+        searchAbortRef.current = null;
+        setTerminalSexySearching(false);
+      }
+    }
+  };
+
+  const handleTerminalSexyPreview = async (scheme) => {
+    setTerminalSexyError("");
+    previewAbortRef.current?.abort();
+    previewAbortRef.current = null;
+    setTerminalSexyLoading(null);
+    const cached = themeCacheRef.current.get(scheme.id);
+    if (cached) {
+      previewRef.current = { schemeId: scheme.id, theme: cached };
+      setTerminalSexyPreviewing({ schemeId: scheme.id, label: scheme.label });
+      applyThemePreview(cached, settings.appearance);
+      return;
+    }
+    const controller = new AbortController();
+    previewAbortRef.current = controller;
+    setTerminalSexyLoading(scheme.id);
+    try {
+      const theme = rememberTheme(scheme, await importTerminalSexyTheme(scheme, { signal: controller.signal }));
+      if (!controller.signal.aborted && mountedRef.current) {
+        previewRef.current = { schemeId: scheme.id, theme };
+        setTerminalSexyPreviewing({ schemeId: scheme.id, label: scheme.label });
+        applyThemePreview(theme, settings.appearance);
+      }
+    } catch (previewError) {
+      if (!controller.signal.aborted && mountedRef.current) {
+        const message = previewError instanceof Error ? previewError.message : `Could not preview ${scheme.label}.`;
+        setTerminalSexyError(message);
+        showError?.(message);
+      }
+    } finally {
+      if (previewAbortRef.current === controller && mountedRef.current) {
+        previewAbortRef.current = null;
+        setTerminalSexyLoading(null);
+      }
+    }
+  };
+
+  const handleTerminalSexyInstall = async (scheme) => {
+    if (terminalSexyInstalling) return;
+    const existing = getCustomThemes().find((theme) => theme.id === scheme.id);
+    if (existing) {
+      clearPreview();
+      setThemeSelection(existing.id, settings.appearance);
+      setTerminalSexySearchOpen(false);
+      return;
+    }
+    setTerminalSexyInstalling(scheme.id);
+    setTerminalSexyError("");
+    try {
+      const theme = themeCacheRef.current.get(scheme.id) || await importTerminalSexyTheme(scheme);
+      const installed = installCustomTheme(theme);
+      clearPreview();
+      setThemeSelection(installed.id, settings.appearance);
+      setTerminalSexySearchOpen(false);
+      showSuccess?.(`${installed.label} added`);
+    } catch (installError) {
+      const message = installError instanceof Error ? installError.message : "That terminal.sexy scheme could not be added.";
+      setTerminalSexyError(message);
+      showError?.(message);
+    } finally {
+      setTerminalSexyInstalling(null);
+    }
+  };
+
+  const handleFeaturedThemeSelect = (scheme) => {
+    const existing = getCustomThemes().find((theme) => theme.id === scheme.theme.id);
+    try {
+      const installed = existing || installCustomTheme(scheme.theme);
+      clearPreview();
+      setThemeSelection(installed.id, settings.appearance);
+    } catch (selectError) {
+      const message = selectError instanceof Error ? selectError.message : `Could not select ${scheme.label}.`;
+      showError?.(message);
+    }
+  };
+
+  const handleRemove = (theme) => {
+    if (!window.confirm(`Remove the added theme “${theme.label}”?`)) return;
+    clearPreview();
+    removeCustomTheme(theme.id);
+    if (settings.themeId === theme.id) setThemeSelection(BUILT_IN_THEMES[0].id, settings.appearance);
+  };
+
+  const isInstalled = (scheme) => customThemes.some((theme) => theme.id === scheme.id);
+  const isPreviewing = (scheme) => terminalSexyPreviewing?.schemeId === scheme.id;
+  const featuredThemeIds = new Set((featuredThemes || []).map((scheme) => scheme.theme?.id).filter(Boolean));
+
+  return (
+    <div className="theme-settings">
+      <section className="theme-settings__section" aria-labelledby="theme-mode-heading">
+        <div className="theme-settings__section-heading">
+          <h4 id="theme-mode-heading">Color scheme</h4>
+        </div>
+        <div className="theme-settings__mode-grid" aria-label="Color scheme mode">
+          {APPEARANCE_OPTIONS.map((option) => (
+            <AppearanceModeCard
+              key={option.id}
+              option={option}
+              active={settings.appearance === option.id}
+              onSelect={() => handleModeChange(option.id)}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section className="theme-settings__section" aria-labelledby="theme-themes-heading">
+        <div className="theme-settings__section-heading">
+          <h4 id="theme-themes-heading">Themes</h4>
+          <div className="theme-settings__section-actions">
+            {featuredThemes === null ? <span className="theme-settings__section-status" role="status">Loading schemes…</span> : null}
+            <button type="button" className="btn btn-secondary" onClick={openSearch}>
+              <Search aria-hidden="true" /> Find a scheme
+            </button>
+          </div>
+        </div>
+        <div className="theme-settings__grid" aria-label="Themes">
+          {BUILT_IN_THEMES.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              active={settings.themeId === theme.id && !terminalSexyPreviewing}
+              mode={settings.appearance}
+              onSelect={() => handleSelect(theme.id)}
+            />
+          ))}
+          {featuredThemes ? featuredThemes.map((scheme) => (
+            <ThemeCard
+              key={scheme.id}
+              theme={scheme.theme}
+              metaLabel="terminal.sexy"
+              active={settings.themeId === scheme.theme.id && !terminalSexyPreviewing}
+              mode={settings.appearance}
+              onSelect={() => handleFeaturedThemeSelect(scheme)}
+            />
+          )) : null}
+          {customThemes.filter((theme) => !featuredThemeIds.has(theme.id)).map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              active={settings.themeId === theme.id && !terminalSexyPreviewing}
+              mode={settings.appearance}
+              custom
+              onSelect={() => handleSelect(theme.id)}
+              onRemove={() => handleRemove(theme)}
+            />
+          ))}
+        </div>
+        {featuredError ? <p className="theme-settings__error" role="alert">{featuredError}</p> : null}
+      </section>
+
+      <SchemeSearchModal
+        open={terminalSexySearchOpen}
+        query={terminalSexyQuery}
+        results={terminalSexyResults}
+        searching={terminalSexySearching}
+        error={terminalSexyError}
+        previewing={terminalSexyPreviewing}
+        loading={terminalSexyLoading}
+        installing={terminalSexyInstalling}
+        mode={settings.appearance}
+        onClose={closeSearch}
+        onQueryChange={setTerminalSexyQuery}
+        onSearch={() => void handleTerminalSexySearch()}
+        onPreview={handleTerminalSexyPreview}
+        onAdd={handleTerminalSexyInstall}
+        isInstalled={isInstalled}
+        isPreviewing={isPreviewing}
+        getTheme={(scheme) => themeCacheRef.current.get(scheme.id) || customThemes.find((theme) => theme.id === scheme.id)}
+        selectedThemeId={settings.themeId}
+        onSelect={handleSelect}
+        onRemove={handleRemove}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Settings/components/themeSettings.css b/frontend/src/pages/Settings/components/themeSettings.css
new file mode 100644
index 000000000..477428fd3
--- /dev/null
+++ b/frontend/src/pages/Settings/components/themeSettings.css
@@ -0,0 +1,543 @@
+.theme-settings {
+  display: grid;
+  gap: var(--aurral-space-section);
+}
+
+.theme-settings__section {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.theme-settings__section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.theme-settings__section-heading h4 {
+  margin: 0;
+  color: var(--aurral-text);
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.theme-settings__section-status {
+  margin-top: 0.2rem;
+  color: var(--aurral-text-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.theme-settings__section-status {
+  flex: 0 0 auto;
+  margin-top: 0;
+}
+
+.theme-settings__section-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.theme-settings__section-actions .btn {
+  min-height: 2rem;
+  padding-inline: 0.625rem;
+}
+
+.theme-settings__section-actions .btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.theme-settings__mode-grid,
+.theme-settings__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.theme-settings__mode-card {
+  display: grid;
+  gap: 0.45rem;
+  min-width: 0;
+  padding: 0.5rem;
+  border: 1px solid var(--aurral-border);
+  border-radius: var(--aurral-radius);
+  background: var(--aurral-surface);
+  color: var(--aurral-text);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
+}
+
+.theme-settings__mode-card:hover,
+.theme-settings__mode-card.is-active {
+  border-color: var(--aurral-border-strong);
+  background: var(--aurral-surface-hover);
+}
+
+.theme-settings__mode-card.is-active {
+  box-shadow: inset 0 0 0 1px var(--aurral-accent);
+}
+
+.theme-settings__mode-preview {
+  position: relative;
+  display: grid;
+  grid-template-columns: 19% minmax(0, 1fr) 22%;
+  gap: 1px;
+  aspect-ratio: 1.8;
+  min-height: 5.25rem;
+  overflow: hidden;
+  padding: 0.3rem;
+  border: 1px solid var(--theme-preview-border);
+  border-radius: var(--aurral-radius-sm);
+  background: var(--theme-preview-canvas);
+}
+
+.theme-settings__mode-preview.is-system {
+  background: linear-gradient(90deg, var(--theme-preview-dark-canvas) 0 50%, var(--theme-preview-light-canvas) 50% 100%);
+}
+
+.theme-settings__mode-preview-sidebar,
+.theme-settings__mode-preview-main,
+.theme-settings__mode-preview-panel {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--theme-preview-border);
+}
+
+.theme-settings__mode-preview-sidebar {
+  padding: 0.35rem 0.25rem;
+  border-radius: 0.25rem 0 0 0.25rem;
+  background:
+    linear-gradient(var(--theme-preview-text), var(--theme-preview-text)) 20% 18% / 70% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-muted), var(--theme-preview-muted)) 20% 38% / 60% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-muted), var(--theme-preview-muted)) 20% 58% / 72% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-muted), var(--theme-preview-muted)) 20% 78% / 55% 0.32rem no-repeat,
+    var(--theme-preview-chrome);
+}
+
+.theme-settings__mode-preview-main {
+  background:
+    linear-gradient(var(--theme-preview-accent), var(--theme-preview-accent)) 12% 18% / 58% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-text), var(--theme-preview-text)) 12% 38% / 78% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-muted), var(--theme-preview-muted)) 12% 55% / 52% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-border), var(--theme-preview-border)) 10% 82% / 80% 1rem no-repeat,
+    var(--theme-preview-canvas);
+}
+
+.theme-settings__mode-preview-main::after {
+  position: absolute;
+  right: 0.55rem;
+  bottom: 0.55rem;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--theme-preview-accent);
+  content: "";
+}
+
+.theme-settings__mode-preview-panel {
+  padding: 0.55rem 0.35rem;
+  border-radius: 0 0.25rem 0.25rem 0;
+  background:
+    linear-gradient(var(--theme-preview-accent), var(--theme-preview-accent)) 18% 18% / 80% 0.25rem no-repeat,
+    linear-gradient(var(--theme-preview-muted), var(--theme-preview-muted)) 18% 43% / 80% 0.25rem no-repeat,
+    linear-gradient(var(--theme-preview-muted), var(--theme-preview-muted)) 18% 68% / 65% 0.25rem no-repeat,
+    var(--theme-preview-raised);
+}
+
+.theme-settings__mode-preview.is-system .theme-settings__mode-preview-sidebar {
+  background:
+    linear-gradient(var(--theme-preview-dark-text), var(--theme-preview-dark-text)) 20% 18% / 70% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-dark-muted), var(--theme-preview-dark-muted)) 20% 38% / 60% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-dark-muted), var(--theme-preview-dark-muted)) 20% 58% / 72% 0.32rem no-repeat,
+    linear-gradient(var(--theme-preview-dark-muted), var(--theme-preview-dark-muted)) 20% 78% / 55% 0.32rem no-repeat,
+    var(--theme-preview-dark-chrome);
+}
+
+.theme-settings__mode-preview.is-system .theme-settings__mode-preview-main {
+  background:
+    linear-gradient(90deg, var(--theme-preview-dark-accent) 0 50%, var(--theme-preview-light-accent) 50% 100%) 12% 18% / 58% 0.32rem no-repeat,
+    linear-gradient(90deg, var(--theme-preview-dark-text) 0 50%, var(--theme-preview-light-text) 50% 100%) 12% 38% / 78% 0.32rem no-repeat,
+    linear-gradient(90deg, var(--theme-preview-dark-muted) 0 50%, var(--theme-preview-light-muted) 50% 100%) 12% 55% / 52% 0.32rem no-repeat,
+    linear-gradient(90deg, var(--theme-preview-dark-border) 0 50%, var(--theme-preview-light-border) 50% 100%) 10% 82% / 80% 1rem no-repeat,
+    linear-gradient(90deg, var(--theme-preview-dark-canvas) 0 50%, var(--theme-preview-light-canvas) 50% 100%);
+}
+
+.theme-settings__mode-preview.is-system .theme-settings__mode-preview-main::after {
+  background: var(--theme-preview-light-accent);
+}
+
+.theme-settings__mode-preview.is-system .theme-settings__mode-preview-panel {
+  background:
+    linear-gradient(var(--theme-preview-light-accent), var(--theme-preview-light-accent)) 18% 18% / 80% 0.25rem no-repeat,
+    linear-gradient(var(--theme-preview-light-muted), var(--theme-preview-light-muted)) 18% 43% / 80% 0.25rem no-repeat,
+    linear-gradient(var(--theme-preview-light-muted), var(--theme-preview-light-muted)) 18% 68% / 65% 0.25rem no-repeat,
+    var(--theme-preview-light-raised);
+}
+
+.theme-settings__mode-card-label {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.theme-settings__mode-card-label svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--aurral-text-muted);
+}
+
+.theme-settings__card,
+.theme-settings__scheme-card {
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--aurral-border);
+  border-radius: var(--aurral-radius);
+  background: var(--aurral-surface);
+  transition: border-color 180ms ease, background-color 180ms ease;
+}
+
+.theme-settings__card:hover,
+.theme-settings__card.is-active,
+.theme-settings__scheme-card:hover,
+.theme-settings__scheme-card.is-previewing {
+  border-color: var(--aurral-border-strong);
+  background: var(--aurral-surface-hover);
+}
+
+.theme-settings__card.is-active,
+.theme-settings__scheme-card.is-previewing {
+  box-shadow: inset 0 0 0 1px var(--aurral-accent);
+}
+
+.theme-settings__card-select,
+.theme-settings__scheme-preview {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  color: var(--aurral-text);
+  text-align: start;
+  cursor: pointer;
+}
+
+.theme-settings__card-select {
+  grid-template-columns: 3rem minmax(0, 1fr) auto;
+  min-height: 4.25rem;
+}
+
+.theme-settings__card.is-custom .theme-settings__card-select {
+  padding-right: 2.5rem;
+}
+
+.theme-settings__scheme-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.theme-settings__scheme-preview {
+  grid-template-columns: 3rem minmax(0, 1fr) auto;
+  min-height: 3.25rem;
+  padding: 0;
+}
+
+.theme-settings__scheme-preview:disabled {
+  cursor: wait;
+}
+
+.theme-settings__scheme-actions {
+  display: flex;
+  align-items: center;
+}
+
+.theme-settings__scheme-actions .btn {
+  min-width: 3.75rem;
+  min-height: 2rem;
+  padding-inline: 0.5rem;
+}
+
+.theme-settings__scheme-actions .btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.theme-settings__swatch {
+  position: relative;
+  display: grid;
+  width: 3rem;
+  height: 2.25rem;
+  overflow: hidden;
+  place-items: center;
+  border: 1px solid var(--aurral-border);
+  border-radius: var(--aurral-radius-sm);
+  color: var(--aurral-text-subtle);
+}
+
+.theme-settings__swatch > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.theme-settings__swatch-bar {
+  display: block;
+  width: 26%;
+  height: 100%;
+  opacity: 0.85;
+}
+
+.theme-settings__swatch-line {
+  position: absolute;
+  top: 0.55rem;
+  left: 1.15rem;
+  width: 1.35rem;
+  height: 0.2rem;
+  border-radius: 999px;
+  opacity: 0.9;
+}
+
+.theme-settings__swatch-line.is-short {
+  top: 1rem;
+  width: 0.9rem;
+  opacity: 0.55;
+}
+
+.theme-settings__swatch-accent {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+}
+
+.theme-settings__swatch.is-loading {
+  background: var(--aurral-surface-hover);
+  animation: theme-settings-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes theme-settings-pulse {
+  50% { opacity: 0.45; }
+}
+
+.theme-settings__card-copy {
+  display: grid;
+  min-width: 0;
+  gap: 0.15rem;
+}
+
+.theme-settings__card-label {
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-settings__card-meta,
+.theme-settings__scheme-state {
+  overflow: hidden;
+  color: var(--aurral-text-subtle);
+  font-size: 0.6875rem;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-settings__scheme-state {
+  color: var(--aurral-accent);
+  font-weight: 600;
+}
+
+.theme-settings__active-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--aurral-accent);
+}
+
+.theme-settings__remove {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  min-width: 2rem;
+  min-height: 2rem;
+}
+
+.theme-settings__remove svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.theme-settings__search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0.25rem 0.375rem 0.25rem 0.625rem;
+  border: 1px solid var(--aurral-border-strong);
+  border-radius: var(--aurral-radius-sm);
+  background: var(--aurral-surface);
+}
+
+.theme-settings__search > svg {
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  color: var(--aurral-text-subtle);
+}
+
+.theme-settings__search input {
+  min-width: 0;
+  flex: 1;
+  height: 2rem;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--aurral-text);
+  font-size: 0.8125rem;
+}
+
+.theme-settings__search:focus-within {
+  border-color: var(--aurral-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurral-ring) 24%, transparent);
+}
+
+.theme-settings__search .btn {
+  min-height: 2rem;
+}
+
+.theme-settings__preview-note,
+.theme-settings__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--aurral-text-muted);
+  font-size: 0.75rem;
+}
+
+.theme-settings__preview-note {
+  color: var(--aurral-accent);
+}
+
+.theme-settings__spin {
+  animation: theme-settings-spin 0.9s linear infinite;
+}
+
+@keyframes theme-settings-spin {
+  to { transform: rotate(360deg); }
+}
+
+.theme-settings__empty,
+.theme-settings__error {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.theme-settings__empty {
+  padding: 0.75rem;
+  border: 1px dashed var(--aurral-border);
+  border-radius: var(--aurral-radius-sm);
+  color: var(--aurral-text-muted);
+}
+
+.theme-settings__error {
+  color: var(--aurral-danger);
+}
+
+.theme-settings__modal-backdrop {
+  z-index: 60;
+}
+
+.theme-settings__search-modal {
+  display: grid;
+  width: 100%;
+  max-width: 44rem;
+  max-height: min(90vh, 44rem);
+  gap: 0.75rem;
+  overflow-y: auto;
+  padding: 1rem;
+  border: 1px solid var(--aurral-border-strong);
+  border-radius: var(--aurral-radius);
+  background: var(--aurral-surface-popover);
+  box-shadow: var(--aurral-shadow-modal);
+}
+
+.theme-settings__modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.theme-settings__modal-header h3,
+.theme-settings__modal-header p {
+  margin: 0;
+}
+
+.theme-settings__modal-header h3 {
+  color: var(--aurral-text);
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.theme-settings__modal-header p {
+  margin-top: 0.2rem;
+  color: var(--aurral-text-muted);
+  font-size: 0.75rem;
+}
+
+.theme-settings__search-modal .theme-settings__grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.theme-settings__mode-card:focus-visible,
+.theme-settings__card-select:focus-visible,
+.theme-settings__scheme-preview:focus-visible,
+.theme-settings__remove:focus-visible {
+  outline: 2px solid var(--aurral-ring);
+  outline-offset: 2px;
+}
+
+@media (max-width: 52rem) {
+  .theme-settings__mode-grid,
+  .theme-settings__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 36rem) {
+  .theme-settings__mode-grid,
+  .theme-settings__grid,
+  .theme-settings__search-modal .theme-settings__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .theme-settings__section-actions {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .theme-settings__mode-card,
+  .theme-settings__card,
+  .theme-settings__scheme-card,
+  .theme-settings__swatch.is-loading,
+  .theme-settings__spin {
+    animation: none;
+    transition: none;
+  }
+}
diff --git a/frontend/src/utils/terminalSexyThemes.js b/frontend/src/utils/terminalSexyThemes.js
new file mode 100644
index 000000000..e1492bd22
--- /dev/null
+++ b/frontend/src/utils/terminalSexyThemes.js
@@ -0,0 +1,262 @@
+import {
+  createThemeColors,
+  normalizeThemeColor,
+  parseThemeColor,
+  parseThemeFile,
+  THEME_FILE_VERSION,
+} from "./theme.js";
+
+export const TERMINAL_SEXY_SCHEME_ROOT = "https://raw.githubusercontent.com/stayradiated/terminal.sexy/master/dist/schemes";
+export const TERMINAL_SEXY_FEATURED_PATHS = [
+  "base16/monokai.dark",
+  "base16/solarized.dark",
+  "base16/ocean.dark",
+  "collection/dawn",
+  "xcolors.net/zenburn",
+];
+
+const MAX_RESPONSE_BYTES = 256 * 1024;
+const MAX_RESULTS = 24;
+const REQUEST_TIMEOUT_MS = 15_000;
+
+let catalogPromise = null;
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function shortHash(value) {
+  let hash = 2_166_136_261;
+  for (const character of value) hash = Math.imul(hash ^ character.charCodeAt(0), 16_777_619);
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+
+function safeSchemePath(value) {
+  if (typeof value !== "string") return null;
+  const path = value.trim().replace(/^\/+|\/+$/g, "");
+  if (!path || path.length > 512 || path.includes("..") || !/^[\w./ -]+$/.test(path)) return null;
+  return path;
+}
+
+function humanizeSchemePath(path) {
+  const name = path.split("/").pop() || path;
+  return name
+    .replace(/[-_]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, 48);
+}
+
+function schemeFamilyPath(path) {
+  return path.replace(/\.(?:dark|light)$/i, "");
+}
+
+function schemeEntry(path) {
+  const category = path.split("/", 1)[0];
+  const familyPath = schemeFamilyPath(path);
+  return {
+    id: `terminal-sexy-${shortHash(path)}`,
+    path,
+    familyPath,
+    label: humanizeSchemePath(familyPath),
+    category,
+    appearance: /\.light$/i.test(path) ? "light" : /\.dark$/i.test(path) ? "dark" : null,
+  };
+}
+
+export function normalizeTerminalSexyCatalog(value) {
+  if (!Array.isArray(value)) throw new Error("Terminal.sexy returned an unreadable scheme catalog.");
+  const catalog = value.flatMap((path) => {
+    const normalized = safeSchemePath(path);
+    return normalized ? [schemeEntry(normalized)] : [];
+  });
+  if (!catalog.length) throw new Error("Terminal.sexy returned no color schemes.");
+  return catalog;
+}
+
+export function groupTerminalSexyCatalog(catalog) {
+  const groups = new Map();
+  for (const scheme of catalog) {
+    const key = scheme.familyPath || schemeFamilyPath(scheme.path);
+    let group = groups.get(key);
+    if (!group) {
+      group = {
+        id: `terminal-sexy-${shortHash(key)}`,
+        path: scheme.path,
+        label: humanizeSchemePath(key),
+        category: scheme.category,
+        appearance: scheme.appearance,
+        sources: {},
+      };
+      groups.set(key, group);
+    }
+    group.sources[scheme.appearance || "default"] = scheme;
+    if (!group.appearance && scheme.appearance) group.appearance = scheme.appearance;
+  }
+  return [...groups.values()].map((group) => ({
+    ...group,
+    id: `terminal-sexy-${shortHash(group.sources.dark?.path || group.path)}`,
+  }));
+}
+
+export function selectTerminalSexyFeaturedThemes(catalog, limit = TERMINAL_SEXY_FEATURED_PATHS.length) {
+  const max = Math.max(0, limit);
+  if (!max) return [];
+  const groups = groupTerminalSexyCatalog(catalog);
+  const byPath = new Map(groups.flatMap((group) => Object.values(group.sources).map((scheme) => [scheme.path, group])));
+  const preferred = TERMINAL_SEXY_FEATURED_PATHS.flatMap((path) => {
+    const scheme = byPath.get(path);
+    return scheme ? [scheme] : [];
+  });
+  const fallback = groups.filter((scheme) => scheme.sources.dark || scheme.appearance !== "light");
+  const selected = [];
+  const seen = new Set();
+  for (const group of [...preferred, ...fallback, ...groups]) {
+    if (seen.has(group)) continue;
+    seen.add(group);
+    selected.push(group);
+    if (selected.length >= max) break;
+  }
+  return selected;
+}
+
+function schemeUrl(path) {
+  const normalized = safeSchemePath(path);
+  if (!normalized) throw new Error("That terminal.sexy scheme path is invalid.");
+  return `${TERMINAL_SEXY_SCHEME_ROOT}/${normalized.split("/").map(encodeURIComponent).join("/")}.json`;
+}
+
+async function fetchJson(url, signal, message) {
+  const controller = new AbortController();
+  const abortRequest = () => controller.abort();
+  if (signal?.aborted) controller.abort();
+  else signal?.addEventListener("abort", abortRequest, { once: true });
+  const timeoutId = setTimeout(abortRequest, REQUEST_TIMEOUT_MS);
+  let response;
+  try {
+    response = await fetch(url, { signal: controller.signal });
+    if (!response.ok) throw new Error(message);
+    const contentLength = Number(response.headers?.get?.("content-length"));
+    if (Number.isFinite(contentLength) && contentLength > MAX_RESPONSE_BYTES) throw new Error(message);
+    const text = await response.text();
+    if (new TextEncoder().encode(text).byteLength > MAX_RESPONSE_BYTES) throw new Error(message);
+    try {
+      return JSON.parse(text);
+    } catch (error) {
+      throw new Error(message, { cause: error });
+    }
+  } catch (error) {
+    if (signal?.aborted) throw error;
+    throw new Error(message, { cause: error });
+  } finally {
+    clearTimeout(timeoutId);
+    signal?.removeEventListener("abort", abortRequest);
+  }
+}
+
+export function clearTerminalSexyCatalogCache() {
+  catalogPromise = null;
+}
+
+export async function loadTerminalSexyCatalog() {
+  if (!catalogPromise) {
+    catalogPromise = fetchJson(
+      `${TERMINAL_SEXY_SCHEME_ROOT}/index.json`,
+      undefined,
+      "Terminal.sexy schemes are unavailable right now.",
+    ).then(normalizeTerminalSexyCatalog).catch((error) => {
+      catalogPromise = null;
+      throw error;
+    });
+  }
+  return catalogPromise;
+}
+
+export async function searchTerminalSexyThemes(query, { signal, limit = MAX_RESULTS } = {}) {
+  const catalog = groupTerminalSexyCatalog(await loadTerminalSexyCatalog());
+  if (signal?.aborted) return [];
+  const normalizedQuery = String(query || "").trim().toLowerCase();
+  return catalog
+    .filter((scheme) => !normalizedQuery || `${scheme.label} ${scheme.path} ${scheme.category} ${Object.values(scheme.sources).map((source) => source.path).join(" ")}`.toLowerCase().includes(normalizedQuery))
+    .slice(0, Math.max(1, limit));
+}
+
+function relativeLuminance(color) {
+  const channel = (value) => {
+    const ratio = value / 255;
+    return ratio <= 0.03928 ? ratio / 12.92 : ((ratio + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+}
+
+function terminalColors(value) {
+  if (!isRecord(value)) throw new Error("Terminal.sexy schemes must contain a JSON object.");
+  if (!Array.isArray(value.color) || value.color.length < 16) throw new Error("That terminal.sexy scheme has no complete ANSI palette.");
+  const colors = value.color.map((color, index) => {
+    const normalized = normalizeThemeColor(color);
+    if (!normalized) throw new Error(`That terminal.sexy scheme has an invalid color at index ${index}.`);
+    return normalized;
+  });
+  const background = normalizeThemeColor(value.background);
+  const foreground = normalizeThemeColor(value.foreground);
+  if (!background || !foreground) throw new Error("That terminal.sexy scheme has no valid foreground and background colors.");
+  return { colors, background, foreground };
+}
+
+export function parseTerminalSexyTheme(value, sourceName = "") {
+  const { colors: ansi, background, foreground } = terminalColors(value);
+  const appearance = relativeLuminance(parseThemeColor(background)) < 0.179 ? "dark" : "light";
+  const label = typeof value.name === "string" && value.name.trim()
+    ? value.name.trim().slice(0, 48)
+    : humanizeSchemePath(sourceName || "terminal-sexy-scheme");
+  const id = `terminal-sexy-${shortHash(sourceName || label)}`;
+  return parseThemeFile({
+    version: THEME_FILE_VERSION,
+    id,
+    name: label,
+    appearance,
+    colors: createThemeColors(appearance, background, ansi[4], {
+      chrome: background,
+      text: foreground,
+      border: ansi[8],
+      danger: ansi[1],
+      warning: ansi[3],
+      success: ansi[2],
+      info: ansi[6],
+    }),
+  });
+}
+
+export async function importTerminalSexyTheme(scheme, { signal } = {}) {
+  const sources = scheme?.sources ? Object.entries(scheme.sources) : [[null, scheme]];
+  const themes = await Promise.all(sources.map(async ([sourceMode, source]) => {
+    const path = source?.path || source;
+    const value = await fetchJson(schemeUrl(path), signal, "That terminal.sexy scheme is unavailable right now.");
+    return {
+      sourceMode,
+      theme: parseTerminalSexyTheme(value, safeSchemePath(path) || ""),
+    };
+  }));
+  const primary = scheme?.sources
+    ? themes.find(({ sourceMode }) => sourceMode === "light")
+      || themes.find(({ sourceMode }) => sourceMode === "dark")
+      || themes[0]
+    : themes[0];
+  const appearance = scheme?.sources && (primary.sourceMode === "light" || primary.sourceMode === "dark")
+    ? primary.sourceMode
+    : primary.theme.appearance;
+  const variants = Object.fromEntries(
+    themes
+      .filter(({ sourceMode, theme }) => theme !== primary.theme && (sourceMode === "light" || sourceMode === "dark"))
+      .map(({ sourceMode, theme }) => [sourceMode, theme.colors])
+      .filter(([mode]) => mode !== appearance),
+  );
+  return parseThemeFile({
+    version: THEME_FILE_VERSION,
+    id: scheme?.id || primary.theme.id,
+    name: scheme?.label || primary.theme.label,
+    appearance,
+    colors: primary.theme.colors,
+    ...(Object.keys(variants).length ? { variants } : {}),
+  });
+}
diff --git a/frontend/src/utils/theme.js b/frontend/src/utils/theme.js
index 674c75a2c..a6794fc78 100644
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@@ -1,31 +1,498 @@
 export const THEME_STORAGE_KEY = "aurralTheme";
-export const THEME_PREFERENCES = ["system", "light", "dark"];
+export const THEME_APPEARANCE_STORAGE_KEY = "aurralThemeAppearance:v1";
+export const CUSTOM_THEMES_STORAGE_KEY = "aurralThemes:v1";
+export const THEME_FILE_VERSION = 1;
+export const DEFAULT_THEME_ID = "aurral";
+export const THEME_APPEARANCES = ["system", "light", "dark"];
 
-export function normalizeThemePreference(value) {
-  return THEME_PREFERENCES.includes(value) ? value : "system";
+export const THEME_COLOR_ROLES = [
+  "chrome",
+  "surface",
+  "surfaceRaised",
+  "surfacePopover",
+  "surfaceHover",
+  "surfaceSelected",
+  "text",
+  "textMuted",
+  "textSubtle",
+  "border",
+  "borderStrong",
+  "accent",
+  "accentContrast",
+  "danger",
+  "warning",
+  "success",
+  "info",
+  "ring",
+  "controlOn",
+  "controlOnContrast",
+  "scrim",
+];
+
+const THEME_VARIABLES = Object.fromEntries(
+  THEME_COLOR_ROLES.map((role) => [
+    role,
+    `--aurral-${role.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`,
+  ]),
+);
+const THEME_COLOR_ROLE_SET = new Set(THEME_COLOR_ROLES);
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function clamp(value, min = 0, max = 1) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function parseHexColor(value) {
+  const hex = value.trim().replace(/^#/, "");
+  if (!/^(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.test(hex)) return null;
+  const expand = (part) => Number.parseInt(part.length === 1 ? `${part}${part}` : part, 16);
+  return {
+    r: expand(hex.slice(0, hex.length <= 4 ? 1 : 2)),
+    g: expand(hex.slice(hex.length <= 4 ? 1 : 2, hex.length <= 4 ? 2 : 4)),
+    b: expand(hex.slice(hex.length <= 4 ? 2 : 4, hex.length <= 4 ? 3 : 6)),
+    a:
+      hex.length === 4
+        ? expand(hex.slice(3, 4)) / 255
+        : hex.length === 8
+          ? expand(hex.slice(6, 8)) / 255
+          : 1,
+  };
+}
+
+export function parseThemeColor(value) {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  return trimmed.startsWith("#") ? parseHexColor(trimmed) : null;
+}
+
+function channelToHex(value) {
+  return Math.round(clamp(value, 0, 255)).toString(16).padStart(2, "0");
+}
+
+function rgbaToHex(color) {
+  const opaque = `#${channelToHex(color.r)}${channelToHex(color.g)}${channelToHex(color.b)}`;
+  return color.a >= 0.999 ? opaque : `${opaque}${channelToHex(color.a * 255)}`;
+}
+
+export function normalizeThemeColor(value) {
+  const parsed = parseThemeColor(value);
+  return parsed ? rgbaToHex(parsed) : null;
+}
+
+function colorToRgb(value, fallback = { r: 0, g: 0, b: 0, a: 1 }) {
+  return parseThemeColor(value) || fallback;
+}
+
+function relativeLuminance(color) {
+  const channel = (value) => {
+    const ratio = clamp(value / 255);
+    return ratio <= 0.03928 ? ratio / 12.92 : ((ratio + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+}
+
+function contrastRatio(first, second) {
+  const a = relativeLuminance(first);
+  const b = relativeLuminance(second);
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+
+export function readableThemeForeground(background) {
+  const color = typeof background === "string" ? colorToRgb(background) : background;
+  const light = { r: 255, g: 255, b: 255, a: 1 };
+  const dark = { r: 20, g: 20, b: 20, a: 1 };
+  return rgbaToHex(contrastRatio(color, light) >= contrastRatio(color, dark) ? light : dark);
+}
+
+function mixColors(first, second, amount) {
+  const a = colorToRgb(first);
+  const b = colorToRgb(second);
+  return rgbaToHex({
+    r: a.r + (b.r - a.r) * amount,
+    g: a.g + (b.g - a.g) * amount,
+    b: a.b + (b.b - a.b) * amount,
+    a: 1,
+  });
+}
+
+export function createThemeColors(appearance, background, accent, overrides = {}) {
+  const dark = appearance === "dark";
+  const canvas = normalizeThemeColor(background) || (dark ? "#111111" : "#ffffff");
+  const accentColor = normalizeThemeColor(accent) || (dark ? "#79a8ff" : "#315fcb");
+  const text = normalizeThemeColor(overrides.text) || readableThemeForeground(canvas);
+  const muted = normalizeThemeColor(overrides.textMuted) || mixColors(text, canvas, 0.52);
+  const subtle = normalizeThemeColor(overrides.textSubtle) || mixColors(muted, canvas, 0.58);
+  const chrome = normalizeThemeColor(overrides.chrome) || canvas;
+  const surface = normalizeThemeColor(overrides.surface) || mixColors(canvas, text, dark ? 0.035 : 0.015);
+  const surfaceRaised = normalizeThemeColor(overrides.surfaceRaised) || mixColors(surface, text, dark ? 0.12 : 0.035);
+  const surfacePopover = normalizeThemeColor(overrides.surfacePopover) || mixColors(surfaceRaised, text, dark ? 0.1 : 0.025);
+  const surfaceHover = normalizeThemeColor(overrides.surfaceHover) || mixColors(surfacePopover, text, dark ? 0.16 : 0.08);
+  const surfaceSelected = normalizeThemeColor(overrides.surfaceSelected) || mixColors(surface, accentColor, dark ? 0.18 : 0.1);
+  const border = normalizeThemeColor(overrides.border) || mixColors(canvas, text, dark ? 0.2 : 0.12);
+  const borderStrong = normalizeThemeColor(overrides.borderStrong) || mixColors(border, text, 0.4);
+  const accentContrast = normalizeThemeColor(overrides.accentContrast) || readableThemeForeground(accentColor);
+  return {
+    chrome,
+    surface,
+    surfaceRaised,
+    surfacePopover,
+    surfaceHover,
+    surfaceSelected,
+    text,
+    textMuted: muted,
+    textSubtle: subtle,
+    border,
+    borderStrong,
+    accent: accentColor,
+    accentContrast,
+    danger: normalizeThemeColor(overrides.danger) || (dark ? "#ff777d" : "#bd2735"),
+    warning: normalizeThemeColor(overrides.warning) || (dark ? "#ffbd66" : "#a65c00"),
+    success: normalizeThemeColor(overrides.success) || (dark ? "#79d69d" : "#197343"),
+    info: normalizeThemeColor(overrides.info) || accentColor,
+    ring: normalizeThemeColor(overrides.ring) || accentColor,
+    controlOn: normalizeThemeColor(overrides.controlOn) || accentColor,
+    controlOnContrast: normalizeThemeColor(overrides.controlOnContrast) || accentContrast,
+    scrim: normalizeThemeColor(overrides.scrim) || (dark ? "#000000b8" : "#00000066"),
+  };
+}
+
+export const BUILT_IN_THEMES = [
+  {
+    id: DEFAULT_THEME_ID,
+    label: "Aurral",
+    appearance: "light",
+    colors: createThemeColors("light", "#ffffff", "#4d7c0f", {
+      chrome: "#e5e7eb",
+      surface: "#ffffff",
+      surfaceRaised: "#f1f1f1",
+      surfacePopover: "#e4e4e4",
+      surfaceHover: "#d0d0d0",
+      surfaceSelected: "#efefef",
+      text: "#171717",
+      textMuted: "#525252",
+      textSubtle: "#737373",
+      border: "#17171714",
+      borderStrong: "#17171724",
+      accentContrast: "#ffffff",
+      danger: "#dc2626",
+      warning: "#b45309",
+      success: "#15803d",
+      info: "#2563eb",
+      ring: "#17171775",
+      controlOn: "#2563eb",
+      controlOnContrast: "#ffffff",
+      scrim: "#e5e7ebb8",
+    }),
+    variants: {
+      dark: createThemeColors("dark", "#121212", "#84cc16", {
+        chrome: "#000000",
+        surface: "#121212",
+        surfaceRaised: "#202020",
+        surfacePopover: "#2d2d2d",
+        surfaceHover: "#424242",
+        surfaceSelected: "#232323",
+        text: "#ffffff",
+        textMuted: "#b3b3b3",
+        textSubtle: "#535353",
+        border: "#ffffff14",
+        borderStrong: "#ffffff24",
+        accentContrast: "#000000",
+        danger: "#ef4444",
+        warning: "#f59e0b",
+        success: "#22c55e",
+        info: "#60a5fa",
+        ring: "#ffffff75",
+        controlOn: "#3b82f6",
+        controlOnContrast: "#07111f",
+        scrim: "#000000b8",
+      }),
+    },
+  },
+];
+
+const BUILT_IN_THEME_IDS = new Set(BUILT_IN_THEMES.map((theme) => theme.id));
+const RESERVED_THEME_IDS = new Set(["system", "light", "dark", ...BUILT_IN_THEMES.map((theme) => theme.id)]);
+
+export function getThemeModes(theme) {
+  return ["light", "dark"].filter((mode) => mode === theme.appearance || Boolean(theme.variants?.[mode]));
+}
+
+export function getThemeColorsForMode(theme, mode) {
+  if (mode === theme.appearance) return theme.colors;
+  return theme.variants?.[mode] || null;
+}
+
+export function themeIdFromName(name) {
+  const id = String(name || "custom-theme")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 48);
+  return RESERVED_THEME_IDS.has(id) ? `${id}-custom` : id || "custom-theme";
+}
+
+function isThemeId(value) {
+  return typeof value === "string" && /^[a-z0-9](?:[a-z0-9-]{0,47})$/.test(value);
+}
+
+function isThemeAppearance(value) {
+  return value === "light" || value === "dark";
 }
 
-export function getThemePreference() {
+function isThemeMode(value) {
+  return THEME_APPEARANCES.includes(value);
+}
+
+function isThemeLabel(value) {
+  return typeof value === "string" && value.trim().length > 0 && value.trim().length <= 48;
+}
+
+function getDefaultThemeColors(appearance) {
+  const theme = BUILT_IN_THEMES[0];
+  return getThemeColorsForMode(theme, appearance) || theme.colors;
+}
+
+function parseThemeColors(value, appearance) {
+  if (!isRecord(value)) throw new Error("Theme colors must be an object.");
+  const colors = { ...getDefaultThemeColors(appearance) };
+  for (const [role, color] of Object.entries(value)) {
+    if (!THEME_COLOR_ROLE_SET.has(role)) throw new Error(`"${role}" is not a supported Aurral theme color role.`);
+    const normalized = normalizeThemeColor(color);
+    if (!normalized) throw new Error(`The color for "${role}" is invalid.`);
+    colors[role] = normalized;
+  }
+  return colors;
+}
+
+export function parseThemeFile(value) {
+  if (!isRecord(value)) throw new Error("Theme files must contain a JSON object.");
+  if (value.version !== THEME_FILE_VERSION) {
+    throw new Error(`This theme file uses an unsupported version. Expected ${THEME_FILE_VERSION}.`);
+  }
+  const label = value.name ?? value.label;
+  if (!isThemeLabel(label)) throw new Error("Theme files need a name (48 characters or fewer).");
+  if (!isThemeAppearance(value.appearance)) throw new Error('Theme files need an appearance of "light" or "dark".');
+  const id = value.id === undefined ? themeIdFromName(label) : value.id;
+  if (!isThemeId(id)) throw new Error("Theme ids may only contain lowercase letters, numbers, and hyphens.");
+  if (RESERVED_THEME_IDS.has(id)) throw new Error(`The theme id "${id}" is reserved.`);
+  const colors = parseThemeColors(value.colors, value.appearance);
+  const variants = {};
+  if (value.variants !== undefined) {
+    if (!isRecord(value.variants)) throw new Error("Theme variants must be an object.");
+    for (const [mode, variantColors] of Object.entries(value.variants)) {
+      if (!isThemeAppearance(mode) || mode === value.appearance) throw new Error("Theme variants must contain the other light or dark appearance.");
+      variants[mode] = parseThemeColors(variantColors, mode);
+    }
+  }
+  return {
+    id,
+    label: label.trim(),
+    appearance: value.appearance,
+    colors,
+    ...(Object.keys(variants).length ? { variants } : {}),
+  };
+}
+
+function storedThemeFile(theme) {
+  return {
+    version: THEME_FILE_VERSION,
+    id: theme.id,
+    name: theme.label,
+    appearance: theme.appearance,
+    colors: theme.colors,
+    ...(theme.variants ? { variants: theme.variants } : {}),
+  };
+}
+
+let customThemeCache = null;
+const customThemeListeners = new Set();
+const themeListeners = new Set();
+
+function notify(listeners) {
+  for (const listener of listeners) listener();
+}
+
+function readCustomThemes() {
   try {
-    return normalizeThemePreference(globalThis.localStorage?.getItem(THEME_STORAGE_KEY));
+    const raw = globalThis.localStorage?.getItem(CUSTOM_THEMES_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.flatMap((value) => {
+      try {
+        const theme = parseThemeFile(value);
+        return BUILT_IN_THEME_IDS.has(theme.id) ? [] : [theme];
+      } catch {
+        return [];
+      }
+    });
   } catch {
-    return "system";
+    return [];
   }
 }
 
-export function setThemePreference(value) {
-  const preference = normalizeThemePreference(value);
+export function getCustomThemes() {
+  if (customThemeCache === null) customThemeCache = readCustomThemes();
+  return customThemeCache;
+}
+
+export function invalidateThemeCaches() {
+  customThemeCache = null;
+}
+
+export function subscribeToCustomThemes(listener) {
+  customThemeListeners.add(listener);
+  return () => customThemeListeners.delete(listener);
+}
+
+export function subscribeToThemeChanges(listener) {
+  themeListeners.add(listener);
+  return () => themeListeners.delete(listener);
+}
 
+function saveCustomThemes(themes) {
   try {
-    globalThis.localStorage?.setItem(THEME_STORAGE_KEY, preference);
+    globalThis.localStorage?.setItem(CUSTOM_THEMES_STORAGE_KEY, JSON.stringify(themes.map(storedThemeFile)));
+  } catch {
+    throw new Error("Aurral could not save themes on this device.");
+  }
+  customThemeCache = themes;
+  notify(customThemeListeners);
+}
+
+export function installCustomTheme(theme) {
+  const normalized = parseThemeFile(storedThemeFile(theme));
+  if (RESERVED_THEME_IDS.has(normalized.id)) throw new Error(`The theme id "${normalized.id}" is reserved.`);
+  if ([...BUILT_IN_THEMES, ...getCustomThemes()].some((item) => item.id === normalized.id)) {
+    throw new Error(`A theme named "${normalized.label}" is already installed.`);
+  }
+  saveCustomThemes([...getCustomThemes(), normalized]);
+  return normalized;
+}
+
+export function replaceCustomTheme(theme) {
+  const normalized = parseThemeFile(storedThemeFile(theme));
+  if (RESERVED_THEME_IDS.has(normalized.id)) throw new Error(`The theme id "${normalized.id}" is reserved.`);
+  const themes = getCustomThemes();
+  if (!themes.some((item) => item.id === normalized.id)) throw new Error(`The theme "${normalized.label}" is not installed.`);
+  saveCustomThemes(themes.map((item) => item.id === normalized.id ? normalized : item));
+  return normalized;
+}
+
+export function removeCustomTheme(themeId) {
+  saveCustomThemes(getCustomThemes().filter((theme) => theme.id !== themeId));
+}
+
+export function getThemeDefinition(themeId) {
+  return BUILT_IN_THEMES.find((theme) => theme.id === themeId) || getCustomThemes().find((theme) => theme.id === themeId) || null;
+}
+
+function readStoredValue(key) {
+  try {
+    return globalThis.localStorage?.getItem(key) || null;
+  } catch {
+    return null;
+  }
+}
+
+export function getThemeSettings() {
+  const storedTheme = readStoredValue(THEME_STORAGE_KEY);
+  if (THEME_APPEARANCES.includes(storedTheme)) return { themeId: DEFAULT_THEME_ID, appearance: storedTheme };
+  const themeId = getThemeDefinition(storedTheme) ? storedTheme : DEFAULT_THEME_ID;
+  const storedAppearance = readStoredValue(THEME_APPEARANCE_STORAGE_KEY);
+  return { themeId, appearance: isThemeMode(storedAppearance) ? storedAppearance : "system" };
+}
+
+function writeThemeSettings(themeId, appearance) {
+  try {
+    if (themeId === DEFAULT_THEME_ID && THEME_APPEARANCES.includes(appearance)) {
+      globalThis.localStorage?.setItem(THEME_STORAGE_KEY, appearance);
+      globalThis.localStorage?.removeItem(THEME_APPEARANCE_STORAGE_KEY);
+    } else {
+      globalThis.localStorage?.setItem(THEME_STORAGE_KEY, themeId);
+      globalThis.localStorage?.setItem(THEME_APPEARANCE_STORAGE_KEY, appearance);
+    }
   } catch {}
+}
+
+function getSystemAppearance() {
+  return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 
+export function resolveThemeSelection(selection = getThemeSettings()) {
+  const theme = getThemeDefinition(selection.themeId) || BUILT_IN_THEMES[0];
+  const wantedMode = selection.appearance === "system" ? getSystemAppearance() : selection.appearance;
+  const mode = getThemeColorsForMode(theme, wantedMode) ? wantedMode : theme.appearance;
+  return { theme, mode, colors: getThemeColorsForMode(theme, mode) || theme.colors };
+}
+
+function applyResolvedTheme(resolved, selection) {
   const root = globalThis.document?.documentElement;
-  if (preference === "system") {
-    root?.removeAttribute("data-theme");
+  if (!root) return resolved;
+  if (root.style) {
+    for (const variable of Object.values(THEME_VARIABLES)) root.style.removeProperty(variable);
+    for (const [role, value] of Object.entries(resolved.colors)) root.style.setProperty(THEME_VARIABLES[role], value);
+    root.style.colorScheme = resolved.mode;
+  }
+  const followsSystem = selection.themeId === DEFAULT_THEME_ID && selection.appearance === "system";
+  if (followsSystem) {
+    root.removeAttribute?.("data-theme");
+    root.removeAttribute?.("data-theme-id");
   } else {
-    root?.setAttribute("data-theme", preference);
+    root.setAttribute?.("data-theme", resolved.mode);
+    root.setAttribute?.("data-theme-id", resolved.theme.id);
   }
+  for (const meta of globalThis.document.querySelectorAll?.('meta[name="theme-color"]') || []) meta.setAttribute("content", resolved.colors.chrome);
+  return resolved;
+}
+
+export function applyThemeSelection(selection = getThemeSettings()) {
+  return applyResolvedTheme(resolveThemeSelection(selection), selection);
+}
 
-  return preference;
+export function applyThemePreview(theme, appearance = getThemeSettings().appearance) {
+  const wantedMode = appearance === "system" ? getSystemAppearance() : appearance;
+  const mode = getThemeColorsForMode(theme, wantedMode) ? wantedMode : theme.appearance;
+  const resolved = { theme, mode, colors: getThemeColorsForMode(theme, mode) || theme.colors };
+  return applyResolvedTheme(resolved, { themeId: theme.id, appearance });
+}
+
+export function setThemeSelection(themeId, appearance = "system") {
+  const nextThemeId = getThemeDefinition(themeId) ? themeId : DEFAULT_THEME_ID;
+  const nextAppearance = isThemeMode(appearance) ? appearance : "system";
+  writeThemeSettings(nextThemeId, nextAppearance);
+  const settings = { themeId: nextThemeId, appearance: nextAppearance };
+  applyThemeSelection(settings);
+  notify(themeListeners);
+  return settings;
+}
+
+let initialized = false;
+
+export function initializeTheme() {
+  if (initialized) return;
+  initialized = true;
+  applyThemeSelection();
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      if (getThemeSettings().appearance === "system") {
+        applyThemeSelection();
+        notify(themeListeners);
+      }
+    };
+    media.addEventListener?.("change", onChange);
+    window.addEventListener("storage", (event) => {
+      if ([THEME_STORAGE_KEY, THEME_APPEARANCE_STORAGE_KEY, CUSTOM_THEMES_STORAGE_KEY].includes(event.key)) {
+        customThemeCache = null;
+        applyThemeSelection();
+        notify(customThemeListeners);
+        notify(themeListeners);
+      }
+    });
+  }
 }