From 4b1547db7d66b9c7c1fffb1d4c1765bee789b2a8 Mon Sep 17 00:00:00 2001
From: chengyongru <61816729+chengyongru@users.noreply.github.com>
Date: Thu, 23 Jul 2026 17:47:20 +0800
Subject: [PATCH] style(webui): unify settings and dark mode surfaces (#5058)

---
 .github/workflows/ci.yml                      |  31 +++++
 webui/src/components/SessionSearchDialog.tsx  |   2 +-
 .../src/components/settings/SettingsView.tsx  | 119 ++++++++----------
 .../settings/SkillsCatalogSettings.tsx        |   2 +-
 .../src/components/settings/ToggleButton.tsx  |   8 +-
 .../settings/channels/ChannelIdentity.tsx     |   5 +-
 .../channels/ChannelInstancesPanel.tsx        |  10 +-
 .../settings/channels/ChannelSetupPanel.tsx   |  10 +-
 .../settings/channels/ChannelSetupParts.tsx   |  14 +--
 .../settings/channels/CredentialForm.tsx      |   4 +-
 webui/src/components/thread/PromptRail.tsx    |   2 +-
 .../src/components/thread/ThreadComposer.tsx  |   2 +-
 webui/src/globals.css                         |  26 ++--
 webui/tailwind.config.js                      |   4 +
 14 files changed, 130 insertions(+), 109 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 267a8bc0..9b6e49be 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,8 +18,39 @@ permissions:
   contents: read
 
 jobs:
+  changes:
+    name: Detect changes
+    runs-on: ubuntu-latest
+    outputs:
+      python_required: ${{ steps.paths.outputs.python_required }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Detect Python-relevant changes
+        id: paths
+        shell: bash
+        env:
+          BASE_SHA: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event.before }}
+          HEAD_SHA: ${{ github.sha }}
+        run: |
+          python_required=true
+
+          if git cat-file -e "${BASE_SHA}^{commit}" 2>/dev/null &&
+            changed_files="$(git diff --name-only --no-renames "$BASE_SHA" "$HEAD_SHA")" &&
+            [[ -n "$changed_files" ]] &&
+            ! grep -qvE '^(webui/|nanobot/channels/[^/]+/webui/|docs/)' <<< "$changed_files"; then
+            python_required=false
+          fi
+
+          echo "python_required=$python_required" >> "$GITHUB_OUTPUT"
+
   test:
     name: Python (${{ matrix.name }})
+    needs: changes
+    if: needs.changes.outputs.python_required == 'true'
     runs-on: ${{ matrix.os }}
     timeout-minutes: 20
     strategy:
diff --git a/webui/src/components/SessionSearchDialog.tsx b/webui/src/components/SessionSearchDialog.tsx
index a512f33f..5e1e0fa8 100644
--- a/webui/src/components/SessionSearchDialog.tsx
+++ b/webui/src/components/SessionSearchDialog.tsx
@@ -121,7 +121,7 @@ export function SessionSearchDialog({
         className={cn(
           "flex max-h-[min(40rem,calc(100vh-2rem))] w-[calc(100vw-2rem)] max-w-[42rem] flex-col gap-0 overflow-hidden p-0",
           "rounded-[22px] border border-border bg-background text-foreground shadow-[0_22px_70px_rgba(0,0,0,0.22)]",
-          "dark:border-white/14 dark:bg-[#2b2b2b] dark:shadow-[0_26px_90px_rgba(0,0,0,0.44)] sm:rounded-[22px]",
+          "dark:border-white/14 dark:bg-popover dark:shadow-[0_26px_90px_rgba(0,0,0,0.44)] sm:rounded-[22px]",
         )}
       >
         <DialogTitle className="sr-only">{t("sidebar.searchAria")}</DialogTitle>
diff --git a/webui/src/components/settings/SettingsView.tsx b/webui/src/components/settings/SettingsView.tsx
index e972b775..205cffd7 100644
--- a/webui/src/components/settings/SettingsView.tsx
+++ b/webui/src/components/settings/SettingsView.tsx
@@ -2034,11 +2034,7 @@ export function SettingsView({
   };
 
   return (
-    <div
-      className={cn(
-        "flex min-h-0 flex-1 flex-col overflow-hidden bg-background lg:flex-row",
-      )}
-    >
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-settings-canvas lg:flex-row">
       {showSidebar ? (
         <SettingsSidebar
           activeSection={activeSection}
@@ -2104,7 +2100,7 @@ export function SettingsView({
 
       <main
         className={cn(
-          "min-w-0 flex-1 [scrollbar-gutter:stable]",
+          "min-w-0 flex-1 bg-settings-canvas [scrollbar-gutter:stable]",
           activeSection === "channels" ? "overflow-y-auto xl:overflow-hidden" : "overflow-y-auto",
         )}
       >
@@ -2138,7 +2134,7 @@ export function SettingsView({
           </div>
 
           {loading ? (
-            <div className="flex h-48 items-center justify-center rounded-[24px] border border-border/50 bg-card/75 text-sm text-muted-foreground shadow-[0_20px_70px_rgba(15,23,42,0.07)]">
+            <div className="flex h-48 items-center justify-center rounded-[22px] bg-settings-surface text-sm text-muted-foreground">
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               {t("settings.status.loading")}
             </div>
@@ -2225,7 +2221,7 @@ function SettingsSidebar({
   return (
     <aside
       className={cn(
-        "flex w-full shrink-0 flex-col bg-sidebar px-3 pb-2 lg:w-[17rem] lg:px-3 lg:pb-4",
+        "flex w-full shrink-0 flex-col bg-settings-surface px-3 pb-2 lg:w-[17rem] lg:px-3 lg:pb-4",
         hostChromeInset ? "pt-[4.25rem] lg:pt-[4.25rem]" : "pt-4 lg:pt-4",
       )}
     >
@@ -2370,7 +2366,7 @@ function OverviewSettings({
       : tx("settings.values.ready", "Ready");
   return (
     <div className="space-y-7">
-      <section>
+      <section className="rounded-[22px] bg-settings-surface px-4 py-4 sm:px-5">
         <TokenUsageHeatmap usage={settings.usage} timeZone={settings.agent.timezone} />
       </section>
 
@@ -2576,7 +2572,8 @@ function AppearanceSettings({
               <span
                 className={cn(
                   "rounded-full px-3 py-1 transition-colors",
-                  theme === "light" && "bg-background text-foreground shadow-sm",
+                  theme === "light" &&
+                    "bg-background text-foreground ring-1 ring-inset ring-border/45",
                 )}
               >
                 {t("settings.values.light")}
@@ -2584,7 +2581,8 @@ function AppearanceSettings({
               <span
                 className={cn(
                   "rounded-full px-3 py-1 transition-colors",
-                  theme === "dark" && "bg-background text-foreground shadow-sm",
+                  theme === "dark" &&
+                    "bg-background text-foreground ring-1 ring-inset ring-border/45",
                 )}
               >
                 {t("settings.values.dark")}
@@ -3513,7 +3511,7 @@ function ProvidersSettings({
           value={query}
           onChange={(event) => onQueryChange(event.target.value)}
           placeholder={tx("settings.providers.searchPlaceholder", "Search providers")}
-          className="h-10 rounded-full pl-9 text-[13px]"
+          className="h-10 rounded-full border-border/45 bg-settings-surface pl-9 text-[13px]"
         />
       </div>
       <ProviderSection
@@ -4186,7 +4184,7 @@ function AutomationsSettings({
       <section className="shrink-0">
         <div className="mx-auto flex w-full max-w-[56rem] flex-col gap-3">
           <div className="-mx-1 overflow-x-auto px-1 pb-0.5">
-            <div className="grid w-full min-w-[36rem] grid-cols-5 gap-1 rounded-[15px] bg-muted/42 p-1 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)] dark:bg-background/30">
+            <div className="grid w-full min-w-[36rem] grid-cols-5 gap-1 rounded-[15px] bg-muted p-1">
               {summaryOptions.map((option) => (
                 <button
                   key={option.value}
@@ -4194,8 +4192,7 @@ function AutomationsSettings({
                   onClick={() => onFilterChange(option.value)}
                   className={cn(
                     "inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[11px] px-3 text-[12px] font-medium text-muted-foreground transition-colors",
-                    filter === option.value &&
-                      "bg-background text-foreground shadow-[0_8px_20px_rgba(15,23,42,0.07)] dark:bg-background/80",
+                    filter === option.value && "bg-background text-foreground",
                     automationFilterToneClass(option.value, option.count, filter === option.value),
                   )}
                 >
@@ -4223,14 +4220,14 @@ function AutomationsSettings({
                   "settings.automations.search",
                   "Search task, message, linked chat, or schedule",
                 )}
-                className="h-9 w-full rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-[0_8px_22px_rgba(15,23,42,0.04)] dark:border-white/10 dark:bg-background/40"
+                className="h-9 w-full rounded-[13px] border-border/45 bg-settings-surface pl-9 text-[13px]"
               />
             </div>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
                   type="button"
-                  className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-border/45 bg-background/85 px-3 text-[12px] font-medium text-muted-foreground shadow-[0_8px_22px_rgba(15,23,42,0.04)] transition-colors hover:bg-muted/70 hover:text-foreground dark:border-white/10 dark:bg-background/40 sm:w-auto"
+                  className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-border/45 bg-settings-surface px-3 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:w-auto"
                 >
                   <ArrowUpDown className="h-3.5 w-3.5" aria-hidden />
                   <span>{sortLabel[sort]}</span>
@@ -4258,13 +4255,13 @@ function AutomationsSettings({
       ) : null}
 
       {loading && !payload ? (
-        <div className="flex h-44 items-center justify-center rounded-[24px] border border-border/45 bg-card/80 text-[13px] text-muted-foreground shadow-[0_22px_70px_rgba(15,23,42,0.055)]">
+        <div className="flex h-44 items-center justify-center rounded-[22px] bg-settings-surface text-[13px] text-muted-foreground">
           <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
           {tx("settings.automations.loading", "Loading automations...")}
         </div>
       ) : filtered.length && selectedJob ? (
-        <section className="grid min-h-0 overflow-hidden rounded-[22px] border border-border/45 bg-transparent shadow-none dark:border-white/10 xl:grid-cols-[minmax(16rem,18rem)_minmax(0,1fr)] xl:items-stretch">
-          <aside className="flex min-h-0 flex-col overflow-hidden border-b border-border/35 bg-background/36 dark:border-white/10 dark:bg-background/18 xl:border-b-0 xl:border-r">
+        <section className="grid min-h-0 overflow-hidden rounded-[22px] bg-settings-surface xl:grid-cols-[minmax(16rem,18rem)_minmax(0,1fr)] xl:items-stretch">
+          <aside className="flex min-h-0 flex-col overflow-hidden border-b border-border/35 bg-settings-surface xl:border-b-0 xl:border-r">
             <div className="flex shrink-0 items-center justify-between gap-3 px-4 py-3">
               <h2 className="text-[13px] font-semibold tracking-[-0.01em] text-foreground/85">
                 {tx("settings.automations.queue", "Queue")}
@@ -4299,7 +4296,7 @@ function AutomationsSettings({
           />
         </section>
       ) : (
-        <div className="rounded-[24px] border border-border/45 bg-card/80 px-5 py-12 text-center text-[13px] text-muted-foreground shadow-[0_22px_70px_rgba(15,23,42,0.055)]">
+        <div className="rounded-[22px] bg-settings-surface px-5 py-12 text-center text-[13px] text-muted-foreground">
           <div>
             {jobs.length
               ? tx("settings.automations.noMatches", "No automations match this view.")
@@ -4347,8 +4344,8 @@ function AutomationListItem({
         className={cn(
           "group grid w-full grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-[18px] px-3 py-3.5 text-left transition-colors",
           selected
-            ? "bg-background text-foreground shadow-[0_10px_28px_rgba(15,23,42,0.055)] ring-1 ring-border/45 dark:bg-background/45 dark:ring-white/10"
-            : "text-muted-foreground hover:bg-white/48 hover:text-foreground dark:hover:bg-background/24",
+            ? "bg-background/80 text-foreground"
+            : "text-muted-foreground hover:bg-background/55 hover:text-foreground",
         )}
       >
         <span className="min-w-0">
@@ -4373,7 +4370,7 @@ function AutomationListItem({
           </span>
         </span>
         <span className="flex shrink-0 flex-col items-end gap-2 pt-0.5">
-          <span className="rounded-full bg-white/65 px-2 py-0.5 text-[11px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(120,72,25,0.055)] dark:bg-background/35">
+          <span className="rounded-full bg-background/70 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
             {status.label}
           </span>
           {job.delete_after_run ? (
@@ -4436,7 +4433,7 @@ function AutomationDetailPanel({
   }, [job.id]);
 
   return (
-    <article className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-background/42 dark:bg-background/18">
+    <article className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-settings-surface">
       <div className="shrink-0 border-b border-border/35 px-4 py-3.5 dark:border-white/10 sm:px-5">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div className="min-w-0">
@@ -4465,7 +4462,7 @@ function AutomationDetailPanel({
 
       <div className="grid min-h-0 min-w-0 flex-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_14.5rem]">
         <div className="min-h-0 min-w-0 space-y-3 overflow-y-auto overscroll-contain p-4 sm:p-5">
-          <section className="rounded-[20px] border border-border/35 bg-background/62 px-4 py-3.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.58)] dark:border-white/10 dark:bg-background/24">
+          <section className="rounded-[20px] bg-background/55 px-4 py-3.5">
             <div className="flex items-center justify-between gap-3">
               <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
                 {messageLabel}
@@ -4544,7 +4541,7 @@ function AutomationDetailPanel({
           ) : null}
         </div>
 
-        <aside className="min-h-0 overflow-y-auto overscroll-contain border-t border-border/35 bg-muted/20 p-4 text-[12px] text-muted-foreground dark:border-white/10 dark:bg-background/16 lg:border-l lg:border-t-0">
+        <aside className="min-h-0 overflow-y-auto overscroll-contain border-t border-border/35 bg-settings-surface p-4 text-[12px] text-muted-foreground lg:border-l lg:border-t-0">
           <div className="grid gap-3">
             <AutomationDetail
               label={tx("settings.automations.labels.schedule", "Schedule")}
@@ -4618,7 +4615,7 @@ function AutomationActionGroup({
   }
 
   return (
-    <div className="flex shrink-0 items-center gap-1 rounded-full border border-border/35 bg-background/70 p-1 shadow-[0_10px_26px_rgba(15,23,42,0.055)] dark:border-white/10 dark:bg-background/35">
+    <div className="flex shrink-0 items-center gap-1 rounded-full bg-background/65 p-1">
       <AppsActionButton
         ariaLabel={tx("settings.automations.edit", "Edit")}
         disabled={Boolean(actionKey)}
@@ -4674,7 +4671,7 @@ function AutomationStatusBadge({
   return (
     <span
       className={cn(
-        "inline-flex h-6 items-center rounded-full px-2.5 text-[11.5px] font-medium shadow-[inset_0_0_0_1px_rgba(120,72,25,0.055)]",
+        "inline-flex h-6 items-center rounded-full px-2.5 text-[11.5px] font-medium",
         tone === "success" &&
           "bg-orange-100/72 text-orange-800 dark:bg-orange-300/12 dark:text-orange-200",
         tone === "warning" &&
@@ -4704,7 +4701,7 @@ function AutomationDetail({
   children: ReactNode;
 }) {
   return (
-    <div className="min-w-0 rounded-[17px] bg-background/52 px-3 py-3 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)] dark:bg-background/22">
+    <div className="min-w-0 rounded-[17px] bg-background/55 px-3 py-3">
       <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
         {label}
       </div>
@@ -4868,7 +4865,7 @@ function AutomationEditDialog({
                           everyUnit: event.target.value as AutomationEveryUnit,
                         }))
                       }
-                      className="h-10 w-full rounded-[12px] border border-input bg-background px-3 text-[13px] text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+                      className="h-10 w-full rounded-[12px] border border-input bg-background px-3 text-[13px] text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
                     >
                       {AUTOMATION_EVERY_UNITS.map((unit) => (
                         <option key={unit.value} value={unit.value}>
@@ -5583,9 +5580,8 @@ function formatAutomationNextTitle(
 
 function automationStatusDotClass(job: SessionAutomationJob): string {
   const status = automationStatusKey(job);
-  if (status === "active" || status === "running") return "bg-orange-500 shadow-[0_0_0_3px_rgba(249,115,22,0.12)]";
-  if (status === "failed") return "bg-amber-500 shadow-[0_0_0_3px_rgba(245,158,11,0.13)]";
-  if (status === "system") return "bg-muted-foreground/45";
+  if (status === "active" || status === "running") return "bg-orange-500";
+  if (status === "failed") return "bg-amber-500";
   return "bg-muted-foreground/45";
 }
 
@@ -5834,7 +5830,7 @@ function ChannelsSettings({
                 value={query}
                 onChange={(event) => onQueryChange(event.target.value)}
                 placeholder={tx("settings.channels.searchPlaceholder", "Search channels")}
-                className="h-12 rounded-[14px] border-border/70 bg-card/90 pl-11 text-[15px] shadow-sm"
+                className="h-12 rounded-[14px] border-border/45 bg-settings-surface pl-11 text-[15px]"
               />
             </div>
             <div className="flex shrink-0 flex-wrap gap-1.5 rounded-[14px] bg-muted/55 p-1">
@@ -5846,7 +5842,7 @@ function ChannelsSettings({
                   className={cn(
                     "rounded-[11px] px-3 py-1.5 text-[12px] font-medium transition-colors",
                     filter === option.value
-                      ? "bg-background text-foreground shadow-sm"
+                      ? "bg-background text-foreground"
                       : "text-muted-foreground hover:text-foreground",
                   )}
                 >
@@ -6073,7 +6069,7 @@ function AppsCatalogSettings({
               value={query}
               onChange={(event) => onQueryChange(event.target.value)}
               placeholder={tx("settings.apps.searchPlaceholder", "Search Apps")}
-              className="h-12 rounded-[14px] border-border/70 bg-card/90 pl-11 text-[15px] shadow-sm"
+              className="h-12 rounded-[14px] border-border/45 bg-settings-surface pl-11 text-[15px]"
             />
           </div>
           <SegmentedControl
@@ -6104,7 +6100,7 @@ function AppsCatalogSettings({
         />
       ) : null}
 
-      <section>
+      <section className="rounded-[22px] bg-settings-surface px-3 py-3 sm:px-4">
         <div className="flex items-center justify-between border-b border-border/45 pb-3">
           <SettingsSectionTitle>{tx("settings.apps.featured", "Tools")}</SettingsSectionTitle>
           <span className="rounded-full bg-muted px-2.5 py-1 text-[12px] font-medium text-muted-foreground">
@@ -6396,7 +6392,7 @@ function McpAppsCatalogRow({
       </div>
 
       {setupOpen && preset.install_supported && hasFields ? (
-        <div className="mx-3 mb-3 rounded-[14px] border border-border/45 bg-card/85 p-3 shadow-sm">
+        <div className="mx-3 mb-3 rounded-[14px] bg-background/55 p-3">
           <div className="flex items-center justify-between gap-3">
             <div className="min-w-0">
               <div className="truncate text-[12.5px] font-semibold text-foreground">
@@ -6467,7 +6463,7 @@ function McpAppsCatalogRow({
       ) : null}
 
       {toolsOpen && readyInstalled && toolNames.length ? (
-        <div className="mx-3 mb-3 rounded-[14px] border border-border/45 bg-card/85 p-3 shadow-sm">
+        <div className="mx-3 mb-3 rounded-[14px] bg-background/55 p-3">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="text-[11.5px] font-medium text-muted-foreground">
               {tx("settings.mcp.toolScope", "Tools")}
@@ -6640,7 +6636,7 @@ function McpCustomServerPanel({
   ];
 
   return (
-    <section className="overflow-hidden rounded-[16px] border border-border/45 bg-card/72 shadow-[0_10px_30px_rgba(15,23,42,0.045)]">
+    <section className="overflow-hidden rounded-[16px] bg-settings-surface">
       <div className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex min-w-0 items-center gap-3">
           <span className="grid h-9 w-9 shrink-0 place-items-center rounded-[11px] bg-muted text-muted-foreground">
@@ -6874,7 +6870,6 @@ function McpPresetLogo({ preset, showBrandLogos }: { preset: McpPresetInfo; show
     return (
       <span
         className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] border border-border/45 bg-background"
-        style={{ boxShadow: `inset 0 0 0 1px ${preset.brand_color ?? "transparent"}22` }}
       >
         <img
           src={logoUrl}
@@ -6922,12 +6917,7 @@ function CliAppReadyPanel({
   };
 
   return (
-    <section
-      className={cn(
-        "rounded-[12px] border border-border/55 bg-card/88 px-4 py-3",
-        "shadow-[0_8px_26px_rgba(15,23,42,0.055)]",
-      )}
-    >
+    <section className="rounded-[12px] bg-settings-surface px-4 py-3">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
         <CliAppLogo app={app} showBrandLogos={showBrandLogos} />
         <div className="min-w-0 flex-1">
@@ -6994,10 +6984,7 @@ function CliAppLogo({ app, showBrandLogos }: { app: CliAppInfo; showBrandLogos:
   return (
     <span
       className="relative grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-[8px] border border-border/45 bg-muted text-[13px] font-semibold"
-      style={{
-        color: app.brand_color || "hsl(var(--muted-foreground))",
-        boxShadow: `inset 0 0 0 1px ${app.brand_color ?? "transparent"}18`,
-      }}
+      style={{ color: app.brand_color || "hsl(var(--muted-foreground))" }}
     >
       <span
         aria-hidden
@@ -7152,7 +7139,7 @@ function RuntimeSettings({
     <div className="space-y-7">
       <section>
         <SettingsSectionTitle>{tx("settings.sections.identity", "Identity")}</SettingsSectionTitle>
-        <SettingsGroup>
+          <SettingsGroup>
           <SettingsRow title={tx("settings.rows.botName", "Bot name")} description={tx("settings.help.botName", "Shown wherever nanobot uses a display name.")}>
             <Input
               value={form.botName}
@@ -8057,8 +8044,7 @@ function ProviderPickerIcon({
     return (
       <span
         data-testid={`provider-picker-logo-${provider}`}
-        className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]"
-        style={{ boxShadow: `inset 0 0 0 1px ${(brand?.color ?? "#6B7280")}22` }}
+        className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background"
         aria-hidden
       >
         <img
@@ -8078,7 +8064,7 @@ function ProviderPickerIcon({
     return (
       <span
         data-testid={`provider-picker-logo-fallback-${provider}`}
-        className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]"
+        className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white"
         style={{ backgroundColor: brand.color }}
         aria-hidden
       >
@@ -8111,7 +8097,7 @@ function ProviderSection({
   return (
     <section className="space-y-3">
       <ByokSectionHeader title={title} count={count} />
-      <div className="overflow-hidden rounded-[22px] border border-border/45 bg-card/86 shadow-[0_18px_65px_rgba(15,23,42,0.07)] backdrop-blur-xl dark:border-white/10 dark:shadow-[0_18px_65px_rgba(0,0,0,0.22)]">
+      <div className="overflow-hidden rounded-[22px] bg-settings-surface">
         {count > 0 ? (
           <div className="divide-y divide-border/45">{children}</div>
         ) : (
@@ -8333,8 +8319,7 @@ function ProviderIcon({
     return (
       <span
         data-testid={`provider-logo-${provider}`}
-        className="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-[14px] border border-border/45 bg-background shadow-[inset_0_0_0_1px_rgba(0,0,0,0.025)]"
-        style={{ boxShadow: `inset 0 0 0 1px ${(brand?.color ?? "#6B7280")}22` }}
+        className="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-[14px] border border-border/45 bg-background"
       >
         <img
           src={logoUrl}
@@ -8352,7 +8337,7 @@ function ProviderIcon({
     return (
       <span
         data-testid={`provider-logo-fallback-${provider}`}
-        className="grid h-10 w-10 shrink-0 place-items-center rounded-[14px] text-[11px] font-semibold text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]"
+        className="grid h-10 w-10 shrink-0 place-items-center rounded-[14px] text-[11px] font-semibold text-white"
         style={{ backgroundColor: brand.color }}
         aria-hidden
       >
@@ -8361,7 +8346,7 @@ function ProviderIcon({
     );
   }
   return (
-    <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-muted text-foreground/82 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.025)] dark:bg-muted/70">
+    <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-muted text-foreground/82 dark:bg-muted/70">
       <Icon className="h-5 w-5" strokeWidth={2} aria-hidden />
     </span>
   );
@@ -8395,8 +8380,7 @@ function OverviewValueLogo({
     return (
       <span
         data-testid={`overview-logo-${provider}`}
-        className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]"
-        style={{ boxShadow: `inset 0 0 0 1px ${brand.color}22` }}
+        className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background"
         aria-hidden
       >
         <img
@@ -8415,7 +8399,7 @@ function OverviewValueLogo({
   return (
     <span
       data-testid={`overview-logo-fallback-${provider}`}
-      className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]"
+      className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white"
       style={{ backgroundColor: brand.color }}
       aria-hidden
     >
@@ -8476,7 +8460,7 @@ function SettingsSectionTitle({ children }: { children: ReactNode }) {
 
 function SettingsGroup({ children }: { children: ReactNode }) {
   return (
-    <div className="overflow-hidden rounded-[22px] border border-border/45 bg-card/86 shadow-[0_18px_65px_rgba(15,23,42,0.075)] backdrop-blur-xl dark:border-white/10 dark:shadow-[0_18px_65px_rgba(0,0,0,0.24)]">
+    <div className="overflow-hidden rounded-[22px] bg-settings-surface">
       <div className="divide-y divide-border/45">{children}</div>
     </div>
   );
@@ -8844,7 +8828,7 @@ function SettingsStatusMessage({
           className={cn(
             "h-1.5 w-1.5 shrink-0 rounded-full",
             tone === "accent" &&
-              "bg-blue-500 shadow-[0_0_0_3px_rgba(59,130,246,0.14)] dark:bg-blue-400 dark:shadow-[0_0_0_3px_rgba(96,165,250,0.18)]",
+              "bg-blue-500 dark:bg-blue-400",
             tone === "danger" && "bg-destructive/70",
           )}
           aria-hidden
@@ -8895,7 +8879,8 @@ function SegmentedControl({
           onClick={() => onChange(option.value)}
           className={cn(
             "rounded-full px-3 py-1 transition-colors",
-            value === option.value && "bg-background text-foreground shadow-sm",
+            value === option.value &&
+              "bg-background text-foreground ring-1 ring-inset ring-border/45",
           )}
         >
           {option.label}
diff --git a/webui/src/components/settings/SkillsCatalogSettings.tsx b/webui/src/components/settings/SkillsCatalogSettings.tsx
index e1927b42..13b33583 100644
--- a/webui/src/components/settings/SkillsCatalogSettings.tsx
+++ b/webui/src/components/settings/SkillsCatalogSettings.tsx
@@ -31,7 +31,7 @@ export function SkillsCatalogSettings({ skills }: { skills: SkillSummary[] }) {
         </span>
       </section>
 
-      <section>
+      <section className="rounded-[22px] bg-settings-surface px-3 py-3 sm:px-4">
         <div className="flex items-center justify-between border-b border-border/45 pb-3">
           <h2 className="mb-2 px-1 text-[13px] font-semibold tracking-[-0.01em] text-foreground/85">
             {t("settings.skills.featured", { defaultValue: "Agent skills" })}
diff --git a/webui/src/components/settings/ToggleButton.tsx b/webui/src/components/settings/ToggleButton.tsx
index 4e9cbae1..ddfc75c4 100644
--- a/webui/src/components/settings/ToggleButton.tsx
+++ b/webui/src/components/settings/ToggleButton.tsx
@@ -27,17 +27,17 @@ export function ToggleButton({
         "relative inline-flex h-[22px] w-[38px] shrink-0 items-center rounded-full p-[2px]",
         "transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         checked
-          ? "bg-[#2997FF] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.035)]"
-          : "bg-muted shadow-[inset_0_0_0_1px_rgba(0,0,0,0.035)] hover:bg-muted/80",
+          ? "bg-[#2997FF]"
+          : "bg-muted-foreground/20 hover:bg-muted-foreground/25",
         disabled && "cursor-default opacity-60",
         disabled && checked && "hover:bg-[#2997FF]",
-        disabled && !checked && "hover:bg-muted",
+        disabled && !checked && "hover:bg-muted-foreground/20",
       )}
     >
       <span
         aria-hidden
         className={cn(
-          "h-[18px] w-[18px] rounded-full bg-background shadow-[0_1px_2px_rgba(0,0,0,0.18),0_2px_7px_rgba(0,0,0,0.11)]",
+          "h-[18px] w-[18px] rounded-full bg-background",
           "transition-transform duration-200 ease-out",
           checked ? "translate-x-[16px]" : "translate-x-0",
         )}
diff --git a/webui/src/components/settings/channels/ChannelIdentity.tsx b/webui/src/components/settings/channels/ChannelIdentity.tsx
index f565fa06..514e7401 100644
--- a/webui/src/components/settings/channels/ChannelIdentity.tsx
+++ b/webui/src/components/settings/channels/ChannelIdentity.tsx
@@ -137,7 +137,6 @@ export function ChannelLogo({
     return (
       <span
         className="grid h-10 w-10 shrink-0 place-items-center rounded-[12px] border border-border/45 bg-background"
-        style={{ boxShadow: `inset 0 0 0 1px ${color}22` }}
       >
         <img
           src={logoUrl}
@@ -156,7 +155,7 @@ export function ChannelLogo({
     return (
       <span
         className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background"
-        style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }}
+        style={{ color }}
         aria-hidden
       >
         <Icon className="h-5 w-5" strokeWidth={2.25} />
@@ -167,7 +166,7 @@ export function ChannelLogo({
   return (
     <span
       className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background text-[11px] font-bold"
-      style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }}
+      style={{ color }}
       aria-hidden
     >
       {initials}
diff --git a/webui/src/components/settings/channels/ChannelInstancesPanel.tsx b/webui/src/components/settings/channels/ChannelInstancesPanel.tsx
index 3233b983..28709289 100644
--- a/webui/src/components/settings/channels/ChannelInstancesPanel.tsx
+++ b/webui/src/components/settings/channels/ChannelInstancesPanel.tsx
@@ -144,7 +144,7 @@ export function ChannelInstancesPanel({
   };
 
   return (
-    <aside className="min-h-full rounded-[20px] border border-border/80 bg-background p-5 shadow-none">
+    <aside className="min-h-full rounded-[20px] bg-settings-surface p-5">
       <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 items-start gap-3">
           <ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
@@ -177,10 +177,10 @@ export function ChannelInstancesPanel({
             <article
               key={instance.id}
               className={cn(
-                "overflow-hidden rounded-[18px] border transition-colors",
+                "overflow-hidden rounded-[18px] border border-transparent transition-colors",
                 expanded
-                  ? "border-border/75 bg-card/95 shadow-sm"
-                  : "border-border/55 bg-background hover:border-border/75 hover:bg-muted/15",
+                  ? "bg-background"
+                  : "bg-background/70 hover:bg-muted",
               )}
             >
               <div className="flex items-center gap-3 px-3 py-3">
@@ -398,7 +398,7 @@ function ChannelInstanceAvatar({
   return (
     <span
       className="grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background text-[10px] font-bold"
-      style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }}
+      style={{ color }}
       aria-hidden
     >
       {remoteAvatarUrl ? (
diff --git a/webui/src/components/settings/channels/ChannelSetupPanel.tsx b/webui/src/components/settings/channels/ChannelSetupPanel.tsx
index 8c007444..0b7993b2 100644
--- a/webui/src/components/settings/channels/ChannelSetupPanel.tsx
+++ b/webui/src/components/settings/channels/ChannelSetupPanel.tsx
@@ -80,10 +80,8 @@ export function ChannelCatalogRow({
       aria-pressed={selected}
       onClick={onSelect}
       className={cn(
-        "group flex w-full min-w-0 items-center gap-3 rounded-[14px] border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border/80",
-        selected
-          ? "border-border/55 bg-muted/35"
-          : "border-transparent hover:border-border/45 hover:bg-muted/25",
+        "group flex w-full min-w-0 items-center gap-3 rounded-[14px] border border-transparent px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border/80",
+        selected ? "bg-background" : "hover:bg-muted",
       )}
     >
       <ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
@@ -181,7 +179,7 @@ export function ChannelSetupPanel({
   });
 
   return (
-    <aside className="min-h-full rounded-[20px] border border-border/80 bg-background p-5 shadow-none">
+    <aside className="min-h-full rounded-[20px] bg-settings-surface p-5">
       <div className="flex items-start justify-between gap-4">
         <div className="flex min-w-0 items-start gap-3">
           <ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
@@ -398,7 +396,7 @@ function ChannelSetupSurface({
 
   return (
     <form
-      className="mt-5 overflow-hidden rounded-[16px] border border-border/70 bg-background shadow-none"
+      className="mt-5 overflow-hidden rounded-[16px] bg-background/55"
       onSubmit={(event) => {
         event.preventDefault();
         if (mode === "credentials") void saveCredentialSettings();
diff --git a/webui/src/components/settings/channels/ChannelSetupParts.tsx b/webui/src/components/settings/channels/ChannelSetupParts.tsx
index 53c95cec..de7f742a 100644
--- a/webui/src/components/settings/channels/ChannelSetupParts.tsx
+++ b/webui/src/components/settings/channels/ChannelSetupParts.tsx
@@ -57,7 +57,7 @@ export function ChannelGuideLink({
       target="_blank"
       rel="noreferrer"
       className={cn(
-        "inline-flex max-w-full items-center gap-2 border border-border/65 bg-background/90 font-semibold text-foreground shadow-sm transition-colors hover:border-border hover:bg-muted/45",
+        "inline-flex max-w-full items-center gap-2 border border-border/45 bg-background/90 font-semibold text-foreground transition-colors hover:bg-muted",
         compact
           ? "shrink-0 rounded-full py-1 pl-1 pr-2.5 text-[11.5px]"
           : "mt-3 rounded-[12px] py-1.5 pl-1.5 pr-3 text-[12px]",
@@ -68,7 +68,7 @@ export function ChannelGuideLink({
           "grid shrink-0 place-items-center overflow-hidden border border-border/45 bg-background font-bold",
           compact ? "h-5 w-5 rounded-full text-[9px]" : "h-6 w-6 rounded-[7px] text-[10px]",
         )}
-        style={{ color, boxShadow: `inset 0 0 0 1px ${color}16` }}
+        style={{ color }}
         aria-hidden
       >
         {logoUrl ? (
@@ -135,11 +135,11 @@ export function ChannelOfficialLink({
       href={setup.officialUrl}
       target="_blank"
       rel="noreferrer"
-      className="inline-flex max-w-full shrink-0 items-center gap-2 rounded-full border border-border/65 bg-background/90 py-1 pl-1 pr-2.5 text-[11.5px] font-semibold text-foreground shadow-sm transition-colors hover:border-border hover:bg-muted/45"
+      className="inline-flex max-w-full shrink-0 items-center gap-2 rounded-full border border-border/45 bg-background/90 py-1 pl-1 pr-2.5 text-[11.5px] font-semibold text-foreground transition-colors hover:bg-muted"
     >
       <span
         className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background"
-        style={{ color, boxShadow: `inset 0 0 0 1px ${color}16` }}
+        style={{ color }}
         aria-hidden
       >
         {logoUrl ? (
@@ -231,7 +231,7 @@ export function ChannelProviderPresets({
       <div
         role="radiogroup"
         aria-label={t("settings.channels.providerPreset", { defaultValue: "Provider" })}
-        className="grid rounded-[10px] bg-muted/75 p-0.5 text-[12px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)]"
+        className="grid rounded-[10px] bg-muted p-0.5 text-[12px] font-medium text-muted-foreground"
         style={{ gridTemplateColumns: `repeat(${presets.length}, minmax(0, 1fr))` }}
       >
         {presets.map((preset) => (
@@ -247,7 +247,7 @@ export function ChannelProviderPresets({
             className={cn(
               "min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground",
               selected === preset.id
-                && "bg-background text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.10),inset_0_0_0_1px_rgba(15,23,42,0.055)]",
+                && "bg-background text-foreground ring-1 ring-inset ring-border/45",
             )}
           >
             {preset.label}
@@ -360,7 +360,7 @@ export function ChannelSetupSteps({
       <ol className="space-y-1.5">
         {steps.map((step, index) => (
           <li key={step} className="flex gap-2">
-            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-background text-[10px] font-semibold text-muted-foreground shadow-sm">
+            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
               {index + 1}
             </span>
             <span>{step}</span>
diff --git a/webui/src/components/settings/channels/CredentialForm.tsx b/webui/src/components/settings/channels/CredentialForm.tsx
index f25dd5b4..131c9c8b 100644
--- a/webui/src/components/settings/channels/CredentialForm.tsx
+++ b/webui/src/components/settings/channels/CredentialForm.tsx
@@ -159,7 +159,7 @@ export function CredentialForm({
               <span
                 role="radiogroup"
                 aria-label={field.label}
-                className="mt-1 grid rounded-[10px] bg-muted/75 p-0.5 text-[12px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)]"
+                className="mt-1 grid rounded-[10px] bg-muted p-0.5 text-[12px] font-medium text-muted-foreground"
                 style={{ gridTemplateColumns: `repeat(${field.options.length}, minmax(0, 1fr))` }}
               >
                 {field.options.map((option) => (
@@ -172,7 +172,7 @@ export function CredentialForm({
                     className={cn(
                       "min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground",
                       selectedOption === option.value
-                        && "bg-background text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.10),inset_0_0_0_1px_rgba(15,23,42,0.055)]",
+                        && "bg-background text-foreground ring-1 ring-inset ring-border/45",
                     )}
                   >
                     {option.label}
diff --git a/webui/src/components/thread/PromptRail.tsx b/webui/src/components/thread/PromptRail.tsx
index 9c8e3d34..9b53a141 100644
--- a/webui/src/components/thread/PromptRail.tsx
+++ b/webui/src/components/thread/PromptRail.tsx
@@ -188,7 +188,7 @@ export function PromptRail({
               className={cn(
                 "pointer-events-none absolute left-10 top-1/2 z-30 w-[34rem] max-w-[calc(100vw-4rem)] -translate-y-1/2 rounded-[20px] px-4 py-3 text-left",
                 "bg-popover/95 text-popover-foreground shadow-[0_18px_45px_rgba(0,0,0,0.12)] backdrop-blur-xl",
-                "dark:bg-[#2f2f2f]/95 dark:text-white dark:shadow-[0_18px_45px_rgba(0,0,0,0.45)]",
+                "dark:shadow-[0_18px_45px_rgba(0,0,0,0.45)]",
                 "-translate-x-2 scale-[0.98] opacity-0 transition-[opacity,transform] duration-150",
                 "group-hover/marker:translate-x-0 group-hover/marker:scale-100 group-hover/marker:opacity-100",
                 "group-focus-visible/marker:translate-x-0 group-focus-visible/marker:scale-100 group-focus-visible/marker:opacity-100",
diff --git a/webui/src/components/thread/ThreadComposer.tsx b/webui/src/components/thread/ThreadComposer.tsx
index 139aed2e..b55364c4 100644
--- a/webui/src/components/thread/ThreadComposer.tsx
+++ b/webui/src/components/thread/ThreadComposer.tsx
@@ -2115,7 +2115,7 @@ export function ThreadComposer({
                   <TooltipContent
                     side="top"
                     align="center"
-                    className="flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1.5 text-[13px] font-medium text-foreground shadow-[0_8px_24px_rgba(15,23,42,0.13)] dark:border-white/10 dark:bg-neutral-900 dark:text-white"
+                    className="flex items-center gap-2 rounded-full border border-border/70 bg-popover px-3 py-1.5 text-[13px] font-medium text-popover-foreground shadow-[0_8px_24px_rgba(15,23,42,0.13)] dark:border-white/10"
                   >
                     <span>{voiceButtonTooltip}</span>
                     {voiceRecorder.state === "idle" ? (
diff --git a/webui/src/globals.css b/webui/src/globals.css
index bf4c4899..d0bfd0ee 100644
--- a/webui/src/globals.css
+++ b/webui/src/globals.css
@@ -39,37 +39,41 @@
     --sidebar-accent: 0 0% 95.8%;
     --sidebar-accent-foreground: 0 0% 9%;
     --sidebar-border: 40 8% 90.5%;
+    --settings-canvas: var(--background);
+    --settings-surface: 60 6% 96.7%;
     --scrollbar-thumb: hsl(var(--muted-foreground) / 0.26);
     --scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.42);
   }
 
   .dark {
     color-scheme: dark;
-    --background: 0 0% 12%;
+    --background: 0 0% 19%;
     --foreground: 240 4% 96%;
-    --card: 0 0% 14%;
+    --card: 0 0% 22%;
     --card-foreground: 240 4% 96%;
-    --popover: 0 0% 14%;
+    --popover: var(--card);
     --popover-foreground: 240 4% 96%;
     --primary: 240 5% 98%;
     --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14%;
+    --secondary: var(--card);
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 16%;
+    --muted: var(--card);
     --muted-foreground: 0 0% 65%;
-    --accent: 0 0% 18%;
+    --accent: 0 0% 25%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 22%;
-    --input: 0 0% 22%;
+    --border: 0 0% 28%;
+    --input: var(--border);
     --ring: 0 0% 83.1%;
     --inline-token-highlight: 217 92% 72%;
-    --sidebar: 0 0% 10.5%;
+    --sidebar: var(--card);
     --sidebar-foreground: 0 0% 98%;
-    --sidebar-accent: 0 0% 15%;
+    --sidebar-accent: var(--background);
     --sidebar-accent-foreground: 0 0% 98%;
-    --sidebar-border: 0 0% 20%;
+    --sidebar-border: var(--border);
+    --settings-canvas: var(--background);
+    --settings-surface: var(--card);
     --scrollbar-thumb: hsl(var(--muted-foreground) / 0.28);
     --scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.44);
   }
diff --git a/webui/tailwind.config.js b/webui/tailwind.config.js
index 734f456b..27d91725 100644
--- a/webui/tailwind.config.js
+++ b/webui/tailwind.config.js
@@ -93,6 +93,10 @@ export default {
           "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
           border: "hsl(var(--sidebar-border))",
         },
+        settings: {
+          canvas: "hsl(var(--settings-canvas))",
+          surface: "hsl(var(--settings-surface))",
+        },
       },
       keyframes: {
         "accordion-down": {