diff --git a/src/App.css b/src/App.css
index d2200f6..37e8e60 100644
--- a/src/App.css
+++ b/src/App.css
@@ -21,13 +21,13 @@
   --color-error-surface: var(--error-surface);
 }
 
-:root {
-  color-scheme: dark light;
+[data-theme="dark"] {
+  color-scheme: dark;
   --surface-container-lowest: #000000;
   --surface: #0e0e0e;
   --surface-container: #191919;
   --surface-container-high: #1f1f1f;
-  --surface-container-highest: rgb(36, 36, 36);
+  --surface-container-highest: rgb(36 36 36 / 96%);
   --surface-bright: rgba(255, 255, 255, 0.05);
   --primary: #7dafff;
   --primary-dim: #0073de;
@@ -37,23 +37,81 @@
   --on-secondary-container: #c9d1dd;
   --error: #ff8080;
   --error-surface: rgba(138, 31, 31, 0.72);
+  --outline-subtle: rgba(255, 255, 255, 0.1);
+  --outline-strong: rgba(255, 255, 255, 0.2);
+  --control-bg: rgba(255, 255, 255, 0.04);
+  --control-bg-hover: rgba(255, 255, 255, 0.08);
+  --panel-muted: rgba(255, 255, 255, 0.03);
+  --panel-muted-hover: rgba(255, 255, 255, 0.05);
+  --input-bg: rgba(0, 0, 0, 0.4);
+  --input-bg-strong: rgba(0, 0, 0, 0.5);
+  --inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --overlay-shadow: 0 24px 40px rgba(0, 0, 0, 0.28);
+  --focus-ring: rgba(125, 175, 255, 0.45);
   --font-stack: "Google Sans Variable", "Segoe UI", "Avenir Next", sans-serif;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    --surface-container-lowest: #f2f5ff;
-    --surface: #ffffff;
-    --surface-container: #ebeffb;
-    --surface-container-high: #e1e8fa;
-    --surface-container-highest: rgb(234, 241, 255);
-    --surface-bright: rgba(24, 37, 66, 0.07);
-    --on-surface: #0f1523;
-    --on-surface-variant: #4e5e7e;
-    --on-secondary-container: #334368;
-    --error: #8f1f1f;
-    --error-surface: rgba(255, 179, 179, 0.75);
-  }
+[data-theme="light"] {
+  color-scheme: light;
+  --surface-container-lowest: #eef1f5;
+  --surface: #ffffff;
+  --surface-container: #f4f6f9;
+  --surface-container-high: #eceff4;
+  --surface-container-highest: rgb(246 248 252 / 96%);
+  --surface-bright: rgba(17, 24, 39, 0.06);
+  --primary: #0b63d1;
+  --primary-dim: #0953af;
+  --on-primary-fixed: #ffffff;
+  --on-surface: #101418;
+  --on-surface-variant: #45505e;
+  --on-secondary-container: #263140;
+  --error: #b42318;
+  --error-surface: rgba(254, 226, 226, 0.95);
+  --outline-subtle: rgba(17, 24, 39, 0.14);
+  --outline-strong: rgba(17, 24, 39, 0.24);
+  --control-bg: rgba(17, 24, 39, 0.06);
+  --control-bg-hover: rgba(17, 24, 39, 0.11);
+  --panel-muted: rgba(17, 24, 39, 0.04);
+  --panel-muted-hover: rgba(17, 24, 39, 0.07);
+  --input-bg: rgba(255, 255, 255, 0.95);
+  --input-bg-strong: rgba(244, 246, 250, 0.96);
+  --inset-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.1);
+  --overlay-shadow: 0 24px 40px rgba(15, 23, 42, 0.18);
+  --focus-ring: rgba(11, 99, 209, 0.45);
+}
+
+:root {
+  color-scheme: dark;
+}
+
+html:not([data-theme]) {
+  color-scheme: dark;
+  --surface-container-lowest: #000000;
+  --surface: #0e0e0e;
+  --surface-container: #191919;
+  --surface-container-high: #1f1f1f;
+  --surface-container-highest: rgb(36 36 36 / 96%);
+  --surface-bright: rgba(255, 255, 255, 0.05);
+  --primary: #7dafff;
+  --primary-dim: #0073de;
+  --on-primary-fixed: #05080f;
+  --on-surface: #f4f6fb;
+  --on-surface-variant: #ababab;
+  --on-secondary-container: #c9d1dd;
+  --error: #ff8080;
+  --error-surface: rgba(138, 31, 31, 0.72);
+  --outline-subtle: rgba(255, 255, 255, 0.1);
+  --outline-strong: rgba(255, 255, 255, 0.2);
+  --control-bg: rgba(255, 255, 255, 0.04);
+  --control-bg-hover: rgba(255, 255, 255, 0.08);
+  --panel-muted: rgba(255, 255, 255, 0.03);
+  --panel-muted-hover: rgba(255, 255, 255, 0.05);
+  --input-bg: rgba(0, 0, 0, 0.4);
+  --input-bg-strong: rgba(0, 0, 0, 0.5);
+  --inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --overlay-shadow: 0 24px 40px rgba(0, 0, 0, 0.28);
+  --focus-ring: rgba(125, 175, 255, 0.45);
+  --font-stack: "Google Sans Variable", "Segoe UI", "Avenir Next", sans-serif;
 }
 
 * {
@@ -74,17 +132,76 @@ body {
 }
 
 @utility panel-surface {
-  @apply rounded-2xl bg-white/3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.035)];
+  @apply rounded-2xl bg-surface-container;
+  box-shadow: var(--inset-shadow);
 }
 
 @utility pill-action {
   @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-full px-4 transition-transform duration-150 ease-out hover:-translate-y-px disabled:translate-y-0 disabled:cursor-wait disabled:opacity-70;
 }
 
+@utility tone-muted {
+  background: var(--panel-muted);
+}
+
+@utility tone-muted-hover {
+  background: var(--panel-muted-hover);
+}
+
+@utility ui-control {
+  @apply border-0 text-on-surface-variant transition duration-150 ease-out;
+  background: var(--control-bg);
+  box-shadow: var(--inset-shadow);
+}
+
+@utility ui-control-hoverable {
+  @apply hover:-translate-y-px hover:text-on-surface;
+}
+
+.ui-control-hoverable:hover {
+  background: var(--control-bg-hover);
+}
+
+@utility ui-outline-subtle {
+  border-color: var(--outline-subtle);
+}
+
+@utility ui-outline-strong {
+  border-color: var(--outline-strong);
+}
+
+@utility ui-input {
+  @apply rounded-lg border px-3 py-2 text-sm text-on-surface outline-none transition;
+  background: var(--input-bg);
+  border-color: var(--outline-subtle);
+}
+
+.ui-input:focus {
+  border-color: var(--focus-ring);
+}
+
+@utility ui-input-strong {
+  background: var(--input-bg-strong);
+}
+
+@utility ui-button-secondary {
+  @apply rounded-lg border px-4 py-2 text-sm font-medium text-on-surface transition;
+  border-color: var(--outline-strong);
+}
+
+.ui-button-secondary:hover {
+  background: var(--control-bg-hover);
+}
+
+@utility ui-overlay-card {
+  background: var(--surface-container-highest);
+  box-shadow: var(--overlay-shadow);
+}
+
 .skeleton-block {
   position: relative;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--surface-bright);
 }
 
 .skeleton-block::after {
@@ -92,7 +209,7 @@ body {
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
+  background: linear-gradient(90deg, transparent, var(--control-bg-hover), transparent);
   animation: shimmer 1.5s linear infinite;
 }
 
diff --git a/src/App.tsx b/src/App.tsx
index 7ecac1b..36b9908 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ import { AppRail } from "./components/rail/AppRail";
 import { SessionSpotlight } from "./components/Session";
 import { ErrorToast } from "./components/shared/ErrorToast";
 import { AppPreferencesProvider } from "./contexts/app-preferences";
+import { ThemeController } from "./components/theme/ThemeController";
 import { AppSessionProvider, useAppSession } from "./contexts/app-session";
 import { AppShellUiProvider, useAppShellUi } from "./contexts/app-shell-ui";
 import { AppRouter } from "./router";
@@ -128,6 +129,7 @@ function App() {
   return (
     <AppSessionProvider>
       <AppPreferencesProvider>
+        <ThemeController />
         <AppShellUiProvider>
           <AppContent />
         </AppShellUiProvider>
diff --git a/src/components/Wordmark.tsx b/src/components/Wordmark.tsx
index bc015f9..a21c60e 100644
--- a/src/components/Wordmark.tsx
+++ b/src/components/Wordmark.tsx
@@ -14,7 +14,8 @@ export function Wordmark(props: { class?: string; compact?: boolean; iconClass?:
       class="flex items-center gap-3"
       classList={{ "flex-col gap-2 text-center": !!props.compact, [props.class ?? ""]: !!props.class }}>
       <span
-        class="grid shrink-0 place-items-center rounded-xl bg-white/4 p-3 text-primary shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)]"
+        class="grid shrink-0 place-items-center rounded-xl p-3 text-primary"
+        style={{ background: "var(--control-bg)", "box-shadow": "var(--inset-shadow)" }}
         classList={{ [props.iconClass ?? ""]: !!props.iconClass }}
         aria-hidden="true">
         <LazuriteLogo class="h-9 w-9" />
diff --git a/src/components/account/AccountSwitcher.tsx b/src/components/account/AccountSwitcher.tsx
index b39c6bb..90480a0 100644
--- a/src/components/account/AccountSwitcher.tsx
+++ b/src/components/account/AccountSwitcher.tsx
@@ -73,14 +73,14 @@ export function AccountSwitcher() {
       classList={{
         "z-40": shell.showSwitcher,
         "w-auto": compact(),
-        "max-[1180px]:col-start-4 max-[1180px]:row-start-1 max-[1180px]:justify-self-end": shell.narrowViewport,
+        "max-[1180px]:col-start-5 max-[1180px]:row-start-1 max-[1180px]:justify-self-end": shell.narrowViewport,
         "max-[1180px]:col-span-full max-[1180px]:justify-self-stretch": !shell.narrowViewport,
       }}
       ref={(element) => {
         container = element;
       }}>
       <button
-        class="relative w-full min-w-0 cursor-pointer border-0 bg-white/4 text-on-surface shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)] transition duration-150 ease-out hover:-translate-y-px hover:bg-white/8"
+        class="ui-control ui-control-hoverable relative w-full min-w-0 cursor-pointer text-on-surface"
         classList={{
           "rounded-xl py-[0.95rem] pr-10 pl-4": !compact(),
           "grid h-14 w-14 place-items-center overflow-visible rounded-full p-0": compact(),
@@ -95,7 +95,7 @@ export function AccountSwitcher() {
           class="absolute flex items-center justify-center text-on-surface-variant"
           classList={{
             "right-[0.95rem] top-1/2 -translate-y-1/2": !compact(),
-            "bottom-0 right-0 h-5 w-5 translate-x-[8%] translate-y-[8%] rounded-full bg-surface-container text-[0.7rem] leading-none shadow-[0_0_0_2px_rgba(8,8,8,0.9),inset_0_0_0_1px_rgba(255,255,255,0.05)]":
+            "bottom-0 right-0 h-5 w-5 translate-x-[8%] translate-y-[8%] rounded-full bg-surface-container text-[0.7rem] leading-none shadow-[0_0_0_2px_var(--surface-container-lowest),inset_0_0_0_1px_var(--outline-subtle)]":
               compact(),
           }}
           aria-hidden="true">
@@ -107,7 +107,7 @@ export function AccountSwitcher() {
 
       <Show when={shell.showSwitcher}>
         <div
-          class="absolute z-50 rounded-2xl bg-surface-container-highest p-4 shadow-[0_24px_40px_rgba(0,0,0,0.28)] backdrop-blur-[20px] max-[1180px]:bottom-auto max-[1180px]:top-[calc(100%+0.75rem)]"
+          class="ui-overlay-card absolute z-50 rounded-2xl border ui-outline-subtle bg-surface-container-highest p-4 backdrop-blur-[20px] max-[1180px]:bottom-auto max-[1180px]:top-[calc(100%+0.75rem)]"
           classList={{
             "inset-x-0 bottom-[calc(100%+0.75rem)]": !compact(),
             "bottom-0 left-[calc(100%+0.85rem)] w-[19rem]": compact() && !shell.narrowViewport,
diff --git a/src/components/rail/AppRail.test.tsx b/src/components/rail/AppRail.test.tsx
index a59f262..b00b7ce 100644
--- a/src/components/rail/AppRail.test.tsx
+++ b/src/components/rail/AppRail.test.tsx
@@ -5,14 +5,17 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { AppRail } from "./AppRail";
 
 const openUrlMock = vi.hoisted(() => vi.fn());
+const updateSettingMock = vi.hoisted(() => vi.fn());
 
 vi.mock("@tauri-apps/plugin-opener", () => ({ openUrl: openUrlMock }));
 
-function renderRail() {
+function renderRail(options: { preferences?: Record<string, unknown>; shell?: Record<string, unknown> } = {}) {
   globalThis.location.hash = "#/timeline";
 
   return render(() => (
     <AppTestProviders
+      preferences={{ updateSetting: updateSettingMock, ...options.preferences }}
+      shell={options.shell}
       session={{
         activeDid: "did:plc:alice",
         activeHandle: "alice.test",
@@ -29,6 +32,7 @@ function renderRail() {
 describe("AppRail", () => {
   beforeEach(() => {
     openUrlMock.mockReset();
+    updateSettingMock.mockReset();
   });
 
   it("renders the saved navigation link", async () => {
@@ -65,4 +69,43 @@ describe("AppRail", () => {
     await waitFor(() => expect(openUrlMock).toHaveBeenCalledWith("https://github.com/sponsors/desertthunder"));
     expect(screen.queryByRole("link", { name: "Support" })).not.toBeInTheDocument();
   });
+
+  it("shows the theme menu trigger when enabled", async () => {
+    renderRail();
+
+    expect(await screen.findByRole("button", { name: "Theme menu" })).toBeInTheDocument();
+  });
+
+  it("hides the theme menu trigger when disabled in shell preferences", async () => {
+    renderRail({ shell: { showThemeRailControl: false } });
+
+    await screen.findByRole("link", { name: "Timeline" });
+    expect(screen.queryByRole("button", { name: "Theme menu" })).not.toBeInTheDocument();
+  });
+
+  it("keeps the theme menu trigger visible on narrow viewports", async () => {
+    renderRail({ shell: { narrowViewport: true, railCondensed: true } });
+
+    expect(await screen.findByRole("button", { name: "Theme menu" })).toBeInTheDocument();
+    expect(await screen.findByRole("button", { name: "More navigation" })).toBeInTheDocument();
+  });
+
+  it("uses overflow navigation when desktop rail is collapsed", async () => {
+    renderRail({ shell: { railCollapsed: true, railCondensed: true } });
+
+    expect(await screen.findByRole("button", { name: "More navigation" })).toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "Saved" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Support" })).not.toBeInTheDocument();
+  });
+
+  it("updates the persisted theme from the rail theme menu", async () => {
+    renderRail({ preferences: { settings: { theme: "auto" } } });
+
+    fireEvent.click(await screen.findByRole("button", { name: "Theme menu" }));
+    const darkThemeOption = await screen.findByRole("menuitemradio", { name: "Dark" });
+    fireEvent.mouseDown(darkThemeOption);
+    fireEvent.click(darkThemeOption);
+
+    await waitFor(() => expect(updateSettingMock).toHaveBeenCalledWith("theme", "dark"));
+  });
 });
diff --git a/src/components/rail/AppRail.tsx b/src/components/rail/AppRail.tsx
index e61897f..d8fc78b 100644
--- a/src/components/rail/AppRail.tsx
+++ b/src/components/rail/AppRail.tsx
@@ -1,10 +1,13 @@
+import { useAppPreferences } from "$/contexts/app-preferences";
 import { useAppSession } from "$/contexts/app-session";
 import { useAppShellUi } from "$/contexts/app-shell-ui";
+import { normalizeThemeSetting } from "$/lib/theme";
+import type { Theme } from "$/lib/types";
 import { useLocation, useNavigate } from "@solidjs/router";
 import { openUrl } from "@tauri-apps/plugin-opener";
-import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { AccountSwitcher } from "../account/AccountSwitcher";
-import { ArrowIcon, RailFoldIcon } from "../shared/Icon";
+import { ArrowIcon, Icon, RailFoldIcon } from "../shared/Icon";
 import { Wordmark } from "../Wordmark";
 import { RailActionButton, RailButton } from "./AppRailButton";
 
@@ -18,7 +21,7 @@ function RailHeader(props: { collapsed: boolean; onToggleCollapse: () => void })
 
         <div class="max-[1180px]:hidden">
           <button
-            class="inline-flex h-10 w-10 items-center justify-center rounded-full border-0 bg-white/4 text-on-surface-variant shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)] transition duration-150 ease-out hover:-translate-y-px hover:bg-white/8 hover:text-on-surface"
+            class="ui-control ui-control-hoverable inline-flex h-10 w-10 items-center justify-center rounded-full"
             type="button"
             aria-label={props.collapsed ? "Expand app rail" : "Collapse app rail"}
             aria-pressed={props.collapsed}
@@ -90,10 +93,11 @@ function useShellHistoryTracker() {
   return { canGoBack, canGoForward, goBack, goForward };
 }
 
-function OverflowMenuButton(props: { hasSession: boolean; unreadNotifications: number }) {
+function OverflowMenuButton(props: { hasSession: boolean }) {
   const [open, setOpen] = createSignal(false);
-  const [menuPos, setMenuPos] = createSignal({ top: 0, right: 0 });
+  const [menuPos, setMenuPos] = createSignal({ top: 0, left: 0 });
   const location = useLocation();
+  let containerRef: HTMLDivElement | undefined;
   let buttonRef: HTMLButtonElement | undefined;
 
   const isOverflowActive = createMemo(() =>
@@ -106,7 +110,7 @@ function OverflowMenuButton(props: { hasSession: boolean; unreadNotifications: n
   });
 
   function onOutsideClick(e: MouseEvent) {
-    if (buttonRef && !buttonRef.contains(e.target as Node)) {
+    if (containerRef && !containerRef.contains(e.target as Node)) {
       setOpen(false);
     }
   }
@@ -126,13 +130,15 @@ function OverflowMenuButton(props: { hasSession: boolean; unreadNotifications: n
   function handleToggle() {
     if (!open() && buttonRef) {
       const rect = buttonRef.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 8, right: window.innerWidth - rect.right });
+      const preferredLeft = rect.left;
+      const maxLeft = window.innerWidth - 208;
+      setMenuPos({ top: rect.bottom + 8, left: Math.max(8, Math.min(preferredLeft, maxLeft)) });
     }
     setOpen((v) => !v);
   }
 
   return (
-    <div>
+    <div ref={el => (containerRef = el)}>
       <button
         ref={el => (buttonRef = el)}
         type="button"
@@ -149,16 +155,16 @@ function OverflowMenuButton(props: { hasSession: boolean; unreadNotifications: n
       <Show when={open()}>
         <div
           role="menu"
-          style={{ position: "fixed", top: `${menuPos().top}px`, right: `${menuPos().right}px` }}
-          class="z-50 min-w-48 rounded-xl border border-white/8 bg-surface-container p-1.5 shadow-2xl">
+          style={{ position: "fixed", top: `${menuPos().top}px`, left: `${menuPos().left}px` }}
+          class="ui-overlay-card z-50 min-w-48 rounded-xl border ui-outline-subtle bg-surface-container p-1.5 backdrop-blur-[20px]">
           <Show when={props.hasSession}>
             <RailButton end compact={false} href="/saved" label="Saved" icon="bookmark" />
             <RailButton end compact={false} href="/deck" label="Deck" icon="deck" />
             <RailButton end compact={false} href="/explorer" label="AT Explorer" icon="explorer" />
             <RailButton end compact={false} href="/settings" label="Settings" icon="settings" />
-            <hr class="my-1 border-white/8" />
+            <hr class="my-1 border ui-outline-subtle" />
             <RailActionButton
-              compact={false}
+              compact
               icon="heart"
               label="Support"
               onClick={() => void openUrl("https://github.com/sponsors/desertthunder")} />
@@ -172,6 +178,8 @@ function OverflowMenuButton(props: { hasSession: boolean; unreadNotifications: n
 function RailNavigation(
   props: { collapsed: boolean; hasSession: boolean; narrow: boolean; unreadNotifications: number },
 ) {
+  const useOverflowMenu = () => props.narrow || props.collapsed;
+
   return (
     <div class="grid gap-1 max-[1180px]:col-start-2 max-[1180px]:row-start-1 max-[1180px]:flex max-[1180px]:min-w-0 max-[1180px]:items-center max-[1180px]:gap-2 max-[1180px]:overflow-x-auto max-[1180px]:overscroll-contain max-[1180px]:[scrollbar-width:none] max-[1180px]:[&::-webkit-scrollbar]:hidden">
       <Show
@@ -180,7 +188,7 @@ function RailNavigation(
         <RailButton end compact={props.collapsed} href="/timeline" label="Timeline" icon="timeline" />
         <RailButton compact={props.collapsed} href="/profile" label="Profile" icon="profile" />
         <RailButton end compact={props.collapsed} href="/search" label="Search" icon="search" />
-        <Show when={!props.narrow}>
+        <Show when={!useOverflowMenu()}>
           <RailButton end compact={props.collapsed} href="/saved" label="Saved" icon="bookmark" />
         </Show>
         <RailButton
@@ -191,14 +199,129 @@ function RailNavigation(
           label="Notifications"
           icon="notifications" />
         <RailButton end compact={props.collapsed} href="/messages" label="Messages" icon="messages" />
-        <Show when={!props.narrow}>
-          <RailButton end compact={props.collapsed} href="/deck" label="Deck" icon="deck" />
-          <RailButton end compact={props.collapsed} href="/explorer" label="AT Explorer" icon="explorer" />
-          <RailButton end compact={props.collapsed} href="/settings" label="Settings" icon="settings" />
+        <Show
+          when={useOverflowMenu()}
+          fallback={
+            <>
+              <RailButton end compact={props.collapsed} href="/deck" label="Deck" icon="deck" />
+              <RailButton end compact={props.collapsed} href="/explorer" label="AT Explorer" icon="explorer" />
+              <RailButton end compact={props.collapsed} href="/settings" label="Settings" icon="settings" />
+            </>
+          }>
+          <OverflowMenuButton hasSession={props.hasSession} />
         </Show>
-        <Show when={props.narrow}>
-          <OverflowMenuButton hasSession={props.hasSession} unreadNotifications={props.unreadNotifications} />
+      </Show>
+    </div>
+  );
+}
+
+const RAIL_THEME_OPTIONS: Array<{ value: Theme; label: string; iconClass: string }> = [
+  { value: "auto", label: "System", iconClass: "i-ri-computer-line" },
+  { value: "light", label: "Light", iconClass: "i-ri-sun-line" },
+  { value: "dark", label: "Dark", iconClass: "i-ri-moon-clear-line" },
+];
+
+function iconClassForTheme(theme: Theme) {
+  return RAIL_THEME_OPTIONS.find((option) => option.value === theme)?.iconClass ?? "i-ri-computer-line";
+}
+
+function RailThemeMenu(
+  props: { collapsed: boolean; currentTheme: Theme; onChangeTheme: (theme: Theme) => Promise<void> },
+) {
+  const [open, setOpen] = createSignal(false);
+  const [menuPos, setMenuPos] = createSignal({ top: 0, left: 0 });
+  const compact = () => props.collapsed;
+  let containerRef: HTMLDivElement | undefined;
+  let buttonRef: HTMLButtonElement | undefined;
+
+  function closeMenu() {
+    setOpen(false);
+  }
+
+  function onOutsideClick(event: MouseEvent) {
+    if (containerRef && !containerRef.contains(event.target as Node)) {
+      closeMenu();
+    }
+  }
+
+  function onResize() {
+    closeMenu();
+  }
+
+  onMount(() => {
+    document.addEventListener("mousedown", onOutsideClick);
+    window.addEventListener("resize", onResize);
+
+    onCleanup(() => {
+      document.removeEventListener("mousedown", onOutsideClick);
+      window.removeEventListener("resize", onResize);
+    });
+  });
+
+  function handleToggle() {
+    if (!open() && buttonRef) {
+      const rect = buttonRef.getBoundingClientRect();
+      const preferredLeft = rect.left;
+      const maxLeft = window.innerWidth - 176;
+      setMenuPos({ top: rect.bottom + 8, left: Math.max(8, Math.min(preferredLeft, maxLeft)) });
+    }
+
+    setOpen((value) => !value);
+  }
+
+  async function handleSelect(theme: Theme) {
+    await props.onChangeTheme(theme);
+    closeMenu();
+  }
+
+  return (
+    <div
+      ref={el => (containerRef = el)}
+      class="flex relative max-[1180px]:col-start-4 max-[1180px]:row-start-1"
+      classList={{ "justify-center": compact() }}>
+      <button
+        ref={el => (buttonRef = el)}
+        type="button"
+        aria-label="Theme menu"
+        aria-expanded={open()}
+        aria-haspopup="menu"
+        onClick={handleToggle}
+        class="relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
+        classList={{
+          "w-[2.75rem] justify-center": compact(),
+          "px-3": !compact(),
+          "bg-surface-container text-primary": open(),
+        }}>
+        <Icon iconClass={iconClassForTheme(props.currentTheme)} class="shrink-0 text-[1.25rem]" />
+        <Show when={!compact()}>
+          <span class="text-sm font-medium leading-none">Theme</span>
         </Show>
+      </button>
+
+      <Show when={open()}>
+        <div
+          role="menu"
+          style={{ position: "fixed", top: `${menuPos().top}px`, left: `${menuPos().left}px` }}
+          class="ui-overlay-card z-50 min-w-40 rounded-xl border ui-outline-subtle bg-surface-container p-1.5 backdrop-blur-[20px]">
+          <For each={RAIL_THEME_OPTIONS}>
+            {(option) => (
+              <button
+                type="button"
+                role="menuitemradio"
+                aria-checked={props.currentTheme === option.value}
+                class="flex w-full items-center gap-2 rounded-lg border-0 bg-transparent px-3 py-2 text-left text-sm transition duration-150"
+                classList={{
+                  "bg-surface-bright text-primary": props.currentTheme === option.value,
+                  "text-on-surface-variant hover:bg-surface-bright hover:text-on-surface":
+                    props.currentTheme !== option.value,
+                }}
+                onClick={() => void handleSelect(option.value)}>
+                <Icon iconClass={option.iconClass} />
+                <span>{option.label}</span>
+              </button>
+            )}
+          </For>
+        </div>
       </Show>
     </div>
   );
@@ -230,7 +353,7 @@ function RailHistoryControls(
       class="flex items-center gap-1 max-[1180px]:col-start-3 max-[1180px]:row-start-1"
       classList={{ "justify-self-center": props.collapsed }}>
       <button
-        class="inline-flex h-10 w-10 items-center justify-center rounded-full border-0 bg-white/4 text-on-surface-variant shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)] transition duration-150 ease-out hover:-translate-y-px hover:bg-white/8 hover:text-on-surface disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-white/4"
+        class="ui-control ui-control-hoverable inline-flex h-10 w-10 items-center justify-center rounded-full disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-45"
         type="button"
         aria-label="Back"
         disabled={!props.canGoBack}
@@ -239,7 +362,7 @@ function RailHistoryControls(
       </button>
 
       <button
-        class="inline-flex h-10 w-10 items-center justify-center rounded-full border-0 bg-white/4 text-on-surface-variant shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)] transition duration-150 ease-out hover:-translate-y-px hover:bg-white/8 hover:text-on-surface disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-white/4"
+        class="ui-control ui-control-hoverable inline-flex h-10 w-10 items-center justify-center rounded-full disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-45"
         type="button"
         aria-label="Forward"
         disabled={!props.canGoForward}
@@ -251,13 +374,19 @@ function RailHistoryControls(
 }
 
 export function AppRail() {
+  const preferences = useAppPreferences();
   const session = useAppSession();
   const shell = useAppShellUi();
   const history = useShellHistoryTracker();
+  const currentTheme = createMemo(() => normalizeThemeSetting(preferences.settings?.theme));
+
+  async function handleChangeTheme(theme: Theme) {
+    await preferences.updateSetting("theme", theme);
+  }
 
   return (
     <aside
-      class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-300 ease-out max-[1180px]:grid max-[1180px]:min-h-0 max-[1180px]:grid-cols-[auto_minmax(0,1fr)_auto_auto] max-[1180px]:items-center max-[1180px]:gap-x-4 max-[1180px]:gap-y-3 max-[1180px]:p-4"
+      class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-300 ease-out max-[1180px]:grid max-[1180px]:min-h-0 max-[1180px]:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] max-[1180px]:items-center max-[1180px]:gap-x-4 max-[1180px]:gap-y-3 max-[1180px]:p-4"
       classList={{
         "items-center px-4": shell.railCondensed && !shell.narrowViewport,
         "gap-5": shell.railCondensed && !shell.narrowViewport,
@@ -269,15 +398,23 @@ export function AppRail() {
         hasSession={session.hasSession}
         narrow={shell.narrowViewport}
         unreadNotifications={session.unreadNotifications} />
-      <div class="mt-auto grid gap-3 max-[1180px]:contents">
-        <RailSecondaryActions collapsed={shell.railCondensed} />
-        <AccountSwitcher />
+      <div class="mt-auto grid gap-2 max-[1180px]:contents">
+        <Show when={!shell.railCondensed}>
+          <RailSecondaryActions collapsed={shell.railCondensed} />
+        </Show>
+        <Show when={shell.showThemeRailControl}>
+          <RailThemeMenu
+            collapsed={shell.railCondensed}
+            currentTheme={currentTheme()}
+            onChangeTheme={handleChangeTheme} />
+        </Show>
         <RailHistoryControls
           canGoBack={history.canGoBack()}
           canGoForward={history.canGoForward()}
           collapsed={shell.railCondensed}
           onGoBack={history.goBack}
           onGoForward={history.goForward} />
+        <AccountSwitcher />
       </div>
     </aside>
   );
diff --git a/src/components/rail/AppRailButton.tsx b/src/components/rail/AppRailButton.tsx
index 7bee7da..e79e616 100644
--- a/src/components/rail/AppRailButton.tsx
+++ b/src/components/rail/AppRailButton.tsx
@@ -34,15 +34,12 @@ function RailButtonContent(props: RailButtonVisualProps) {
   );
 }
 
-const railButtonClass =
-  "relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface";
-
 export function RailButton(props: RailButtonProps) {
   return (
     <A
       href={props.href}
       end={props.end}
-      class={railButtonClass}
+      class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
       activeClass="bg-surface-container text-primary"
       inactiveClass=""
       classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }}
@@ -57,7 +54,7 @@ export function RailActionButton(props: RailActionButtonProps) {
   return (
     <button
       type="button"
-      class={railButtonClass}
+      class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
       classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }}
       aria-label={props.label}
       title={props.label}
diff --git a/src/components/settings/SettingsAbout.tsx b/src/components/settings/SettingsAbout.tsx
index 499a520..8ed3a8f 100644
--- a/src/components/settings/SettingsAbout.tsx
+++ b/src/components/settings/SettingsAbout.tsx
@@ -26,7 +26,7 @@ export function SettingsAbout() {
           <button
             type="button"
             onClick={() => void openUrl("https://github.com/stormlightlabs/lazurite/blob/main/LICENSE")}
-            class="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5">
+            class="ui-button-secondary">
             View license
           </button>
         </div>
@@ -38,7 +38,7 @@ export function SettingsAbout() {
           <button
             type="button"
             onClick={() => void openUrl("https://github.com/stormlightlabs/lazurite")}
-            class="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5">
+            class="ui-button-secondary">
             Open
           </button>
         </div>
diff --git a/src/components/settings/SettingsAccount.tsx b/src/components/settings/SettingsAccount.tsx
index c448b5c..dd94969 100644
--- a/src/components/settings/SettingsAccount.tsx
+++ b/src/components/settings/SettingsAccount.tsx
@@ -7,7 +7,7 @@ import { SettingsCard } from "./SettingsCard";
 
 function AccountItem(props: { account: AccountSummary; active: boolean; onRemove: () => void; onSwitch: () => void }) {
   return (
-    <div class="flex items-center justify-between rounded-xl bg-white/3 p-3 transition-colors hover:bg-white/5">
+    <div class="tone-muted flex items-center justify-between rounded-xl p-3 transition-colors hover:bg-[var(--panel-muted-hover)]">
       <div class="flex items-center gap-3">
         <div class="relative">
           <div class="h-10 w-10 overflow-hidden rounded-full">
@@ -37,7 +37,7 @@ function AccountItem(props: { account: AccountSummary; active: boolean; onRemove
             <button
               type="button"
               onClick={() => props.onSwitch()}
-              class="rounded-lg border border-white/20 px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-white/5">
+              class="ui-button-secondary px-3 py-1.5 text-xs">
               Switch
             </button>
           }>
@@ -46,7 +46,7 @@ function AccountItem(props: { account: AccountSummary; active: boolean; onRemove
         <button
           type="button"
           onClick={() => props.onRemove()}
-          class="rounded-lg p-2 text-on-surface-variant transition hover:bg-white/5 hover:text-on-surface"
+          class="rounded-lg p-2 text-on-surface-variant transition hover:bg-surface-bright hover:text-on-surface"
           title="Remove account">
           <span class="flex items-center">
             <Icon kind="close" class="text-sm" />
diff --git a/src/components/settings/SettingsDangerZone.tsx b/src/components/settings/SettingsDangerZone.tsx
index 01ab467..7b9568e 100644
--- a/src/components/settings/SettingsDangerZone.tsx
+++ b/src/components/settings/SettingsDangerZone.tsx
@@ -23,7 +23,7 @@ export function SettingsDangerZone(props: SettingsDangerZoneProps) {
             This removes every local account, cache entry, saved setting, and synced record, then restarts Lazurite.
           </p>
         </div>
-        <div class="flex items-center justify-between gap-4 rounded-2xl bg-black/30 p-4">
+        <div class="ui-input-strong flex items-center justify-between gap-4 rounded-2xl border p-4 ui-outline-subtle">
           <div>
             <p class="text-sm font-medium text-red-300">Reset application</p>
             <p class="text-xs text-on-surface-variant">Return Lazurite to a clean install state.</p>
diff --git a/src/components/settings/SettingsData.tsx b/src/components/settings/SettingsData.tsx
index d024f84..f1b4491 100644
--- a/src/components/settings/SettingsData.tsx
+++ b/src/components/settings/SettingsData.tsx
@@ -93,7 +93,7 @@ function CacheSizeGrid(props: { cacheSize: SettingsDataProps["cacheSize"] }) {
 
 function CacheTile(props: { label: string; value: string }) {
   return (
-    <div class="rounded-xl bg-black/30 p-4 text-center">
+    <div class="ui-input-strong rounded-xl border p-4 text-center ui-outline-subtle">
       <p class="text-lg font-medium text-on-surface">{props.value}</p>
       <p class="text-xs text-on-surface-variant">{props.label}</p>
     </div>
@@ -114,21 +114,21 @@ function CacheActions(
         type="button"
         disabled={props.busy}
         onClick={() => void props.onClear("feeds")}
-        class="flex-1 rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5 disabled:cursor-wait disabled:opacity-60">
+        class="ui-button-secondary flex-1 disabled:cursor-wait disabled:opacity-60">
         {props.pending("feeds") ? "Clearing..." : "Clear feeds"}
       </button>
       <button
         type="button"
         disabled={props.busy}
         onClick={() => void props.onClear("embeddings")}
-        class="flex-1 rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5 disabled:cursor-wait disabled:opacity-60">
+        class="ui-button-secondary flex-1 disabled:cursor-wait disabled:opacity-60">
         {props.pending("embeddings") ? "Clearing..." : "Clear embeddings"}
       </button>
       <button
         type="button"
         disabled={props.busy}
         onClick={() => void props.onClear("fts")}
-        class="flex-1 rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5 disabled:cursor-wait disabled:opacity-60">
+        class="ui-button-secondary flex-1 disabled:cursor-wait disabled:opacity-60">
         {props.pending("fts") ? "Clearing..." : "Clear search index"}
       </button>
       <button
@@ -153,7 +153,7 @@ function ExportActions(
   props: { busy: boolean; pending: PendingCheck; onExport: (format: "json" | "csv") => Promise<void> },
 ) {
   return (
-    <div class="border-t border-white/10 pt-4">
+    <div class="border-t pt-4 ui-outline-subtle">
       <div class="flex items-center justify-between">
         <ExportDescription />
         <div class="flex gap-2">
@@ -161,14 +161,14 @@ function ExportActions(
             type="button"
             disabled={props.busy}
             onClick={() => void props.onExport("json")}
-            class="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5 disabled:cursor-wait disabled:opacity-60">
+            class="ui-button-secondary disabled:cursor-wait disabled:opacity-60">
             {props.pending("json") ? "Exporting..." : "JSON"}
           </button>
           <button
             type="button"
             disabled={props.busy}
             onClick={() => void props.onExport("csv")}
-            class="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5 disabled:cursor-wait disabled:opacity-60">
+            class="ui-button-secondary disabled:cursor-wait disabled:opacity-60">
             {props.pending("csv") ? "Exporting..." : "CSV"}
           </button>
         </div>
diff --git a/src/components/settings/SettingsDownloads.tsx b/src/components/settings/SettingsDownloads.tsx
index b696d3d..274f68b 100644
--- a/src/components/settings/SettingsDownloads.tsx
+++ b/src/components/settings/SettingsDownloads.tsx
@@ -94,12 +94,12 @@ export function SettingsDownloads(props: SettingsDownloadsProps) {
               readOnly
               value={directory()}
               placeholder="Loading download folder..."
-              class="min-w-0 flex-1 rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm text-on-surface outline-none" />
+              class="ui-input min-w-0 flex-1" />
             <button
               type="button"
               disabled={pending()}
               onClick={() => void browseForDirectory()}
-              class="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5 disabled:cursor-wait disabled:opacity-60">
+              class="ui-button-secondary disabled:cursor-wait disabled:opacity-60">
               {pending() ? "Saving..." : "Browse"}
             </button>
           </div>
diff --git a/src/components/settings/SettingsLogs.tsx b/src/components/settings/SettingsLogs.tsx
index 86dffe0..b46d353 100644
--- a/src/components/settings/SettingsLogs.tsx
+++ b/src/components/settings/SettingsLogs.tsx
@@ -27,7 +27,7 @@ function ExpandButton(props: { expanded: boolean; onClick: () => void }) {
     <button
       type="button"
       onClick={() => props.onClick()}
-      class="flex items-center justify-between rounded-lg bg-black/40 px-4 py-2 text-sm text-on-surface transition hover:bg-black/50">
+      class="ui-input-strong flex items-center justify-between rounded-lg border px-4 py-2 text-sm text-on-surface transition hover:bg-surface-bright ui-outline-subtle">
       <Show
         when={props.expanded}
         fallback={
@@ -53,10 +53,10 @@ function LogDisplay(props: { logs: LogEntry[] }) {
       animate={{ height: "auto" }}
       exit={{ height: 0 }}
       transition={{ duration: 0.2 }}>
-      <div class="max-h-64 overflow-y-auto rounded-xl bg-black/50 p-4 font-mono text-xs">
+      <div class="ui-input-strong max-h-64 overflow-y-auto rounded-xl border p-4 font-mono text-xs ui-outline-subtle">
         <For each={props.logs} fallback={<p class="text-on-surface-variant">No log entries found</p>}>
           {(log) => (
-            <div class="mb-2 grid gap-2 rounded-xl bg-white/3 px-3 py-2 md:grid-cols-[auto_auto_auto_minmax(0,1fr)] md:items-start">
+            <div class="tone-muted mb-2 grid gap-2 rounded-xl px-3 py-2 md:grid-cols-[auto_auto_auto_minmax(0,1fr)] md:items-start">
               <span class="text-on-surface-variant">{formatLogTimestamp(log.timestamp)}</span>
               <span
                 class="font-semibold"
@@ -94,13 +94,13 @@ export function SettingsLogs(props: SettingsLogsProps) {
               onClick={() => {
                 void navigator.clipboard.writeText(output());
               }}
-              class="rounded-lg border border-white/20 px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-white/5">
+              class="ui-button-secondary px-3 py-1.5 text-xs">
               Copy all
             </button>
             <button
               type="button"
               onClick={() => void props.loadLogs()}
-              class="rounded-lg border border-white/20 px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-white/5">
+              class="ui-button-secondary px-3 py-1.5 text-xs">
               Refresh
             </button>
           </div>
diff --git a/src/components/settings/SettingsModeration.tsx b/src/components/settings/SettingsModeration.tsx
index 32ee36a..6f8ee59 100644
--- a/src/components/settings/SettingsModeration.tsx
+++ b/src/components/settings/SettingsModeration.tsx
@@ -44,7 +44,7 @@ function LabelOverrideDraftEditor(
     <div class="flex flex-wrap items-center gap-2">
       <select
         value={props.visibility}
-        class="rounded-lg border border-white/10 bg-black/35 px-2 py-1 text-xs text-on-surface outline-none transition focus:border-primary/50"
+        class="rounded-lg border ui-outline-subtle ui-input-strong px-2 py-1 text-xs text-on-surface outline-none transition focus:border-primary/50"
         onInput={(event) => props.onVisibilityChange(event.currentTarget.value as ModerationLabelVisibility)}>
         <VisibilityOptions />
       </select>
@@ -323,7 +323,7 @@ export function SettingsModeration() {
 
                 <For each={effectiveLabelers()}>
                   {(did) => (
-                    <div class="flex flex-wrap items-center justify-between gap-2 rounded-xl bg-black/25 px-3 py-2">
+                    <div class="flex flex-wrap items-center justify-between gap-2 rounded-xl ui-input-strong px-3 py-2">
                       <div class="grid gap-0.5">
                         <span class="text-xs font-medium text-on-surface">{getLabelerTitle(did)}</span>
                         <Show when={getLabelerSubtitle(did)}>
@@ -334,7 +334,7 @@ export function SettingsModeration() {
                         <button
                           type="button"
                           disabled={busyLabelerDid() === did}
-                          class="rounded-lg border border-white/20 px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-white/5 disabled:opacity-70"
+                          class="rounded-lg border ui-outline-strong px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-surface-bright disabled:opacity-70"
                           onClick={() => void removeLabeler(did)}>
                           {busyLabelerDid() === did ? "Removing..." : "Remove"}
                         </button>
@@ -343,14 +343,14 @@ export function SettingsModeration() {
                   )}
                 </For>
 
-                <div class="grid gap-2 rounded-xl bg-black/20 p-3">
+                <div class="grid gap-2 rounded-xl tone-muted p-3">
                   <label class="grid gap-1">
                     <span class="text-xs text-on-surface-variant">Add labeler DID</span>
                     <input
                       type="text"
                       value={draft.addLabelerDid}
                       placeholder="did:plc:..."
-                      class="rounded-lg border border-white/10 bg-black/35 px-3 py-2 text-sm text-on-surface outline-none transition focus:border-primary/50"
+                      class="rounded-lg border ui-outline-subtle ui-input-strong px-3 py-2 text-sm text-on-surface outline-none transition focus:border-primary/50"
                       onInput={(event) => setDraft("addLabelerDid", event.currentTarget.value)} />
                   </label>
                   <button
@@ -376,7 +376,7 @@ export function SettingsModeration() {
                     const entries = () => labelEntries(did);
 
                     return (
-                      <details class="rounded-xl bg-black/25 px-3 py-2" open>
+                      <details class="rounded-xl ui-input-strong px-3 py-2" open>
                         <summary class="cursor-pointer select-none text-xs font-medium text-on-surface">{did}</summary>
                         <div class="mt-3 grid gap-2">
                           <Show
@@ -388,7 +388,7 @@ export function SettingsModeration() {
                                 const gated = !current().adultContentEnabled && isAdultOnlyLabel(did, label);
                                 const displayName = getLabelDisplayName(did, label);
                                 return (
-                                  <div class="grid gap-1 rounded-lg bg-black/30 px-3 py-2">
+                                  <div class="grid gap-1 rounded-lg ui-input-strong px-3 py-2">
                                     <span class="text-xs text-on-surface">{displayName}</span>
                                     <Show when={displayName !== label}>
                                       <span class="text-[0.7rem] text-on-surface-variant">Identifier: {label}</span>
@@ -407,7 +407,7 @@ export function SettingsModeration() {
                                       <select
                                         value={visibility}
                                         disabled={gated}
-                                        class="rounded-lg border border-white/10 bg-black/35 px-2 py-1 text-xs text-on-surface outline-none transition focus:border-primary/50 disabled:opacity-60"
+                                        class="rounded-lg border ui-outline-subtle ui-input-strong px-2 py-1 text-xs text-on-surface outline-none transition focus:border-primary/50 disabled:opacity-60"
                                         onInput={(event) =>
                                           void updateLabelPreference(
                                             did,
@@ -428,12 +428,12 @@ export function SettingsModeration() {
                             </For>
                           </Show>
 
-                          <div class="grid gap-2 rounded-lg bg-black/30 p-2">
+                          <div class="grid gap-2 rounded-lg ui-input-strong p-2">
                             <input
                               type="text"
                               value={draft.addLabelNameByDid[did] ?? ""}
                               placeholder="label identifier (for example: sexual)"
-                              class="rounded-lg border border-white/10 bg-black/35 px-3 py-1.5 text-xs text-on-surface outline-none transition focus:border-primary/50"
+                              class="rounded-lg border ui-outline-subtle ui-input-strong px-3 py-1.5 text-xs text-on-surface outline-none transition focus:border-primary/50"
                               onInput={(event) => setDraft("addLabelNameByDid", did, event.currentTarget.value)} />
                             <LabelOverrideDraftEditor
                               canAdd={!!(draft.addLabelNameByDid[did] ?? "").trim()}
diff --git a/src/components/settings/SettingsPanel.test.tsx b/src/components/settings/SettingsPanel.test.tsx
index 9eba863..8d1a36c 100644
--- a/src/components/settings/SettingsPanel.test.tsx
+++ b/src/components/settings/SettingsPanel.test.tsx
@@ -111,7 +111,7 @@ function createMockLogEntry(level = "INFO", message = "Test log message") {
 }
 
 function renderSettingsPanel(
-  options: { preferences?: Record<string, unknown>; session?: Record<string, unknown> } = {},
+  options: { preferences?: Record<string, unknown>; session?: Record<string, unknown>; shell?: Record<string, unknown> } = {},
 ) {
   render(() => (
     <AppTestProviders
@@ -121,7 +121,8 @@ function renderSettingsPanel(
         updateSetting: updateSettingMock,
         ...options.preferences,
       }}
-      session={options.session}>
+      session={options.session}
+      shell={options.shell}>
       <SettingsPanel />
     </AppTestProviders>
   ));
@@ -227,6 +228,18 @@ describe("SettingsPanel", () => {
     await waitFor(() => expect(updateSettingMock).toHaveBeenCalledWith("theme", "dark"));
   });
 
+  it("allows toggling rail theme control visibility", async () => {
+    const setShowThemeRailControl = vi.fn();
+
+    renderSettingsPanel({ shell: { showThemeRailControl: true, setShowThemeRailControl } });
+
+    await screen.findByText("Settings");
+    const toggle = await screen.findByRole("switch", { name: /show theme control in app rail/i });
+
+    fireEvent.click(toggle);
+    expect(setShowThemeRailControl).toHaveBeenCalledWith(false);
+  });
+
   it("allows changing refresh interval", async () => {
     renderSettingsPanel();
 
diff --git a/src/components/settings/SettingsPanel.tsx b/src/components/settings/SettingsPanel.tsx
index ba03592..c2384bd 100644
--- a/src/components/settings/SettingsPanel.tsx
+++ b/src/components/settings/SettingsPanel.tsx
@@ -1,5 +1,6 @@
 import { EmbeddingsSettings } from "$/components/search/EmbeddingsSettings";
 import { useAppPreferences } from "$/contexts/app-preferences";
+import { useAppShellUi } from "$/contexts/app-shell-ui";
 import { SettingsController } from "$/lib/api/settings";
 import type {
   AppSettings,
@@ -69,7 +70,8 @@ function ConfirmationModal(
           exit={{ opacity: 0 }}
           transition={{ duration: 0.2 }}>
           <Motion.div
-            class="w-full max-w-md rounded-2xl bg-surface-container p-6 shadow-2xl"
+            class="w-full max-w-md rounded-2xl bg-surface-container p-6"
+            style={{ "box-shadow": "var(--overlay-shadow)" }}
             initial={{ scale: 0.95, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             exit={{ scale: 0.95, opacity: 0 }}
@@ -104,7 +106,7 @@ function ConfirmTextInput(
         value={props.value}
         onInput={(e) => props.handleInput(e.currentTarget.value)}
         placeholder={`Type "${props.confirmText}" to confirm`}
-        class="mb-4 w-full rounded-lg border border-white/10 bg-black/40 px-4 py-2 text-sm text-on-surface outline-none transition focus:border-primary/50" />
+        class="ui-input mb-4 w-full px-4 py-2" />
     </Show>
   );
 }
@@ -117,7 +119,7 @@ function Actions(
       <button
         type="button"
         onClick={() => props.onCancel()}
-        class="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-white/5">
+        class="ui-button-secondary">
         Cancel
       </button>
       <button
@@ -142,12 +144,12 @@ function SettingsSkeleton() {
         {() => (
           <div class="panel-surface animate-pulse p-5">
             <div class="mb-4 flex items-center gap-3">
-              <div class="h-6 w-6 rounded-full bg-white/5" />
-              <div class="h-5 w-24 rounded-full bg-white/5" />
+              <div class="h-6 w-6 rounded-full tone-muted" />
+              <div class="h-5 w-24 rounded-full tone-muted" />
             </div>
             <div class="grid gap-3">
-              <div class="h-10 rounded-lg bg-white/5" />
-              <div class="h-10 rounded-lg bg-white/5" />
+              <div class="h-10 rounded-lg tone-muted" />
+              <div class="h-10 rounded-lg tone-muted" />
             </div>
           </div>
         )}
@@ -166,6 +168,7 @@ async function handleResetAndRestartApp() {
 
 export function SettingsPanel() {
   const preferences = useAppPreferences();
+  const shell = useAppShellUi();
   const navigate = useNavigate();
   const [panel, setPanel] = createStore<SettingsPanelState>({
     cacheSize: null,
@@ -253,7 +256,7 @@ export function SettingsPanel() {
   });
 
   return (
-    <article class="grid min-h-0 grid-rows-[auto_1fr] overflow-hidden rounded-4xl bg-surface-container shadow-[inset_0_0_0_1px_rgba(255,255,255,0.035)]">
+    <article class="grid min-h-0 grid-rows-[auto_1fr] overflow-hidden rounded-4xl bg-surface-container shadow-[var(--inset-shadow)]">
       <header class="grid gap-5 px-6 pb-4 pt-6">
         <div class="flex items-center justify-between gap-4">
           <div class="grid gap-1">
@@ -263,7 +266,7 @@ export function SettingsPanel() {
           <button
             type="button"
             onClick={() => navigate(-1)}
-            class="inline-flex h-10 w-10 items-center justify-center rounded-full border-0 bg-surface-container-high text-on-surface-variant transition duration-150 hover:-translate-y-px hover:text-on-surface"
+            class="ui-control ui-control-hoverable inline-flex h-10 w-10 items-center justify-center rounded-full"
             title="Close settings">
             <Icon kind="close" aria-hidden="true" class="text-lg" />
           </button>
@@ -281,7 +284,11 @@ export function SettingsPanel() {
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.3 }}>
-                  <AppearanceControl currentTheme={currentTheme()} handleUpdateSetting={handleUpdateSetting} />
+                  <AppearanceControl
+                    currentTheme={currentTheme()}
+                    handleUpdateSetting={handleUpdateSetting}
+                    showThemeRailControl={shell.showThemeRailControl}
+                    setShowThemeRailControl={shell.setShowThemeRailControl} />
                   <TimelineControl currentRefresh={currentRefresh()} handleUpdateSetting={handleUpdateSetting} />
                   <NotificationsControl settings={settings()} handleUpdateSetting={handleUpdateSetting} />
                   <SettingsModeration />
diff --git a/src/components/settings/SettingsService.tsx b/src/components/settings/SettingsService.tsx
index 549533c..b34a8cc 100644
--- a/src/components/settings/SettingsService.tsx
+++ b/src/components/settings/SettingsService.tsx
@@ -22,7 +22,7 @@ export function SettingsService(
               type="text"
               value={constellationUrl()}
               onChange={(e) => void props.handleUpdateSetting("constellationUrl", e.currentTarget.value)}
-              class="flex-1 rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm text-on-surface outline-none transition focus:border-primary/50" />
+              class="ui-input flex-1" />
           </div>
         </div>
         <div>
@@ -32,7 +32,7 @@ export function SettingsService(
               type="text"
               value={spacedustUrl()}
               onChange={(e) => void props.handleUpdateSetting("spacedustUrl", e.currentTarget.value)}
-              class="flex-1 rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm text-on-surface outline-none transition focus:border-primary/50" />
+              class="ui-input flex-1" />
           </div>
         </div>
         <ToggleRow
diff --git a/src/components/settings/SettingsTheme.tsx b/src/components/settings/SettingsTheme.tsx
index 8d4656c..9d868b1 100644
--- a/src/components/settings/SettingsTheme.tsx
+++ b/src/components/settings/SettingsTheme.tsx
@@ -1,6 +1,7 @@
 import type { AppSettings, Theme } from "$/lib/types";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { SettingsCard } from "./SettingsCard";
+import { ToggleRow } from "./SettingsToggleRow";
 
 const THEME_OPTIONS: { value: Theme; label: string }[] = [{ value: "light", label: "Light" }, {
   value: "dark",
@@ -8,19 +9,31 @@ const THEME_OPTIONS: { value: Theme; label: string }[] = [{ value: "light", labe
 }, { value: "auto", label: "Auto" }];
 
 export function AppearanceControl(
-  props: { currentTheme: Theme; handleUpdateSetting: (key: keyof AppSettings, value: string) => void },
+  props: {
+    currentTheme: Theme;
+    handleUpdateSetting: (key: keyof AppSettings, value: string) => void;
+    setShowThemeRailControl: (enabled: boolean) => void;
+    showThemeRailControl: boolean;
+  },
 ) {
   return (
     <SettingsCard icon="theme" title="Appearance">
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm font-medium text-on-surface">Theme</p>
-          <p class="text-xs text-on-surface-variant">Choose your preferred color scheme</p>
+      <div class="grid gap-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium text-on-surface">Theme</p>
+            <p class="text-xs text-on-surface-variant">Choose your preferred color scheme</p>
+          </div>
+          <SegmentedControl
+            options={THEME_OPTIONS}
+            value={props.currentTheme}
+            onChange={(v) => void props.handleUpdateSetting("theme", v)} />
         </div>
-        <SegmentedControl
-          options={THEME_OPTIONS}
-          value={props.currentTheme}
-          onChange={(v) => void props.handleUpdateSetting("theme", v)} />
+        <ToggleRow
+          label="Show theme control in app rail"
+          description="Keep the System, Light, and Dark menu visible in the rail."
+          checked={props.showThemeRailControl}
+          onChange={() => props.setShowThemeRailControl(!props.showThemeRailControl)} />
       </div>
     </SettingsCard>
   );
diff --git a/src/components/settings/SettingsToggleRow.tsx b/src/components/settings/SettingsToggleRow.tsx
index 68e9e80..32db8a5 100644
--- a/src/components/settings/SettingsToggleRow.tsx
+++ b/src/components/settings/SettingsToggleRow.tsx
@@ -17,7 +17,7 @@ export function ToggleRow(
         disabled={props.disabled}
         onClick={() => props.onChange()}
         class="relative inline-flex h-6 w-10 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50"
-        classList={{ "bg-primary": props.checked, "bg-white/20": !props.checked }}>
+        classList={{ "bg-primary": props.checked, "bg-[var(--control-bg)]": !props.checked }}>
         <Motion.span
           class="inline-block h-4 w-4 rounded-full bg-on-primary-fixed shadow-lg"
           animate={{ x: props.checked ? 20 : 2 }}
diff --git a/src/components/shared/SegmentedControl.tsx b/src/components/shared/SegmentedControl.tsx
index abffe31..a76cca9 100644
--- a/src/components/shared/SegmentedControl.tsx
+++ b/src/components/shared/SegmentedControl.tsx
@@ -4,7 +4,7 @@ export function SegmentedControl<T extends string | number>(
   props: { options: { value: T; label: string }[]; value: T; onChange: (value: T) => void },
 ) {
   return (
-    <div class="flex rounded-xl bg-black/40 p-1">
+    <div class="flex rounded-xl border p-1 ui-outline-subtle ui-input-strong">
       <For each={props.options}>
         {(option) => (
           <button
@@ -13,7 +13,7 @@ export function SegmentedControl<T extends string | number>(
             class="flex-1 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors"
             classList={{
               "bg-primary/20 text-primary": props.value === option.value,
-              "text-on-surface-variant hover:text-on-surface": props.value !== option.value,
+              "text-on-surface-variant hover:bg-surface-bright hover:text-on-surface": props.value !== option.value,
             }}>
             {option.label}
           </button>
diff --git a/src/components/theme/ThemeController.test.tsx b/src/components/theme/ThemeController.test.tsx
new file mode 100644
index 0000000..fd9fcac
--- /dev/null
+++ b/src/components/theme/ThemeController.test.tsx
@@ -0,0 +1,112 @@
+import { ThemeController } from "$/components/theme/ThemeController";
+import { AppTestProviders } from "$/test/providers";
+import type { AppSettings } from "$/lib/types";
+import { render, waitFor } from "@solidjs/testing-library";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type ThemeChangeHandler = (event: { payload: "light" | "dark" }) => void;
+const noopUnlisten = () => {};
+
+const tauriThemeMock = vi.hoisted(() => vi.fn(async () => null as "light" | "dark" | null));
+const onThemeChangedMock = vi.hoisted(() => vi.fn(async (_handler: ThemeChangeHandler) => noopUnlisten));
+
+vi.mock("@tauri-apps/api/window", () => ({
+  getCurrentWindow: () => ({
+    label: "main",
+    onThemeChanged: onThemeChangedMock,
+    theme: tauriThemeMock,
+  }),
+}));
+
+function installMatchMedia(initialDark: boolean) {
+  const listeners = new Set<(event: MediaQueryListEvent) => void>();
+  const media = {
+    matches: initialDark,
+    media: "(prefers-color-scheme: dark)",
+    onchange: null,
+    addEventListener: (_type: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener);
+    },
+    removeEventListener: (_type: string, listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener);
+    },
+    addListener: (listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener);
+    },
+    removeListener: (listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener);
+    },
+    dispatch(nextDark: boolean) {
+      media.matches = nextDark;
+      const event = { matches: nextDark } as MediaQueryListEvent;
+      for (const listener of listeners) {
+        listener(event);
+      }
+    },
+  };
+
+  Object.defineProperty(globalThis, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: vi.fn(() => media),
+  });
+
+  return media;
+}
+
+describe("ThemeController", () => {
+  const baseSettings: AppSettings = {
+    theme: "auto",
+    timelineRefreshSecs: 60,
+    notificationsDesktop: true,
+    notificationsBadge: true,
+    notificationsSound: false,
+    embeddingsEnabled: false,
+    constellationUrl: "https://constellation.microcosm.blue",
+    spacedustUrl: "https://spacedust.microcosm.blue",
+    spacedustInstant: false,
+    spacedustEnabled: false,
+    globalShortcut: "Ctrl+Shift+N",
+    downloadDirectory: "/Users/test/Downloads",
+  };
+
+  beforeEach(() => {
+    tauriThemeMock.mockReset();
+    tauriThemeMock.mockResolvedValue(null);
+    onThemeChangedMock.mockReset();
+    onThemeChangedMock.mockResolvedValue(noopUnlisten);
+  });
+
+  afterEach(() => {
+    delete document.documentElement.dataset.theme;
+    document.documentElement.style.colorScheme = "";
+  });
+
+  it("applies explicit light theme", async () => {
+    installMatchMedia(true);
+
+    render(() => (
+      <AppTestProviders preferences={{ settings: { ...baseSettings, theme: "light" } }}>
+        <ThemeController />
+      </AppTestProviders>
+    ));
+
+    await waitFor(() => expect(document.documentElement.dataset.theme).toBe("light"));
+    expect(document.documentElement.style.colorScheme).toBe("light");
+  });
+
+  it("follows system theme changes when setting is auto", async () => {
+    const media = installMatchMedia(true);
+
+    render(() => (
+      <AppTestProviders preferences={{ settings: { ...baseSettings, theme: "auto" } }}>
+        <ThemeController />
+      </AppTestProviders>
+    ));
+
+    await waitFor(() => expect(document.documentElement.dataset.theme).toBe("dark"));
+
+    media.dispatch(false);
+    await waitFor(() => expect(document.documentElement.dataset.theme).toBe("light"));
+  });
+});
diff --git a/src/components/theme/ThemeController.tsx b/src/components/theme/ThemeController.tsx
new file mode 100644
index 0000000..cc26e8d
--- /dev/null
+++ b/src/components/theme/ThemeController.tsx
@@ -0,0 +1,83 @@
+import { useAppPreferences } from "$/contexts/app-preferences";
+import {
+  applyThemeToDocument,
+  normalizeThemeSetting,
+  resolveEffectiveTheme,
+  toEffectiveTheme,
+  type EffectiveTheme,
+} from "$/lib/theme";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+
+function toSystemTheme(matches: boolean): EffectiveTheme {
+  return matches ? "dark" : "light";
+}
+
+export function ThemeController() {
+  const preferences = useAppPreferences();
+  const [systemTheme, setSystemTheme] = createSignal<EffectiveTheme>("dark");
+
+  const selectedTheme = createMemo(() => normalizeThemeSetting(preferences.settings?.theme));
+
+  const effectiveTheme = createMemo(() => resolveEffectiveTheme(selectedTheme(), systemTheme()));
+
+  onMount(() => {
+    const media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+
+    if (media) {
+      setSystemTheme(toSystemTheme(media.matches));
+      const handleChange = (event: MediaQueryListEvent) => {
+        setSystemTheme(toSystemTheme(event.matches));
+      };
+      media.addEventListener("change", handleChange);
+      onCleanup(() => media.removeEventListener("change", handleChange));
+    }
+
+    let cancelled = false;
+    let unlistenThemeChange: (() => void) | null = null;
+
+    try {
+      const currentWindow = getCurrentWindow();
+      void currentWindow
+        .theme()
+        .then((theme) => {
+          if (cancelled) {
+            return;
+          }
+
+          setSystemTheme((current) => toEffectiveTheme(theme, current));
+        })
+        .catch(() => {
+          // Browser test environments may not provide native window theme APIs.
+        });
+
+      void currentWindow
+        .onThemeChanged(({ payload }) => {
+          setSystemTheme((current) => toEffectiveTheme(payload, current));
+        })
+        .then((unlisten) => {
+          if (cancelled) {
+            unlisten();
+            return;
+          }
+          unlistenThemeChange = unlisten;
+        })
+        .catch(() => {
+          // Browser test environments may not provide native window theme APIs.
+        });
+    } catch {
+      // Browser test environments may not provide native window APIs.
+    }
+
+    onCleanup(() => {
+      cancelled = true;
+      unlistenThemeChange?.();
+    });
+  });
+
+  createEffect(() => {
+    applyThemeToDocument(effectiveTheme());
+  });
+
+  return null;
+}
diff --git a/src/contexts/app-shell-ui.tsx b/src/contexts/app-shell-ui.tsx
index 0a1e461..1c44828 100644
--- a/src/contexts/app-shell-ui.tsx
+++ b/src/contexts/app-shell-ui.tsx
@@ -12,16 +12,24 @@ import {
 import { createStore } from "solid-js/store";
 
 const RAIL_COLLAPSED_STORAGE_KEY = "lazurite:rail-collapsed";
+const RAIL_THEME_CONTROL_STORAGE_KEY = "lazurite:rail-theme-control";
 
-type AppShellUiState = { narrowViewport: boolean; railCollapsed: boolean; showSwitcher: boolean };
+type AppShellUiState = {
+  narrowViewport: boolean;
+  railCollapsed: boolean;
+  showSwitcher: boolean;
+  showThemeRailControl: boolean;
+};
 
 export type AppShellUiContextValue = {
   readonly narrowViewport: boolean;
   readonly railCollapsed: boolean;
   readonly railColumns: string;
   readonly railCondensed: boolean;
+  readonly showThemeRailControl: boolean;
   readonly showSwitcher: boolean;
   closeSwitcher: () => void;
+  setShowThemeRailControl: (enabled: boolean) => void;
   toggleRailCollapsed: () => void;
   toggleSwitcher: () => void;
 };
@@ -29,7 +37,7 @@ export type AppShellUiContextValue = {
 const AppShellUiContext = createContext<AppShellUiContextValue>();
 
 function createInitialAppShellUiState(): AppShellUiState {
-  return { narrowViewport: false, railCollapsed: false, showSwitcher: false };
+  return { narrowViewport: false, railCollapsed: false, showSwitcher: false, showThemeRailControl: true };
 }
 
 function createAppShellUiValue(): AppShellUiContextValue {
@@ -53,6 +61,10 @@ function createAppShellUiValue(): AppShellUiContextValue {
     setShell("showSwitcher", (open) => !open);
   }
 
+  function setShowThemeRailControl(enabled: boolean) {
+    setShell("showThemeRailControl", enabled);
+  }
+
   onMount(() => {
     const media = globalThis.matchMedia("(max-width: 1180px)");
     const syncViewport = () => setShell("narrowViewport", media.matches);
@@ -61,6 +73,10 @@ function createAppShellUiValue(): AppShellUiContextValue {
     if (stored === "true") {
       setShell("railCollapsed", true);
     }
+    const storedThemeControl = globalThis.localStorage.getItem(RAIL_THEME_CONTROL_STORAGE_KEY);
+    if (storedThemeControl === "false") {
+      setShell("showThemeRailControl", false);
+    }
 
     syncViewport();
     media.addEventListener("change", syncViewport);
@@ -74,6 +90,13 @@ function createAppShellUiValue(): AppShellUiContextValue {
     globalThis.localStorage.setItem(RAIL_COLLAPSED_STORAGE_KEY, shell.railCollapsed ? "true" : "false");
   });
 
+  createEffect(() => {
+    globalThis.localStorage.setItem(
+      RAIL_THEME_CONTROL_STORAGE_KEY,
+      shell.showThemeRailControl ? "true" : "false",
+    );
+  });
+
   return {
     get narrowViewport() {
       return shell.narrowViewport;
@@ -87,10 +110,14 @@ function createAppShellUiValue(): AppShellUiContextValue {
     get railCondensed() {
       return railCondensed();
     },
+    get showThemeRailControl() {
+      return shell.showThemeRailControl;
+    },
     get showSwitcher() {
       return shell.showSwitcher;
     },
     closeSwitcher,
+    setShowThemeRailControl,
     toggleRailCollapsed,
     toggleSwitcher,
   };
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..1cd7693
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,28 @@
+import type { Theme } from "$/lib/types";
+
+export type EffectiveTheme = "light" | "dark";
+
+export function normalizeThemeSetting(value: string | null | undefined): Theme {
+  return value === "light" || value === "dark" || value === "auto" ? value : "auto";
+}
+
+export function resolveEffectiveTheme(setting: Theme, systemTheme: EffectiveTheme): EffectiveTheme {
+  if (setting === "light") {
+    return "light";
+  }
+
+  if (setting === "dark") {
+    return "dark";
+  }
+
+  return systemTheme;
+}
+
+export function toEffectiveTheme(value: string | null | undefined, fallback: EffectiveTheme): EffectiveTheme {
+  return value === "light" || value === "dark" ? value : fallback;
+}
+
+export function applyThemeToDocument(theme: EffectiveTheme, doc: Document = document) {
+  doc.documentElement.dataset.theme = theme;
+  doc.documentElement.style.colorScheme = theme;
+}
diff --git a/src/test/providers.tsx b/src/test/providers.tsx
index 18ce62f..566bc57 100644
--- a/src/test/providers.tsx
+++ b/src/test/providers.tsx
@@ -86,8 +86,10 @@ function createAppShellUiTestValue(overrides: Partial<AppShellUiContextValue> =
     railCollapsed: overrides.railCollapsed ?? false,
     railColumns: overrides.railColumns ?? "16rem minmax(0,1fr)",
     railCondensed: overrides.railCondensed ?? false,
+    showThemeRailControl: overrides.showThemeRailControl ?? true,
     showSwitcher: overrides.showSwitcher ?? false,
     closeSwitcher: overrides.closeSwitcher ?? noop,
+    setShowThemeRailControl: overrides.setShowThemeRailControl ?? noop,
     toggleRailCollapsed: overrides.toggleRailCollapsed ?? noop,
     toggleSwitcher: overrides.toggleSwitcher ?? noop,
   };