diff --git a/app/src/App.tsx b/app/src/App.tsx
index a964988b5..d314ef828 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -33,6 +33,7 @@ import {
 import ChatRuntimeProvider from './providers/ChatRuntimeProvider';
 import CoreStateProvider, { useCoreState } from './providers/CoreStateProvider';
 import SocketProvider from './providers/SocketProvider';
+import ThemeProvider from './providers/ThemeProvider';
 import { trackPageView } from './services/analytics';
 import { startCoreHealthMonitor, stopCoreHealthMonitor } from './services/coreHealthMonitor';
 import {
@@ -83,26 +84,28 @@ function App() {
       )}>
       <Provider store={store}>
         <PersistGate loading={<PersistRehydrationScreen />} persistor={persistor}>
-          <I18nProvider>
-            <BootCheckGate>
-              <CoreStateProvider>
-                <SocketProvider>
-                  <ChatRuntimeProvider>
-                    <Router>
-                      <CommandProvider>
-                        <ServiceBlockingGate>
-                          <AppShell />
-                          <DictationHotkeyManager />
-                          <LocalAIDownloadSnackbar />
-                          <AppUpdatePrompt />
-                        </ServiceBlockingGate>
-                      </CommandProvider>
-                    </Router>
-                  </ChatRuntimeProvider>
-                </SocketProvider>
-              </CoreStateProvider>
-            </BootCheckGate>
-          </I18nProvider>
+          <ThemeProvider>
+            <I18nProvider>
+              <BootCheckGate>
+                <CoreStateProvider>
+                  <SocketProvider>
+                    <ChatRuntimeProvider>
+                      <Router>
+                        <CommandProvider>
+                          <ServiceBlockingGate>
+                            <AppShell />
+                            <DictationHotkeyManager />
+                            <LocalAIDownloadSnackbar />
+                            <AppUpdatePrompt />
+                          </ServiceBlockingGate>
+                        </CommandProvider>
+                      </Router>
+                    </ChatRuntimeProvider>
+                  </SocketProvider>
+                </CoreStateProvider>
+              </BootCheckGate>
+            </I18nProvider>
+          </ThemeProvider>
         </PersistGate>
       </Provider>
     </Sentry.ErrorBoundary>
diff --git a/app/src/components/BootCheckGate/BootCheckGate.tsx b/app/src/components/BootCheckGate/BootCheckGate.tsx
index b81b3cbcf..e531b6919 100644
--- a/app/src/components/BootCheckGate/BootCheckGate.tsx
+++ b/app/src/components/BootCheckGate/BootCheckGate.tsx
@@ -56,9 +56,11 @@ interface PanelProps {
 
 function Panel({ children }: PanelProps) {
   return (
-    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-[#f5f5f5] p-4">
+    <div
+      className="fixed inset-0 z-[10000] flex items-center justify-center p-4"
+      style={{ backgroundColor: 'var(--color-background)' }}>
       <AppBackground />
-      <div className="relative z-10 w-full max-w-xl rounded-2xl border border-stone-200 bg-white p-10 shadow-soft animate-fade-up">
+      <div className="relative z-10 w-full max-w-xl rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft animate-fade-up">
         {children}
       </div>
     </div>
@@ -212,16 +214,16 @@ function ModePicker({ onConfirm }: PickerProps) {
   return (
     <Panel>
       <BootCheckLanguageSelect />
-      <h2 className="text-xl font-semibold text-stone-900">
+      <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
         {isDesktop ? t('bootCheck.chooseCoreMode') : t('bootCheck.connectToCore')}
       </h2>
-      <p className="mt-2 text-sm text-stone-600">
+      <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
         {isDesktop ? t('bootCheck.desktopDescription') : t('bootCheck.webDescription')}
       </p>
 
       {!isDesktop && (
         <div
-          className="mt-4 rounded-xl border border-stone-200 bg-stone-50 p-3 text-xs text-stone-600"
+          className="mt-4 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 text-xs text-stone-600 dark:text-neutral-300"
           data-testid="web-download-cta">
           {t('bootCheck.preferDesktop')}{' '}
           <a
@@ -244,11 +246,13 @@ function ModePicker({ onConfirm }: PickerProps) {
             aria-pressed={selected === 'local'}
             className={`rounded-xl border-2 p-5 text-left transition-colors focus:outline-none ${
               selected === 'local'
-                ? '!border-primary-500 bg-primary-50 text-stone-900 shadow-sm'
-                : '!border-stone-200 bg-white text-stone-700 hover:!border-stone-300 hover:bg-stone-50'
+                ? '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 text-stone-900 dark:text-neutral-100 shadow-sm'
+                : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
             }`}>
             <div className="font-medium">{t('bootCheck.localRecommended')}</div>
-            <div className="mt-0.5 text-xs text-stone-500">{t('bootCheck.localDescription')}</div>
+            <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+              {t('bootCheck.localDescription')}
+            </div>
           </button>
         )}
 
@@ -260,18 +264,20 @@ function ModePicker({ onConfirm }: PickerProps) {
             aria-pressed={selected === 'cloud'}
             className={`rounded-xl border-2 p-5 text-left transition-colors focus:outline-none ${
               selected === 'cloud'
-                ? '!border-primary-500 bg-primary-50 text-stone-900 shadow-sm'
-                : '!border-stone-200 bg-white text-stone-700 hover:!border-stone-300 hover:bg-stone-50'
+                ? '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 text-stone-900 dark:text-neutral-100 shadow-sm'
+                : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
             }`}>
             <div className="font-medium">{t('bootCheck.cloudMode')}</div>
-            <div className="mt-0.5 text-xs text-stone-500">{t('bootCheck.cloudDescription')}</div>
+            <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+              {t('bootCheck.cloudDescription')}
+            </div>
           </button>
         )}
 
         {selected === 'cloud' && (
           <div className="mt-1 flex flex-col gap-3">
             <div className="flex flex-col gap-1">
-              <label className="text-xs font-medium text-stone-700">
+              <label className="text-xs font-medium text-stone-700 dark:text-neutral-200">
                 {t('bootCheck.coreRpcUrl')}
               </label>
               <input
@@ -283,12 +289,12 @@ function ModePicker({ onConfirm }: PickerProps) {
                   setUrlError(null);
                   setTestStatus({ kind: 'idle' });
                 }}
-                className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 placeholder-stone-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
               />
               {urlError && <p className="text-xs text-red-600">{urlError}</p>}
             </div>
             <div className="flex flex-col gap-1">
-              <label className="text-xs font-medium text-stone-700">
+              <label className="text-xs font-medium text-stone-700 dark:text-neutral-200">
                 {t('bootCheck.authToken')} (
                 <code className="text-[10px]">OPENHUMAN_CORE_TOKEN</code>)
               </label>
@@ -303,10 +309,10 @@ function ModePicker({ onConfirm }: PickerProps) {
                   setTokenError(null);
                   setTestStatus({ kind: 'idle' });
                 }}
-                className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 placeholder-stone-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
               />
               {tokenError && <p className="text-xs text-red-600">{tokenError}</p>}
-              <p className="text-[11px] text-stone-500 leading-snug">
+              <p className="text-[11px] text-stone-500 dark:text-neutral-400 leading-snug">
                 {t('bootCheck.storedLocally')} <code>Authorization: Bearer …</code> on every RPC.
               </p>
             </div>
@@ -316,7 +322,7 @@ function ModePicker({ onConfirm }: PickerProps) {
                 type="button"
                 onClick={handleTestConnection}
                 disabled={testStatus.kind === 'testing'}
-                className="rounded-lg border border-stone-300 bg-white px-3 py-1.5 text-xs text-stone-700 hover:bg-stone-50 disabled:opacity-60">
+                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
                 {testStatus.kind === 'testing'
                   ? t('bootCheck.testing')
                   : t('bootCheck.testConnection')}
@@ -362,8 +368,10 @@ function CheckingScreen() {
   return (
     <Panel>
       <div className="flex flex-col items-center gap-4 py-4">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 border-t-primary-500" />
-        <p className="text-sm text-stone-600">{t('bootCheck.checkingCore')}</p>
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-primary-500" />
+        <p className="text-sm text-stone-600 dark:text-neutral-300">
+          {t('bootCheck.checkingCore')}
+        </p>
       </div>
     </Panel>
   );
@@ -398,8 +406,10 @@ function ResultScreen({
   if (result.kind === 'unreachable') {
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900">{t('bootCheck.cannotReach')}</h2>
-        <p className="mt-2 text-sm text-stone-600">
+        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+          {t('bootCheck.cannotReach')}
+        </h2>
+        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
           {result.reason || t('bootCheck.cannotReachDesc')}
         </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
@@ -408,13 +418,13 @@ function ResultScreen({
             type="button"
             onClick={onRetry}
             disabled={actionBusy}
-            className="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm text-stone-700 hover:bg-stone-50 disabled:opacity-60">
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
             {t('common.retry')}
           </button>
           <button
             type="button"
             onClick={onSwitchMode}
-            className="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm text-stone-700 hover:bg-stone-50">
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
             {t('bootCheck.switchMode')}
           </button>
           <button
@@ -431,8 +441,12 @@ function ResultScreen({
   if (result.kind === 'daemonDetected') {
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900">{t('bootCheck.legacyDetected')}</h2>
-        <p className="mt-2 text-sm text-stone-600">{t('bootCheck.legacyDescription')}</p>
+        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+          {t('bootCheck.legacyDetected')}
+        </h2>
+        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+          {t('bootCheck.legacyDescription')}
+        </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
           <button
@@ -446,7 +460,7 @@ function ResultScreen({
             type="button"
             onClick={onSwitchMode}
             disabled={actionBusy}
-            className="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm text-stone-700 hover:bg-stone-50 disabled:opacity-60">
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
             {t('bootCheck.switchMode')}
           </button>
         </div>
@@ -457,8 +471,12 @@ function ResultScreen({
   if (result.kind === 'outdatedLocal') {
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900">{t('bootCheck.localNeedsRestart')}</h2>
-        <p className="mt-2 text-sm text-stone-600">{t('bootCheck.localNeedsRestartDesc')}</p>
+        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+          {t('bootCheck.localNeedsRestart')}
+        </h2>
+        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+          {t('bootCheck.localNeedsRestartDesc')}
+        </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
           <button
@@ -472,7 +490,7 @@ function ResultScreen({
             type="button"
             onClick={onSwitchMode}
             disabled={actionBusy}
-            className="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm text-stone-700 hover:bg-stone-50 disabled:opacity-60">
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
             {t('bootCheck.switchMode')}
           </button>
         </div>
@@ -483,8 +501,12 @@ function ResultScreen({
   if (result.kind === 'outdatedCloud') {
     return (
       <Panel>
-        <h2 className="text-xl font-semibold text-stone-900">{t('bootCheck.cloudNeedsUpdate')}</h2>
-        <p className="mt-2 text-sm text-stone-600">{t('bootCheck.cloudNeedsUpdateDesc')}</p>
+        <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+          {t('bootCheck.cloudNeedsUpdate')}
+        </h2>
+        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+          {t('bootCheck.cloudNeedsUpdateDesc')}
+        </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
           <button
@@ -498,7 +520,7 @@ function ResultScreen({
             type="button"
             onClick={onSwitchMode}
             disabled={actionBusy}
-            className="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm text-stone-700 hover:bg-stone-50 disabled:opacity-60">
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
             {t('bootCheck.switchMode')}
           </button>
         </div>
@@ -509,8 +531,12 @@ function ResultScreen({
   // noVersionMethod — treat like outdated, user picks which flavor of action
   return (
     <Panel>
-      <h2 className="text-xl font-semibold text-stone-900">{t('bootCheck.versionCheckFailed')}</h2>
-      <p className="mt-2 text-sm text-stone-600">{t('bootCheck.versionCheckFailedDesc')}</p>
+      <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+        {t('bootCheck.versionCheckFailed')}
+      </h2>
+      <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
+        {t('bootCheck.versionCheckFailedDesc')}
+      </p>
       {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
       <div className="mt-5 flex gap-3">
         <button
@@ -524,7 +550,7 @@ function ResultScreen({
           type="button"
           onClick={onSwitchMode}
           disabled={actionBusy}
-          className="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm text-stone-700 hover:bg-stone-50 disabled:opacity-60">
+          className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
           {t('bootCheck.switchMode')}
         </button>
       </div>
diff --git a/app/src/components/BottomTabBar.tsx b/app/src/components/BottomTabBar.tsx
index c41df7795..e9f50790e 100644
--- a/app/src/components/BottomTabBar.tsx
+++ b/app/src/components/BottomTabBar.tsx
@@ -197,7 +197,7 @@ const BottomTabBar = () => {
         onBlur={e => {
           if (!e.currentTarget.contains(e.relatedTarget as Node)) setRevealed(false);
         }}>
-        <nav className="pointer-events-auto inline-flex items-center gap-1 rounded-sm border border-stone-300 bg-stone-200 shadow-soft px-1 py-1">
+        <nav className="pointer-events-auto inline-flex items-center gap-1 rounded-sm border border-stone-300 dark:border-neutral-700 bg-stone-200 dark:bg-neutral-900 shadow-soft px-1 py-1">
           {tabs.map(tab => {
             const active = isActive(tab.path);
             const showBadge = tab.id === 'notifications' && unreadCount > 0;
@@ -216,8 +216,8 @@ const BottomTabBar = () => {
                 onClick={() => navigate(tab.path)}
                 className={`group relative flex items-center px-2 py-2 rounded-sm text-sm transition-colors duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] cursor-pointer ${
                   active
-                    ? 'bg-white text-stone-900 font-semibold shadow-sm'
-                    : 'bg-transparent text-stone-500 hover:bg-stone-300/50 hover:text-stone-700'
+                    ? 'bg-white dark:bg-neutral-800 text-stone-900 dark:text-neutral-100 font-semibold shadow-sm'
+                    : 'bg-transparent text-stone-500 dark:text-neutral-400 hover:bg-stone-300/50 dark:hover:bg-neutral-800/60 hover:text-stone-700 dark:hover:text-neutral-200'
                 }`}
                 aria-label={
                   tab.id === 'notifications' && unreadCount > 0
diff --git a/app/src/components/ConnectionIndicator.tsx b/app/src/components/ConnectionIndicator.tsx
index 9164f68f0..d7a8baee5 100644
--- a/app/src/components/ConnectionIndicator.tsx
+++ b/app/src/components/ConnectionIndicator.tsx
@@ -77,7 +77,7 @@ const ConnectionIndicator = ({
 
   return (
     <div className={`${className}`}>
-      <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-stone-50 border border-stone-200">
+      <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800">
         <div
           className={`w-2 h-2 ${config.color} rounded-full ${config.pulse ? 'animate-pulse' : ''}`}
         />
diff --git a/app/src/components/LanguageSelect.tsx b/app/src/components/LanguageSelect.tsx
index df7b0d982..4dbc01609 100644
--- a/app/src/components/LanguageSelect.tsx
+++ b/app/src/components/LanguageSelect.tsx
@@ -28,7 +28,7 @@ interface LanguageSelectProps {
 }
 
 const DEFAULT_CLASS =
-  "appearance-none rounded-lg border border-stone-200 bg-white bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%20fill=%22%2378716c%22><path%20d=%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22/></svg>')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem_1rem] py-2 pl-3 pr-8 text-xs font-medium text-stone-700 hover:border-stone-300 hover:bg-stone-50 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 cursor-pointer";
+  "appearance-none rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%20fill=%22%2378716c%22><path%20d=%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22/></svg>')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem_1rem] py-2 pl-3 pr-8 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:border-stone-300 dark:hover:border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 cursor-pointer";
 
 /**
  * Shared language picker used by the boot-check gate and the Settings home
diff --git a/app/src/components/OpenhumanLinkModal.tsx b/app/src/components/OpenhumanLinkModal.tsx
index b9c8df7bb..3283e4380 100644
--- a/app/src/components/OpenhumanLinkModal.tsx
+++ b/app/src/components/OpenhumanLinkModal.tsx
@@ -86,15 +86,17 @@ const OpenhumanLinkModal = () => {
       role="dialog"
       aria-modal="true">
       <div
-        className="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
+        className="w-full max-w-md rounded-2xl bg-white dark:bg-neutral-900 shadow-xl overflow-hidden"
         onClick={e => e.stopPropagation()}>
-        <div className="flex items-center justify-between border-b border-stone-100 px-5 py-3">
-          <h2 className="text-sm font-semibold text-stone-900">{titleForPath(activePath, t)}</h2>
+        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-5 py-3">
+          <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {titleForPath(activePath, t)}
+          </h2>
           <button
             type="button"
             onClick={close}
             aria-label="Close"
-            className="rounded p-1 text-stone-500 hover:bg-stone-100 hover:text-stone-800">
+            className="rounded p-1 text-stone-500 dark:text-neutral-400 hover:bg-stone-100 dark:hover:bg-neutral-800/60 hover:text-stone-800 dark:hover:text-neutral-100">
             <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
               <path
                 strokeLinecap="round"
@@ -125,7 +127,7 @@ const MessagingSetupBridge = ({ onClose }: { onClose: () => void }) => {
   if (loading && !telegram) {
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-        <div className="rounded-2xl bg-white px-6 py-4 text-sm text-stone-600 shadow-xl">
+        <div className="rounded-2xl bg-white dark:bg-neutral-900 px-6 py-4 text-sm text-stone-600 dark:text-neutral-300 shadow-xl">
           {t('app.openhumanLink.loadingChannelSetup')}
         </div>
       </div>
@@ -138,14 +140,14 @@ const MessagingSetupBridge = ({ onClose }: { onClose: () => void }) => {
         className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
         onClick={onClose}>
         <div
-          className="rounded-2xl bg-white p-6 text-sm text-stone-700 shadow-xl max-w-sm"
+          className="rounded-2xl bg-white dark:bg-neutral-900 p-6 text-sm text-stone-700 dark:text-neutral-200 shadow-xl max-w-sm"
           onClick={e => e.stopPropagation()}>
           <p>{t('app.openhumanLink.telegramUnavailable')}</p>
           <div className="mt-3 flex justify-end">
             <button
               type="button"
               onClick={onClose}
-              className="rounded-lg border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-50">
+              className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
               {t('common.close')}
             </button>
           </div>
@@ -258,10 +260,10 @@ const NotificationsBody = ({ close }: { close: () => void }) => {
   };
 
   return (
-    <div className="space-y-4 text-sm text-stone-700">
+    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
       <p>{t('app.openhumanLink.notifications.intro')}</p>
       {permissionState === 'denied' && (
-        <div className="rounded-xl border border-coral-200 bg-coral-50 p-3 text-xs text-coral-700">
+        <div className="rounded-xl border border-coral-200 bg-coral-50 dark:bg-coral-500/15 p-3 text-xs text-coral-700 dark:text-coral-300">
           {t('app.openhumanLink.notifications.blocked')}
           <br />
           {t('app.openhumanLink.notifications.blockedStep1')}
@@ -272,7 +274,7 @@ const NotificationsBody = ({ close }: { close: () => void }) => {
         </div>
       )}
       {(permissionState === 'prompt' || permissionState === 'unknown') && (
-        <div className="rounded-xl border border-stone-200 bg-stone-50 p-3 text-xs text-stone-700">
+        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 text-xs text-stone-700 dark:text-neutral-200">
           {t('app.openhumanLink.notifications.promptHint')}
         </div>
       )}
@@ -305,13 +307,15 @@ const NotificationsBody = ({ close }: { close: () => void }) => {
 const BillingBody = ({ close }: { close: () => void }) => {
   const { t } = useT();
   return (
-    <div className="space-y-4 text-sm text-stone-700">
-      <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
-        <p className="text-xs uppercase tracking-wide text-stone-500">
+    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
+      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+        <p className="text-xs uppercase tracking-wide text-stone-500 dark:text-neutral-400">
           {t('app.openhumanLink.billing.trialCredit')}
         </p>
-        <p className="mt-1 text-2xl font-semibold text-stone-900">$1.00</p>
-        <p className="mt-1 text-xs text-stone-500">{t('app.openhumanLink.billing.trialDesc')}</p>
+        <p className="mt-1 text-2xl font-semibold text-stone-900 dark:text-neutral-100">$1.00</p>
+        <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
+          {t('app.openhumanLink.billing.trialDesc')}
+        </p>
       </div>
       <button
         type="button"
@@ -333,9 +337,9 @@ const DISCORD_INVITE_URL = 'https://discord.tinyhumans.ai/';
 const DiscordBody = ({ close }: { close: () => void }) => {
   const { t } = useT();
   return (
-    <div className="space-y-4 text-sm text-stone-700">
+    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
       <p>{t('app.openhumanLink.discord.intro')}</p>
-      <ul className="space-y-1.5 text-xs text-stone-600 pl-1">
+      <ul className="space-y-1.5 text-xs text-stone-600 dark:text-neutral-300 pl-1">
         <li className="flex items-center gap-2">
           <span className="h-1.5 w-1.5 rounded-full bg-primary-400 flex-shrink-0" />
           {t('app.openhumanLink.discord.perk1')}
@@ -484,7 +488,7 @@ const AccountsSetupBody = ({ close }: { close: () => void }) => {
     : t('app.openhumanLink.accounts.done');
 
   return (
-    <div className="space-y-4 text-sm text-stone-700">
+    <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
       <p>{t('app.openhumanLink.accounts.intro')}</p>
       <div className="space-y-2">
         {providerDescriptors.map(p => {
@@ -494,19 +498,25 @@ const AccountsSetupBody = ({ close }: { close: () => void }) => {
           return (
             <div
               key={p.id}
-              className="flex items-center gap-3 rounded-xl border border-stone-100 bg-white p-3">
+              className="flex items-center gap-3 rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
               <ProviderIcon provider={p.id} className="h-5 w-5 flex-none" />
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-stone-900">{p.label}</div>
+                <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                  {p.label}
+                </div>
                 {on && status ? (
                   <div className="flex items-center gap-1.5">
                     <span
                       className={`inline-block h-1.5 w-1.5 rounded-full ${statusDisplay(status).dotClass}`}
                     />
-                    <span className="text-xs text-stone-500">{statusDisplay(status).label}</span>
+                    <span className="text-xs text-stone-500 dark:text-neutral-400">
+                      {statusDisplay(status).label}
+                    </span>
                   </div>
                 ) : (
-                  <p className="line-clamp-1 text-xs text-stone-500">{p.description}</p>
+                  <p className="line-clamp-1 text-xs text-stone-500 dark:text-neutral-400">
+                    {p.description}
+                  </p>
                 )}
               </div>
               <button
@@ -528,7 +538,9 @@ const AccountsSetupBody = ({ close }: { close: () => void }) => {
           );
         })}
       </div>
-      <p className="text-xs text-stone-400">{t('app.openhumanLink.accounts.webviewNote')}</p>
+      <p className="text-xs text-stone-400 dark:text-neutral-500">
+        {t('app.openhumanLink.accounts.webviewNote')}
+      </p>
       <DoneFooter close={close} onDone={handleDone} doneLabel={doneLabel} />
     </div>
   );
@@ -555,13 +567,13 @@ const DoneFooter = ({
       <button
         type="button"
         onClick={close}
-        className="text-xs font-medium text-stone-500 hover:text-stone-800">
+        className="text-xs font-medium text-stone-500 dark:text-neutral-400 hover:text-stone-800 dark:hover:text-neutral-100">
         {resolvedSkip}
       </button>
       <button
         type="button"
         onClick={onDone ?? close}
-        className="rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-50">
+        className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
         {resolvedDone}
       </button>
     </div>
diff --git a/app/src/components/PersistRehydrationScreen.tsx b/app/src/components/PersistRehydrationScreen.tsx
index 49399b932..dca3698a1 100644
--- a/app/src/components/PersistRehydrationScreen.tsx
+++ b/app/src/components/PersistRehydrationScreen.tsx
@@ -54,10 +54,14 @@ function PersistRehydrationScreen() {
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-canvas-50 p-6">
-      <div className="max-w-sm w-full space-y-4 rounded-xl border border-stone-200 bg-white p-6 shadow-soft text-center">
-        <p className="text-sm font-medium text-stone-900">{t('app.persistRehydration.heading')}</p>
-        <p className="text-xs text-stone-500 leading-relaxed">{t('app.persistRehydration.body')}</p>
+    <div className="fixed inset-0 flex items-center justify-center bg-canvas-50 dark:bg-neutral-950 p-6">
+      <div className="max-w-sm w-full space-y-4 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft text-center">
+        <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+          {t('app.persistRehydration.heading')}
+        </p>
+        <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+          {t('app.persistRehydration.body')}
+        </p>
         <button
           type="button"
           onClick={handleReset}
diff --git a/app/src/components/PillTabBar.tsx b/app/src/components/PillTabBar.tsx
index 5e542cecd..51571e5fe 100644
--- a/app/src/components/PillTabBar.tsx
+++ b/app/src/components/PillTabBar.tsx
@@ -16,9 +16,9 @@ interface PillTabBarProps<T extends string> {
 }
 
 export default function PillTabBar<T extends string>({
-  activeClassName = 'border-primary-200 bg-primary-50 text-primary-700',
+  activeClassName = 'border-primary-200 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300',
   containerClassName = 'flex gap-2 overflow-x-auto pb-1 scrollbar-hide',
-  inactiveClassName = 'border-stone-200 bg-white text-stone-600 hover:bg-stone-50',
+  inactiveClassName = 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800/60',
   items,
   onChange,
   renderItem,
diff --git a/app/src/components/RouteLoadingScreen.tsx b/app/src/components/RouteLoadingScreen.tsx
index 3b9070d74..3b37aafa5 100644
--- a/app/src/components/RouteLoadingScreen.tsx
+++ b/app/src/components/RouteLoadingScreen.tsx
@@ -8,7 +8,7 @@ const RouteLoadingScreen = ({ label }: RouteLoadingScreenProps) => {
   const { t } = useT();
   return (
     <div className="h-full min-h-[280px] w-full flex items-center justify-center">
-      <div className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-700">
+      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3 text-sm text-stone-700 dark:text-neutral-200">
         {label ?? t('app.routeLoading.initializing')}
       </div>
     </div>
diff --git a/app/src/components/accounts/AddAccountModal.tsx b/app/src/components/accounts/AddAccountModal.tsx
index e400801bf..99b7d7973 100644
--- a/app/src/components/accounts/AddAccountModal.tsx
+++ b/app/src/components/accounts/AddAccountModal.tsx
@@ -38,14 +38,16 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
       aria-modal="true"
       onClick={onClose}>
       <div
-        className="w-[420px] max-w-[90vw] rounded-2xl bg-white p-6 shadow-strong"
+        className="w-[420px] max-w-[90vw] rounded-2xl bg-white dark:bg-neutral-900 p-6 shadow-strong"
         onClick={e => e.stopPropagation()}>
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-stone-900">{t('accounts.addModal.title')}</h2>
+          <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+            {t('accounts.addModal.title')}
+          </h2>
           <button
             ref={closeBtnRef}
             onClick={onClose}
-            className="rounded p-1 text-stone-500 hover:bg-stone-100"
+            className="rounded p-1 text-stone-500 dark:text-neutral-400 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60"
             aria-label={t('common.close')}>
             <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -60,7 +62,7 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
 
         <div className="space-y-1">
           {available.length === 0 ? (
-            <div className="rounded-lg border border-dashed border-stone-200 p-6 text-center text-sm text-stone-500">
+            <div className="rounded-lg border border-dashed border-stone-200 dark:border-neutral-800 p-6 text-center text-sm text-stone-500 dark:text-neutral-400">
               {t('accounts.addModal.allConnected')}
             </div>
           ) : (
@@ -68,9 +70,11 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
               <button
                 key={p.id}
                 onClick={() => onPick(p)}
-                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-stone-100">
+                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60">
                 <ProviderIcon provider={p.id} className="h-5 w-5 flex-none" />
-                <span className="text-sm font-medium text-stone-900">{p.label}</span>
+                <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                  {p.label}
+                </span>
               </button>
             ))
           )}
diff --git a/app/src/components/accounts/RespondQueuePanel.tsx b/app/src/components/accounts/RespondQueuePanel.tsx
index 8cca27345..fb24eb630 100644
--- a/app/src/components/accounts/RespondQueuePanel.tsx
+++ b/app/src/components/accounts/RespondQueuePanel.tsx
@@ -36,26 +36,26 @@ export default function RespondQueuePanel({
 }: RespondQueuePanelProps) {
   const { t } = useT();
   return (
-    <aside className="flex w-80 flex-none flex-col border-l border-stone-200 bg-white">
-      <div className="flex flex-none items-center justify-between border-b border-stone-100 px-4 py-3">
+    <aside className="flex w-80 flex-none flex-col border-l border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div className="flex flex-none items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-4 py-3">
         <div>
-          <h3 className="text-sm font-semibold text-stone-800">
+          <h3 className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
             {t('accounts.respondQueue.title')}
           </h3>
-          <p className="text-xs text-stone-500">
+          <p className="text-xs text-stone-500 dark:text-neutral-400">
             {count} {t('accounts.respondQueue.pending')}
           </p>
         </div>
         <button
           type="button"
           onClick={onRefresh}
-          className="rounded-lg border border-stone-200 px-2 py-1 text-xs text-stone-600 hover:bg-stone-50">
+          className="rounded-lg border border-stone-200 dark:border-neutral-800 px-2 py-1 text-xs text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
           {t('common.refresh')}
         </button>
       </div>
       <div className="flex-1 overflow-y-auto px-3 py-3">
         {status === 'loading' && items.length === 0 ? (
-          <p className="rounded-lg bg-stone-50 px-3 py-2 text-xs text-stone-500">
+          <p className="rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-xs text-stone-500 dark:text-neutral-400">
             {t('accounts.respondQueue.loading')}
           </p>
         ) : null}
@@ -67,7 +67,7 @@ export default function RespondQueuePanel({
         ) : null}
 
         {items.length === 0 && status !== 'loading' ? (
-          <p className="rounded-lg bg-stone-50 px-3 py-2 text-xs text-stone-500">
+          <p className="rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-xs text-stone-500 dark:text-neutral-400">
             {t('accounts.respondQueue.empty')}
           </p>
         ) : null}
@@ -82,18 +82,22 @@ export default function RespondQueuePanel({
                   void openUrl(item.deepLink);
                 }
               }}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-left transition-colors hover:bg-stone-50 disabled:cursor-default"
+              className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-left transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:cursor-default"
               disabled={!item.deepLink}>
               <div className="flex items-center justify-between gap-2">
-                <p className="truncate text-xs font-medium text-stone-800">{queueTitle(item)}</p>
-                <span className="rounded-full bg-stone-100 px-2 py-0.5 text-[10px] uppercase text-stone-600">
+                <p className="truncate text-xs font-medium text-stone-800 dark:text-neutral-100">
+                  {queueTitle(item)}
+                </p>
+                <span className="rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-[10px] uppercase text-stone-600 dark:text-neutral-300">
                   {item.provider}
                 </span>
               </div>
               {item.snippet ? (
-                <p className="mt-1 line-clamp-2 text-xs text-stone-600">{item.snippet}</p>
+                <p className="mt-1 line-clamp-2 text-xs text-stone-600 dark:text-neutral-300">
+                  {item.snippet}
+                </p>
               ) : null}
-              <div className="mt-1 flex items-center justify-between text-[10px] text-stone-500">
+              <div className="mt-1 flex items-center justify-between text-[10px] text-stone-500 dark:text-neutral-400">
                 <span>{item.senderName ?? item.senderHandle ?? item.accountId}</span>
                 <span>{relativeTime(item.timestamp)}</span>
               </div>
diff --git a/app/src/components/accounts/WebviewHost.tsx b/app/src/components/accounts/WebviewHost.tsx
index b89db7a39..ff99161fb 100644
--- a/app/src/components/accounts/WebviewHost.tsx
+++ b/app/src/components/accounts/WebviewHost.tsx
@@ -71,7 +71,7 @@ const LoadingPhaseHint = ({ accountId }: { accountId: string }) => {
   return (
     <span
       data-testid={`webview-loading-hint-${accountId}`}
-      className="text-[11px] font-medium text-stone-400">
+      className="text-[11px] font-medium text-stone-400 dark:text-neutral-500">
       {text}
     </span>
   );
@@ -194,7 +194,7 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
   return (
     <div
       ref={ref}
-      className="relative h-full w-full overflow-hidden rounded-2xl border border-stone-200/70 bg-stone-100 shadow-soft"
+      className="relative h-full w-full overflow-hidden rounded-2xl border border-stone-200 dark:border-neutral-800/70 bg-stone-100 dark:bg-neutral-800 shadow-soft"
       aria-label={`webview host for account ${accountId}`}>
       {/* Branded placeholder + (optional) loading overlay collapsed into a
           single absolute container so we never paint two stacked / offset
@@ -209,7 +209,9 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
         <div
           data-testid={`webview-placeholder-${accountId}`}
           className={`pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 ${
-            isLoading ? 'text-stone-500' : 'text-stone-400'
+            isLoading
+              ? 'text-stone-500 dark:text-neutral-400'
+              : 'text-stone-400 dark:text-neutral-500'
           }`}
           role={isLoading ? 'status' : undefined}
           aria-live={isLoading ? 'polite' : undefined}
@@ -219,14 +221,14 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
             className={`h-12 w-12 ${isLoading ? '' : 'opacity-70'}`}
           />
           <span
-            className={`text-xs font-medium tracking-wide ${isLoading ? '' : 'text-stone-500'}`}>
+            className={`text-xs font-medium tracking-wide ${isLoading ? '' : 'text-stone-500 dark:text-neutral-400'}`}>
             {isLoading ? `${t('accounts.webviewHost.loading')} ${providerName}...` : providerName}
           </span>
           {isLoading ? (
             <div
               data-testid={`webview-loading-${accountId}`}
               className="flex flex-col items-center gap-2">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 border-t-stone-600" />
+              <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-stone-600 dark:border-t-neutral-400" />
               {/* Issue #1233 — `key={accountId}` forces React to unmount the
                   hint when the user switches between two still-loading
                   accounts so the elapsed counter doesn't carry the
@@ -240,13 +242,15 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
       {isTimeout ? (
         <div
           data-testid={`webview-timeout-${accountId}`}
-          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 bg-stone-50/95 px-6 text-center"
+          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 bg-stone-50 dark:bg-neutral-800/60 px-6 text-center"
           role="status"
           aria-live="polite"
           aria-label={t('accounts.webviewHost.loadTimeout')}>
           <div className="max-w-sm space-y-1">
-            <p className="text-sm font-semibold text-stone-800">{`${providerName} ${t('accounts.webviewHost.takingLonger')}`}</p>
-            <p className="text-xs text-stone-600">{t('accounts.webviewHost.timeoutHint')}</p>
+            <p className="text-sm font-semibold text-stone-800 dark:text-neutral-100">{`${providerName} ${t('accounts.webviewHost.takingLonger')}`}</p>
+            <p className="text-xs text-stone-600 dark:text-neutral-300">
+              {t('accounts.webviewHost.timeoutHint')}
+            </p>
           </div>
           <button
             type="button"
diff --git a/app/src/components/channels/ChannelCapabilities.tsx b/app/src/components/channels/ChannelCapabilities.tsx
index 8dc119633..82940cc2e 100644
--- a/app/src/components/channels/ChannelCapabilities.tsx
+++ b/app/src/components/channels/ChannelCapabilities.tsx
@@ -9,7 +9,7 @@ const ChannelCapabilities = ({ capabilities }: ChannelCapabilitiesProps) => {
       {capabilities.map(cap => (
         <span
           key={cap}
-          className="px-1.5 py-0.5 text-[10px] rounded bg-stone-100 text-stone-500 border border-stone-200">
+          className="px-1.5 py-0.5 text-[10px] rounded bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 border border-stone-200 dark:border-neutral-800">
           {cap.replace(/_/g, ' ')}
         </span>
       ))}
diff --git a/app/src/components/channels/ChannelConfigPanel.tsx b/app/src/components/channels/ChannelConfigPanel.tsx
index 5f2425aef..826d2922a 100644
--- a/app/src/components/channels/ChannelConfigPanel.tsx
+++ b/app/src/components/channels/ChannelConfigPanel.tsx
@@ -15,10 +15,14 @@ const ChannelConfigPanel = ({ selectedChannel, definitions }: ChannelConfigPanel
 
   return (
     <div className="space-y-4">
-      <section className="rounded-xl border border-stone-200 bg-white p-4 space-y-3">
+      <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
         <div>
-          <h3 className="text-base font-semibold text-stone-900">{definition.display_name}</h3>
-          <p className="text-xs text-stone-500 mt-1">{definition.description}</p>
+          <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+            {definition.display_name}
+          </h3>
+          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+            {definition.description}
+          </p>
         </div>
         {selectedChannel === 'telegram' && <TelegramConfig definition={definition} />}
         {selectedChannel === 'discord' && <DiscordConfig definition={definition} />}
diff --git a/app/src/components/channels/ChannelFieldInput.tsx b/app/src/components/channels/ChannelFieldInput.tsx
index 269f739c3..ca209412e 100644
--- a/app/src/components/channels/ChannelFieldInput.tsx
+++ b/app/src/components/channels/ChannelFieldInput.tsx
@@ -10,7 +10,7 @@ interface ChannelFieldInputProps {
 const ChannelFieldInput = ({ field, value, onChange, disabled }: ChannelFieldInputProps) => {
   return (
     <div>
-      <label className="block text-xs text-stone-500 mb-1">
+      <label className="block text-xs text-stone-500 dark:text-neutral-400 mb-1">
         {field.label}
         {field.required && <span className="text-coral-500 ml-0.5">*</span>}
       </label>
@@ -20,7 +20,7 @@ const ChannelFieldInput = ({ field, value, onChange, disabled }: ChannelFieldInp
         onChange={e => onChange(e.target.value)}
         placeholder={field.placeholder || field.label}
         disabled={disabled}
-        className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:border-primary-500/60 disabled:opacity-50"
+        className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:border-primary-500/60 disabled:opacity-50"
       />
     </div>
   );
diff --git a/app/src/components/channels/ChannelSelector.tsx b/app/src/components/channels/ChannelSelector.tsx
index 146994cce..07a0da353 100644
--- a/app/src/components/channels/ChannelSelector.tsx
+++ b/app/src/components/channels/ChannelSelector.tsx
@@ -31,11 +31,14 @@ const ChannelSelector = ({
   }, [channelConnections, t]);
 
   return (
-    <section className="rounded-xl border border-stone-200 bg-white p-4 space-y-4">
+    <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-sm font-semibold text-stone-900">{t('channels.title')}</h2>
-        <p className="text-xs text-stone-400">
-          {t('channels.activeRoute')}: <span className="text-primary-600">{activeRoute}</span>
+        <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          {t('channels.title')}
+        </h2>
+        <p className="text-xs text-stone-400 dark:text-neutral-500">
+          {t('channels.activeRoute')}:{' '}
+          <span className="text-primary-600 dark:text-primary-300">{activeRoute}</span>
         </p>
       </div>
 
@@ -59,8 +62,8 @@ const ChannelSelector = ({
               onClick={() => onSelectChannel(channelId)}
               className={`flex-1 flex items-center justify-between gap-2 rounded-lg border px-4 py-3 text-sm transition-colors ${
                 isSelected
-                  ? 'border-primary-500/60 bg-primary-50 text-primary-600'
-                  : 'border-stone-200 bg-stone-50 text-stone-600 hover:border-stone-300'
+                  ? 'border-primary-500/60 bg-primary-50 dark:bg-primary-500/15 text-primary-600 dark:text-primary-300'
+                  : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700'
               }`}>
               <span className="flex items-center gap-2">
                 <span className="text-base">{CHANNEL_ICONS[def.icon] ?? ''}</span>
diff --git a/app/src/components/channels/ChannelSetupModal.tsx b/app/src/components/channels/ChannelSetupModal.tsx
index 536f50ec2..cf81b7c7e 100644
--- a/app/src/components/channels/ChannelSetupModal.tsx
+++ b/app/src/components/channels/ChannelSetupModal.tsx
@@ -31,7 +31,7 @@ function ChannelConfigContent({ definition }: { definition: ChannelDefinition })
       return <DiscordConfig definition={definition} />;
     default:
       return (
-        <p className="text-sm text-stone-400 py-4">
+        <p className="text-sm text-stone-400 dark:text-neutral-500 py-4">
           {t('channels.configNotAvailable')} {definition.display_name}
         </p>
       );
@@ -73,7 +73,7 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
       aria-labelledby="channel-setup-title">
       <div
         ref={modalRef}
-        className="bg-white border border-stone-200 rounded-3xl shadow-large w-full max-w-[500px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
+        className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-3xl shadow-large w-full max-w-[500px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
         style={{
           animationDuration: '200ms',
           animationTimingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
@@ -82,23 +82,27 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
         tabIndex={-1}
         onClick={e => e.stopPropagation()}>
         {/* Header */}
-        <div className="px-5 pt-5 pb-4 border-b border-stone-200">
+        <div className="px-5 pt-5 pb-4 border-b border-stone-200 dark:border-neutral-800">
           <div className="flex items-start justify-between">
             <div className="flex-1 min-w-0 pr-2">
               <div className="flex items-center gap-2">
                 {icon && <span className="text-base">{icon}</span>}
-                <h2 id="channel-setup-title" className="text-base font-semibold text-stone-900">
+                <h2
+                  id="channel-setup-title"
+                  className="text-base font-semibold text-stone-900 dark:text-neutral-100">
                   {definition.display_name}
                 </h2>
-                <span className="px-1.5 py-0.5 text-[10px] font-medium rounded-md bg-primary-500/15 text-primary-600">
+                <span className="px-1.5 py-0.5 text-[10px] font-medium rounded-md bg-primary-500/15 text-primary-600 dark:text-primary-300">
                   {t('channels.channel')}
                 </span>
               </div>
-              <p className="text-xs text-stone-500 mt-1.5">{definition.description}</p>
+              <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1.5">
+                {definition.description}
+              </p>
             </div>
             <button
               onClick={onClose}
-              className="p-1 text-stone-400 hover:text-stone-900 transition-colors rounded-lg hover:bg-stone-100 flex-shrink-0">
+              className="p-1 text-stone-400 dark:text-neutral-500 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100 dark:hover:text-neutral-100 transition-colors rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 flex-shrink-0">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
diff --git a/app/src/components/channels/DiscordConfig.tsx b/app/src/components/channels/DiscordConfig.tsx
index 1ac34e5e6..5c3459fd6 100644
--- a/app/src/components/channels/DiscordConfig.tsx
+++ b/app/src/components/channels/DiscordConfig.tsx
@@ -276,7 +276,7 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
   return (
     <div className="space-y-3">
       {error && (
-        <div className="rounded-lg border border-coral-200 bg-coral-50 px-4 py-3 text-sm text-coral-700">
+        <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-4 py-3 text-sm text-coral-700 dark:text-coral-300">
           {error}
         </div>
       )}
@@ -288,13 +288,17 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
         const busy = busyKeys[compositeKey] ?? false;
 
         return (
-          <div key={spec.mode} className="rounded-lg border border-stone-200 bg-stone-50 p-3">
+          <div
+            key={spec.mode}
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
             <div className="flex items-start justify-between gap-3">
               <div>
-                <p className="text-sm font-medium text-stone-900">
+                <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                   {AUTH_MODE_LABELS[spec.mode] ?? spec.mode}
                 </p>
-                <p className="text-xs text-stone-500 mt-1">{spec.description}</p>
+                <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+                  {spec.description}
+                </p>
                 {connection?.lastError && (
                   <p className="text-xs text-coral-600 mt-1">{connection.lastError}</p>
                 )}
@@ -319,22 +323,22 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
 
             {/* Token card — managed_dm connecting state */}
             {spec.mode === 'managed_dm' && linkToken && status === 'connecting' && (
-              <div className="mt-3 rounded-lg border border-primary-200 bg-primary-50/60 p-3 space-y-2">
-                <p className="text-xs font-medium text-primary-700">
+              <div className="mt-3 rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50/60 dark:bg-primary-500/15 p-3 space-y-2">
+                <p className="text-xs font-medium text-primary-700 dark:text-primary-300">
                   {t('channels.discord.linkTokenLabel')}
                 </p>
                 <div className="flex items-center gap-2">
-                  <code className="flex-1 rounded bg-white border border-primary-200 px-2 py-1 text-xs font-mono text-stone-800 select-all break-all">
+                  <code className="flex-1 rounded bg-white dark:bg-neutral-900 border border-primary-200 dark:border-primary-500/30 px-2 py-1 text-xs font-mono text-stone-800 dark:text-neutral-100 select-all break-all">
                     {linkToken}
                   </code>
                   <button
                     type="button"
                     onClick={copyToken}
-                    className="shrink-0 rounded-lg border border-primary-300 px-2 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100">
+                    className="shrink-0 rounded-lg border border-primary-300 dark:border-primary-500/40 px-2 py-1 text-xs font-medium text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-500/20">
                     {copied ? t('common.copied') : t('common.copy')}
                   </button>
                 </div>
-                <p className="text-xs text-stone-500">
+                <p className="text-xs text-stone-500 dark:text-neutral-400">
                   {t('channels.discord.linkTokenInstruction').replace('{token}', linkToken)}
                 </p>
                 <p className="text-xs text-amber-600 font-medium">
@@ -346,14 +350,14 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
             {/* Connected state for managed_dm — show only Disconnect */}
             {spec.mode === 'managed_dm' && status === 'connected' ? (
               <div className="mt-3 flex items-center justify-between">
-                <p className="text-xs text-sage-700 font-medium">
+                <p className="text-xs text-sage-700 dark:text-sage-300 font-medium">
                   {t('channels.discord.accountLinked')}
                 </p>
                 <button
                   type="button"
                   disabled={busy}
                   onClick={() => handleDisconnect(spec.mode)}
-                  className="rounded-lg border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-600 hover:border-stone-300 disabled:opacity-50">
+                  className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700 disabled:opacity-50">
                   {t('accounts.disconnect')}
                 </button>
               </div>
@@ -373,7 +377,7 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
                   type="button"
                   disabled={busy || status === 'disconnected'}
                   onClick={() => handleDisconnect(spec.mode)}
-                  className="rounded-lg border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-600 hover:border-stone-300 disabled:opacity-50">
+                  className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700 disabled:opacity-50">
                   {t('accounts.disconnect')}
                 </button>
               </div>
diff --git a/app/src/components/channels/DiscordServerChannelPicker.tsx b/app/src/components/channels/DiscordServerChannelPicker.tsx
index c0e360b0f..f5c0fe851 100644
--- a/app/src/components/channels/DiscordServerChannelPicker.tsx
+++ b/app/src/components/channels/DiscordServerChannelPicker.tsx
@@ -157,20 +157,22 @@ const DiscordServerChannelPicker = ({
 
   return (
     <div className="mt-3 space-y-3">
-      <p className="text-xs font-medium text-stone-600">
+      <p className="text-xs font-medium text-stone-600 dark:text-neutral-300">
         {t('channels.discord.picker.serverChannelSelection')}
       </p>
 
       {/* Error banner */}
       {error && (
-        <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+        <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
           {error}
         </div>
       )}
 
       {/* Guild selector */}
       <div>
-        <label htmlFor="discord-guild-select" className="block text-xs text-stone-500 mb-1">
+        <label
+          htmlFor="discord-guild-select"
+          className="block text-xs text-stone-500 dark:text-neutral-400 mb-1">
           {t('channels.discord.picker.server')}
         </label>
         <select
@@ -178,7 +180,7 @@ const DiscordServerChannelPicker = ({
           value={selectedGuildId}
           onChange={e => handleGuildChange(e.target.value)}
           disabled={isLoading || guilds.length === 0}
-          className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:border-primary-500 focus:outline-none disabled:opacity-50">
+          className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none disabled:opacity-50">
           <option value="">
             {state === 'loading_guilds'
               ? t('channels.discord.picker.loadingServers')
@@ -193,7 +195,7 @@ const DiscordServerChannelPicker = ({
           ))}
         </select>
         {guilds.length === 0 && state === 'guilds_loaded' && (
-          <p className="mt-1 text-xs text-stone-400">
+          <p className="mt-1 text-xs text-stone-400 dark:text-neutral-500">
             {t('channels.discord.picker.botNotInServers')}
           </p>
         )}
@@ -202,7 +204,9 @@ const DiscordServerChannelPicker = ({
       {/* Channel selector */}
       {selectedGuildId && (
         <div>
-          <label htmlFor="discord-channel-select" className="block text-xs text-stone-500 mb-1">
+          <label
+            htmlFor="discord-channel-select"
+            className="block text-xs text-stone-500 dark:text-neutral-400 mb-1">
             {t('channels.discord.picker.channel')}
           </label>
           <select
@@ -210,7 +214,7 @@ const DiscordServerChannelPicker = ({
             value={selectedChannelId}
             onChange={e => handleChannelChange(e.target.value)}
             disabled={isLoading || channels.length === 0}
-            className="w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:border-primary-500 focus:outline-none disabled:opacity-50">
+            className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none disabled:opacity-50">
             <option value="">
               {state === 'loading_channels'
                 ? t('channels.discord.picker.loadingChannels')
@@ -244,8 +248,8 @@ const DiscordServerChannelPicker = ({
 
       {/* Permission check result */}
       {state === 'checking_permissions' && (
-        <div className="flex items-center gap-2 text-xs text-stone-500">
-          <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-stone-300 border-t-primary-500" />
+        <div className="flex items-center gap-2 text-xs text-stone-500 dark:text-neutral-400">
+          <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-primary-500" />
           {t('channels.discord.picker.checkingPermissions')}
         </div>
       )}
@@ -254,8 +258,8 @@ const DiscordServerChannelPicker = ({
         <div
           className={`rounded-lg border px-3 py-2 text-xs ${
             permissions.missing_permissions.length === 0
-              ? 'border-sage-200 bg-sage-50 text-sage-700'
-              : 'border-amber-200 bg-amber-50 text-amber-700'
+              ? 'border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 text-sage-700 dark:text-sage-300'
+              : 'border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300'
           }`}>
           {permissions.missing_permissions.length === 0 ? (
             <span>{t('channels.discord.picker.allPermissionsOk')}</span>
diff --git a/app/src/components/channels/TelegramConfig.tsx b/app/src/components/channels/TelegramConfig.tsx
index 7c846ceb3..451c3b631 100644
--- a/app/src/components/channels/TelegramConfig.tsx
+++ b/app/src/components/channels/TelegramConfig.tsx
@@ -297,7 +297,7 @@ const TelegramConfig = ({ definition }: TelegramConfigProps) => {
   return (
     <div className="space-y-3">
       {error && (
-        <div className="rounded-lg border border-coral-200 bg-coral-50 px-4 py-3 text-sm text-coral-700">
+        <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-4 py-3 text-sm text-coral-700 dark:text-coral-300">
           {error}
         </div>
       )}
@@ -308,13 +308,17 @@ const TelegramConfig = ({ definition }: TelegramConfigProps) => {
         const status: ChannelConnectionStatus = connection?.status ?? 'disconnected';
 
         return (
-          <div key={spec.mode} className="rounded-lg border border-stone-200 bg-stone-50 p-3">
+          <div
+            key={spec.mode}
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
             <div className="flex items-start justify-between gap-3">
               <div>
-                <p className="text-sm font-medium text-stone-900">
+                <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                   {AUTH_MODE_LABELS[spec.mode] ?? spec.mode}
                 </p>
-                <p className="text-xs text-stone-500 mt-1">{spec.description}</p>
+                <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+                  {spec.description}
+                </p>
                 {connection?.lastError && (
                   <p className="text-xs text-coral-600 mt-1">{connection.lastError}</p>
                 )}
@@ -350,7 +354,7 @@ const TelegramConfig = ({ definition }: TelegramConfigProps) => {
                 type="button"
                 disabled={busyKeys[compositeKey] || status === 'disconnected'}
                 onClick={() => handleDisconnect(spec.mode)}
-                className="rounded-lg border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-600 hover:border-stone-300 disabled:opacity-50">
+                className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700 disabled:opacity-50">
                 {t('accounts.disconnect')}
               </button>
             </div>
diff --git a/app/src/components/channels/WebChannelConfig.tsx b/app/src/components/channels/WebChannelConfig.tsx
index 8976b4831..39b8c019c 100644
--- a/app/src/components/channels/WebChannelConfig.tsx
+++ b/app/src/components/channels/WebChannelConfig.tsx
@@ -15,7 +15,9 @@ const WebChannelConfig = ({ definition: _definition }: WebChannelConfigProps) =>
           <ChannelStatusBadge status="connected" />
         </div>
       </div>
-      <p className="text-sm text-stone-500">{t('channels.web.alwaysAvailable')}</p>
+      <p className="text-sm text-stone-500 dark:text-neutral-400">
+        {t('channels.web.alwaysAvailable')}
+      </p>
     </div>
   );
 };
diff --git a/app/src/components/chat/TokenUsagePill.tsx b/app/src/components/chat/TokenUsagePill.tsx
index def9a8b80..ba627de14 100644
--- a/app/src/components/chat/TokenUsagePill.tsx
+++ b/app/src/components/chat/TokenUsagePill.tsx
@@ -20,24 +20,24 @@ interface PillSeverity {
 function severityFromPct(pct: number): PillSeverity {
   if (pct >= 0.9) {
     return {
-      bg: 'bg-coral-50',
-      text: 'text-coral-700',
-      ring: 'ring-coral-200',
+      bg: 'bg-coral-50 dark:bg-coral-500/15',
+      text: 'text-coral-700 dark:text-coral-300',
+      ring: 'ring-coral-200 dark:ring-coral-500/30',
       label: `${Math.round(pct * 100)}%`,
     };
   }
   if (pct >= 0.7) {
     return {
-      bg: 'bg-amber-50',
-      text: 'text-amber-700',
-      ring: 'ring-amber-200',
+      bg: 'bg-amber-50 dark:bg-amber-500/15',
+      text: 'text-amber-700 dark:text-amber-300',
+      ring: 'ring-amber-200 dark:ring-amber-500/30',
       label: `${Math.round(pct * 100)}%`,
     };
   }
   return {
-    bg: 'bg-sage-50',
-    text: 'text-sage-700',
-    ring: 'ring-sage-200',
+    bg: 'bg-sage-50 dark:bg-sage-500/15',
+    text: 'text-sage-700 dark:text-sage-300',
+    ring: 'ring-sage-200 dark:ring-sage-500/30',
     label: `${Math.round(pct * 100)}%`,
   };
 }
@@ -67,7 +67,7 @@ const TokenUsagePill = () => {
     <div className="flex items-center gap-1.5 text-[11px] leading-none">
       {showSessionCounter ? (
         <span
-          className="inline-flex items-center gap-1 rounded-full bg-stone-100 px-2 py-1 font-mono text-stone-600 ring-1 ring-stone-200/60"
+          className="inline-flex items-center gap-1 rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-1 font-mono text-stone-600 dark:text-neutral-300 ring-1 ring-stone-200/60 dark:ring-neutral-700"
           title={t('token.sessionTokens')
             .replace('{in}', sessionTokens.inputTokens.toLocaleString())
             .replace('{out}', sessionTokens.outputTokens.toLocaleString())
diff --git a/app/src/components/composio/ComposioConnectModal.tsx b/app/src/components/composio/ComposioConnectModal.tsx
index fa551bd71..de1fdf298 100644
--- a/app/src/components/composio/ComposioConnectModal.tsx
+++ b/app/src/components/composio/ComposioConnectModal.tsx
@@ -506,7 +506,7 @@ export default function ComposioConnectModal({
       aria-labelledby="composio-setup-title">
       <div
         ref={modalRef}
-        className="bg-white border border-stone-200 rounded-3xl shadow-large w-full max-w-[460px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
+        className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-3xl shadow-large w-full max-w-[460px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
         style={{
           animationDuration: '200ms',
           animationTimingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
@@ -515,21 +515,25 @@ export default function ComposioConnectModal({
         tabIndex={-1}
         onClick={e => e.stopPropagation()}>
         {/* Header */}
-        <div className="p-4 border-b border-stone-200">
+        <div className="p-4 border-b border-stone-200 dark:border-neutral-800">
           <div className="flex items-start justify-between">
             <div className="flex-1 min-w-0 pr-2">
               <div className="flex items-center gap-2">
                 {toolkit.icon}
-                <h2 id="composio-setup-title" className="text-base font-semibold text-stone-900">
+                <h2
+                  id="composio-setup-title"
+                  className="text-base font-semibold text-stone-900 dark:text-neutral-100">
                   {headerTitle}
                 </h2>
               </div>
-              <p className="text-xs text-stone-400 mt-1.5 line-clamp-2">{toolkit.description}</p>
+              <p className="text-xs text-stone-400 dark:text-neutral-500 mt-1.5 line-clamp-2">
+                {toolkit.description}
+              </p>
             </div>
             <button
               type="button"
               onClick={onClose}
-              className="p-1 text-stone-400 hover:text-stone-900 transition-colors rounded-lg hover:bg-stone-100 flex-shrink-0"
+              className="p-1 text-stone-400 dark:text-neutral-500 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100 dark:hover:text-neutral-100 transition-colors rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 flex-shrink-0"
               aria-label={t('common.close')}>
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -547,11 +551,11 @@ export default function ComposioConnectModal({
         <div className="p-4 space-y-3">
           {phase === 'idle' && (
             <>
-              <p className="text-sm text-stone-600">
+              <p className="text-sm text-stone-600 dark:text-neutral-300">
                 {`${t('composio.connect.idleDescription')} ${toolkit.name} ${t('composio.connect.idleDescriptionSuffix')}`}
               </p>
-              <div className="rounded-xl border border-stone-200 bg-stone-50 p-3">
-                <p className="mt-1 text-xs leading-relaxed text-stone-600">
+              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
+                <p className="mt-1 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
                   {toolkit.name} {t('composio.connect.permissionsNote')}{' '}
                   <span className="font-medium">{toolkit.permissionLabel}</span>.{' '}
                   {t('composio.connect.permissionsNoteSuffix')}
@@ -561,7 +565,7 @@ export default function ComposioConnectModal({
                 <div className="space-y-1.5">
                   <label
                     htmlFor="waba-id-input"
-                    className="block text-xs font-medium text-stone-700">
+                    className="block text-xs font-medium text-stone-700 dark:text-neutral-200">
                     {t('composio.connect.wabaIdLabel')}
                     <span className="ml-1 text-coral-500">*</span>
                   </label>
@@ -574,9 +578,9 @@ export default function ComposioConnectModal({
                       if (error) setError(null);
                     }}
                     placeholder="e.g. 123456789012345"
-                    className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-100"
+                    className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-100"
                   />
-                  <p className="text-[11px] leading-relaxed text-stone-400">
+                  <p className="text-[11px] leading-relaxed text-stone-400 dark:text-neutral-500">
                     Find it via <span className="font-mono">GET /me/businesses</span> then{' '}
                     <span className="font-mono">
                       GET /&#123;business_id&#125;/owned_whatsapp_business_accounts
@@ -607,7 +611,7 @@ export default function ComposioConnectModal({
 
           {phase === 'needs-subdomain' && (
             <>
-              <p className="text-sm text-stone-600">
+              <p className="text-sm text-stone-600 dark:text-neutral-300">
                 {`${t('composio.connect.needsSubdomain')} ${toolkit.name}, ${t('composio.connect.needsSubdomainSuffix')}`}
               </p>
               <AtlassianSubdomainInput
@@ -632,19 +636,21 @@ export default function ComposioConnectModal({
                   setSubdomainError(null);
                   setError(null);
                 }}
-                className="w-full rounded-xl border border-stone-200 bg-white text-stone-600 text-xs font-medium py-2 hover:bg-stone-50 transition-colors">
+                className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-600 dark:text-neutral-300 text-xs font-medium py-2 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors">
                 {t('common.cancel')}
               </button>
             </>
           )}
 
           {phase === 'authorizing' && (
-            <p className="text-sm text-stone-500">{t('composio.connect.requestingUrl')}</p>
+            <p className="text-sm text-stone-500 dark:text-neutral-400">
+              {t('composio.connect.requestingUrl')}
+            </p>
           )}
 
           {phase === 'waiting' && (
             <>
-              <div className="flex items-center gap-2 text-sm text-stone-700">
+              <div className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-200">
                 <div className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
                 {`${t('composio.connect.waitingFor')} ${toolkit.name} ${t('composio.connect.oauthComplete')}`}
               </div>
@@ -652,11 +658,13 @@ export default function ComposioConnectModal({
                 <button
                   type="button"
                   onClick={() => void openUrl(connectUrl)}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 text-stone-700 text-xs font-medium py-2 hover:bg-stone-100 transition-colors">
+                  className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-700 dark:text-neutral-200 text-xs font-medium py-2 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
                   {t('composio.connect.reopenBrowser')}
                 </button>
               )}
-              <p className="text-xs text-stone-400">{t('composio.connect.waitingHint')}</p>
+              <p className="text-xs text-stone-400 dark:text-neutral-500">
+                {t('composio.connect.waitingHint')}
+              </p>
             </>
           )}
 
@@ -688,7 +696,7 @@ export default function ComposioConnectModal({
                 <div>
                   {`${toolkit.name} ${t('composio.connect.isConnected')}`} &nbsp;
                   {activeConnection && deriveConnectionLabel(activeConnection) && (
-                    <span className="text-[11px] text-stone-400 font-mono">
+                    <span className="text-[11px] text-stone-400 dark:text-neutral-500 font-mono">
                       ({deriveConnectionLabel(activeConnection)})
                     </span>
                   )}
@@ -725,7 +733,9 @@ export default function ComposioConnectModal({
           )}
 
           {phase === 'disconnecting' && (
-            <p className="text-sm text-stone-500">{t('composio.connect.disconnecting')}</p>
+            <p className="text-sm text-stone-500 dark:text-neutral-400">
+              {t('composio.connect.disconnecting')}
+            </p>
           )}
 
           {phase === 'error' && (
@@ -741,7 +751,7 @@ export default function ComposioConnectModal({
                   );
                   setError(null);
                 }}
-                className="w-full rounded-xl border border-stone-200 bg-white text-stone-700 text-sm font-medium py-2 hover:bg-stone-50 transition-colors">
+                className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 text-sm font-medium py-2 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors">
                 {t('common.dismiss')}
               </button>
             </>
@@ -790,12 +800,14 @@ function ScopeToggles({ scopes, savingScope, onToggle, error }: ScopeTogglesProp
   const loading = scopes === null;
 
   return (
-    <div className="border-t border-stone-100 pt-3 mt-1 space-y-2">
+    <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1 space-y-2">
       <div className="flex items-baseline justify-between">
-        <h3 className="text-xs font-semibold text-stone-700 uppercase tracking-wide">
+        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
           {t('composio.connect.permissions')}
         </h3>
-        <p className="text-[10px] text-stone-400">{t('composio.connect.permissionsDefault')}</p>
+        <p className="text-[10px] text-stone-400 dark:text-neutral-500">
+          {t('composio.connect.permissionsDefault')}
+        </p>
       </div>
       <ul className="space-y-1.5">
         {SCOPE_ROWS.map(row => {
@@ -806,10 +818,14 @@ function ScopeToggles({ scopes, savingScope, onToggle, error }: ScopeTogglesProp
           return (
             <li
               key={row.key}
-              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-stone-50">
+              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
               <div className="min-w-0 flex-1">
-                <span className="text-sm font-medium text-stone-900">{rowLabel}</span>
-                <p className="text-[11px] text-stone-400 leading-snug">{rowHint}</p>
+                <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                  {rowLabel}
+                </span>
+                <p className="text-[11px] text-stone-400 dark:text-neutral-500 leading-snug">
+                  {rowHint}
+                </p>
               </div>
               <button
                 type="button"
@@ -822,7 +838,7 @@ function ScopeToggles({ scopes, savingScope, onToggle, error }: ScopeTogglesProp
                   enabled ? 'bg-primary-500' : 'bg-stone-300'
                 }`}>
                 <span
-                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
+                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
                     enabled ? 'translate-x-5' : 'translate-x-0.5'
                   } ${isSaving ? 'animate-pulse' : ''}`}
                 />
@@ -863,11 +879,11 @@ function AtlassianSubdomainInput({
     <div className="space-y-1.5">
       <label
         htmlFor="atlassian-subdomain-input"
-        className="block text-xs font-medium text-stone-700">
+        className="block text-xs font-medium text-stone-700 dark:text-neutral-200">
         {t('composio.connect.atlassianSubdomainLabel')}
         <span className="ml-1 text-coral-500">*</span>
       </label>
-      <div className="flex items-center rounded-xl border border-stone-200 bg-white focus-within:border-primary-400 focus-within:ring-2 focus-within:ring-primary-100 overflow-hidden">
+      <div className="flex items-center rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 focus-within:border-primary-400 focus-within:ring-2 focus-within:ring-primary-100 overflow-hidden">
         <input
           id="atlassian-subdomain-input"
           type="text"
@@ -877,9 +893,9 @@ function AtlassianSubdomainInput({
           placeholder="your-subdomain"
           aria-describedby="atlassian-subdomain-hint"
           aria-invalid={!!error}
-          className="flex-1 min-w-0 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 bg-transparent focus:outline-none"
+          className="flex-1 min-w-0 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 bg-transparent focus:outline-none"
         />
-        <span className="pr-3 text-xs text-stone-400 select-none whitespace-nowrap">
+        <span className="pr-3 text-xs text-stone-400 dark:text-neutral-500 select-none whitespace-nowrap">
           .atlassian.net
         </span>
       </div>
@@ -891,7 +907,9 @@ function AtlassianSubdomainInput({
           {error}
         </p>
       ) : (
-        <p id="atlassian-subdomain-hint" className="text-[11px] leading-relaxed text-stone-400">
+        <p
+          id="atlassian-subdomain-hint"
+          className="text-[11px] leading-relaxed text-stone-400 dark:text-neutral-500">
           {t('composio.connect.atlassianSubdomainHint')}
         </p>
       )}
diff --git a/app/src/components/composio/TriggerToggles.tsx b/app/src/components/composio/TriggerToggles.tsx
index c4ad7627b..91eaab9fb 100644
--- a/app/src/components/composio/TriggerToggles.tsx
+++ b/app/src/components/composio/TriggerToggles.tsx
@@ -136,7 +136,7 @@ export default function TriggerToggles({
 
   if (loadError) {
     return (
-      <div className="border-t border-stone-100 pt-3 mt-1">
+      <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1">
         <p className="text-[11px] text-coral-600">{loadError}</p>
       </div>
     );
@@ -144,22 +144,24 @@ export default function TriggerToggles({
 
   if (available === null) {
     return (
-      <div className="border-t border-stone-100 pt-3 mt-1">
-        <h3 className="text-xs font-semibold text-stone-700 uppercase tracking-wide">
+      <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1">
+        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
           {t('composio.triggers.heading')}
         </h3>
-        <p className="mt-1 text-[11px] text-stone-400">{t('composio.triggers.loading')}</p>
+        <p className="mt-1 text-[11px] text-stone-400 dark:text-neutral-500">
+          {t('composio.triggers.loading')}
+        </p>
       </div>
     );
   }
 
   if (available.length === 0) {
     return (
-      <div className="border-t border-stone-100 pt-3 mt-1">
-        <h3 className="text-xs font-semibold text-stone-700 uppercase tracking-wide">
+      <div className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1">
+        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
           {t('composio.triggers.heading')}
         </h3>
-        <p className="mt-1 text-[11px] text-stone-400">
+        <p className="mt-1 text-[11px] text-stone-400 dark:text-neutral-500">
           {`${t('composio.triggers.noneAvailable')} ${toolkitName}.`}
         </p>
       </div>
@@ -167,12 +169,14 @@ export default function TriggerToggles({
   }
 
   return (
-    <div className="border-t border-stone-100 pt-3 mt-1 space-y-2" data-testid="trigger-toggles">
+    <div
+      className="border-t border-stone-100 dark:border-neutral-800 pt-3 mt-1 space-y-2"
+      data-testid="trigger-toggles">
       <div className="flex items-baseline justify-between">
-        <h3 className="text-xs font-semibold text-stone-700 uppercase tracking-wide">
+        <h3 className="text-xs font-semibold text-stone-700 dark:text-neutral-200 uppercase tracking-wide">
           {t('composio.triggers.heading')}
         </h3>
-        <p className="text-[10px] text-stone-400">{`${t('composio.triggers.listenFrom')} ${toolkitName}`}</p>
+        <p className="text-[10px] text-stone-400 dark:text-neutral-500">{`${t('composio.triggers.listenFrom')} ${toolkitName}`}</p>
       </div>
       <ul className="space-y-1.5 max-h-56 overflow-y-auto pr-1">
         {available.map(entry => {
@@ -205,10 +209,16 @@ export default function TriggerToggles({
             <li
               key={sig}
               data-testid={`trigger-row-${sig}`}
-              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-stone-50">
+              className="flex items-start justify-between gap-3 rounded-lg px-2 py-1.5 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
               <div className="min-w-0 flex-1">
-                <span className="text-sm font-medium text-stone-900 break-all">{label}</span>
-                {sub && <p className="text-[11px] text-stone-400 leading-snug">{sub}</p>}
+                <span className="text-sm font-medium text-stone-900 dark:text-neutral-100 break-all">
+                  {label}
+                </span>
+                {sub && (
+                  <p className="text-[11px] text-stone-400 dark:text-neutral-500 leading-snug">
+                    {sub}
+                  </p>
+                )}
               </div>
               <button
                 type="button"
@@ -218,10 +228,10 @@ export default function TriggerToggles({
                 disabled={disabled}
                 onClick={() => void handleToggle(entry)}
                 className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 ${
-                  enabled ? 'bg-primary-500' : 'bg-stone-300'
+                  enabled ? 'bg-primary-500' : 'bg-stone-300 dark:bg-neutral-700'
                 }`}>
                 <span
-                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
+                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
                     enabled ? 'translate-x-5' : 'translate-x-0.5'
                   } ${isPending ? 'animate-pulse' : ''}`}
                 />
diff --git a/app/src/components/composio/toolkitMeta.tsx b/app/src/components/composio/toolkitMeta.tsx
index 7127e8294..a757666b1 100644
--- a/app/src/components/composio/toolkitMeta.tsx
+++ b/app/src/components/composio/toolkitMeta.tsx
@@ -227,7 +227,7 @@ const PLATFORM_KEYWORDS = [
 
 function GenericIntegrationIcon() {
   return (
-    <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-stone-100 text-stone-600 shadow-sm ring-1 ring-black/5">
+    <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 shadow-sm ring-1 ring-black/5">
       <svg className="h-[18px] w-[18px]" viewBox="0 0 24 24" aria-hidden="true" fill="none">
         <path
           d="M8 8h8v8H8zM5 12h3m8 0h3M12 5v3m0 8v3"
@@ -250,7 +250,7 @@ function ComposioLogoBadge({ slug, name }: { slug: string; name: string }) {
   }
 
   return (
-    <span className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-black/5">
+    <span className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-sm ring-1 ring-black/5">
       <img
         src={logoUrl}
         alt={`${name} logo`}
diff --git a/app/src/components/home/HomeBanners.tsx b/app/src/components/home/HomeBanners.tsx
index 1166f1d0e..02cd23234 100644
--- a/app/src/components/home/HomeBanners.tsx
+++ b/app/src/components/home/HomeBanners.tsx
@@ -22,16 +22,18 @@ export function UsageLimitBanner({
   const styles =
     tone === 'danger'
       ? {
-          card: 'border-coral-200 bg-gradient-to-r from-coral-50 via-rose-50 to-orange-50',
-          title: 'text-coral-700',
-          body: 'text-coral-500',
-          button: 'border-coral-700 text-coral-700 hover:text-coral-800',
+          card: 'border-coral-200 bg-gradient-to-r from-coral-50 via-rose-50 to-orange-50 dark:border-coral-500/30 dark:from-coral-900/30 dark:via-coral-900/20 dark:to-coral-900/10',
+          title: 'text-coral-700 dark:text-coral-300',
+          body: 'text-coral-500 dark:text-coral-300/80',
+          button:
+            'border-coral-700 text-coral-700 hover:text-coral-800 dark:border-coral-300 dark:text-coral-300 dark:hover:text-coral-200',
         }
       : {
-          card: 'border-amber-200 bg-gradient-to-r from-amber-50 via-orange-50 to-rose-50',
-          title: 'text-amber-700',
-          body: 'text-amber-600',
-          button: 'border-amber-700 text-amber-700 hover:text-amber-800',
+          card: 'border-amber-200 bg-gradient-to-r from-amber-50 via-orange-50 to-rose-50 dark:border-amber-500/30 dark:from-amber-900/30 dark:via-amber-900/20 dark:to-amber-900/10',
+          title: 'text-amber-700 dark:text-amber-300',
+          body: 'text-amber-600 dark:text-amber-300/80',
+          button:
+            'border-amber-700 text-amber-700 hover:text-amber-800 dark:border-amber-300 dark:text-amber-300 dark:hover:text-amber-200',
         };
 
   return (
@@ -62,23 +64,23 @@ export function UsageLimitBanner({
 export function PromotionalCreditsBanner({ promoCredits }: { promoCredits: number }) {
   const { t } = useT();
   return (
-    <div className="mb-3 rounded-2xl border border-amber-200 bg-gradient-to-r from-amber-50 via-orange-50 to-rose-50 px-4 py-4 text-left shadow-soft">
+    <div className="mb-3 rounded-2xl border border-amber-200 bg-gradient-to-r from-amber-50 via-orange-50 to-rose-50 px-4 py-4 text-left shadow-soft dark:border-amber-500/30 dark:from-amber-900/30 dark:via-amber-900/20 dark:to-amber-900/10">
       <div className="flex items-start gap-3">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100 text-lg">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-500/20 text-lg">
           🎉
         </div>
         <div className="min-w-0 flex-1">
-          <p className="text-sm font-semibold text-amber-700">
+          <p className="text-sm font-semibold text-amber-700 dark:text-amber-300">
             {t('home.banners.promoCreditsTitle').replace('{amount}', formatUsd(promoCredits))}
           </p>
-          <p className="mt-1 text-sm leading-relaxed text-amber-600">
+          <p className="mt-1 text-sm leading-relaxed text-amber-600 dark:text-amber-300/80">
             {t('home.banners.promoCreditsBody')}{' '}
             <button
               type="button"
               onClick={() => {
                 void openUrl(BILLING_DASHBOARD_URL);
               }}
-              className="cursor-pointer border-b border-amber-700 border-dashed font-bold text-amber-700 hover:text-amber-800">
+              className="cursor-pointer border-b border-amber-700 border-dashed font-bold text-amber-700 hover:text-amber-800 dark:border-amber-300 dark:text-amber-300 dark:hover:text-amber-200">
               {t('home.banners.getSubscription')}
             </button>{' '}
             {t('home.banners.promoCreditsUsage')}
@@ -92,27 +94,27 @@ export function PromotionalCreditsBanner({ promoCredits }: { promoCredits: numbe
 export function EarlyBirdyBanner({ onDismiss }: { onDismiss?: () => void }) {
   const { t } = useT();
   return (
-    <div className="relative mb-3 mt-3 rounded-2xl border border-orange-200 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50 px-4 py-4 text-left shadow-soft">
+    <div className="relative mb-3 mt-3 rounded-2xl border border-orange-200 bg-gradient-to-r from-orange-50 via-amber-50 to-orange-50 px-4 py-4 text-left shadow-soft dark:border-orange-500/30 dark:from-orange-900/30 dark:via-amber-900/20 dark:to-orange-900/10">
       {onDismiss && (
         <button
           type="button"
           onClick={onDismiss}
           aria-label={t('home.banners.earlyBirdDismiss')}
-          className="absolute right-3 top-3 rounded-md p-1 text-orange-500 hover:bg-orange-100 hover:text-orange-700">
+          className="absolute right-3 top-3 rounded-md p-1 text-orange-500 hover:bg-orange-100 hover:text-orange-700 dark:text-orange-300 dark:hover:bg-orange-500/10 dark:hover:text-orange-200">
           ✕
         </button>
       )}
       <div className="flex items-start gap-3">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-lg">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 dark:bg-orange-500/20 text-lg">
           🐦
         </div>
         <div className="min-w-0 flex-1">
-          <p className="text-sm font-semibold text-orange-700">
+          <p className="text-sm font-semibold text-orange-700 dark:text-orange-300">
             {t('home.banners.earlyBirdTitle')}
           </p>
-          <p className="mt-1 text-sm leading-relaxed text-orange-600">
+          <p className="mt-1 text-sm leading-relaxed text-orange-600 dark:text-orange-300/80">
             {t('home.banners.earlyBirdUseCode')}{' '}
-            <span className="rounded-md border border-orange-300 bg-white px-1.5 py-0.5 font-mono text-[12px] font-bold text-orange-700">
+            <span className="rounded-md border border-orange-300 bg-white px-1.5 py-0.5 font-mono text-[12px] font-bold text-orange-700 dark:border-orange-500/40 dark:bg-neutral-900 dark:text-orange-300">
               EARLYBIRDY
             </span>{' '}
             {t('home.banners.earlyBirdOn')}{' '}
@@ -121,7 +123,7 @@ export function EarlyBirdyBanner({ onDismiss }: { onDismiss?: () => void }) {
               onClick={() => {
                 void openUrl(BILLING_DASHBOARD_URL);
               }}
-              className="cursor-pointer border-b border-amber-700 border-dashed font-bold text-amber-700 hover:text-amber-800">
+              className="cursor-pointer border-b border-amber-700 border-dashed font-bold text-amber-700 hover:text-amber-800 dark:border-amber-300 dark:text-amber-300 dark:hover:text-amber-200">
               {t('home.banners.earlyBirdFirstSub')}
             </button>{' '}
           </p>
@@ -139,7 +141,7 @@ export function DiscordBanner() {
       onClick={() => {
         void openUrl(DISCORD_INVITE_URL);
       }}
-      className="mb-3 text-left mt-3 block rounded-2xl border border-[#CDD2FF] bg-gradient-to-r from-[#F6F7FF] via-[#F1F3FF] to-[#ECEFFF] px-4 py-4 text-[#414AAE] shadow-soft transition-transform transition-colors hover:-translate-y-0.5 hover:border-[#BCC3FF] hover:from-[#EEF0FF] hover:to-[#E5E9FF]">
+      className="mb-3 text-left mt-3 block w-full rounded-2xl border border-[#CDD2FF] bg-gradient-to-r from-[#F6F7FF] via-[#F1F3FF] to-[#ECEFFF] px-4 py-4 text-[#414AAE] shadow-soft transition-transform transition-colors hover:-translate-y-0.5 hover:border-[#BCC3FF] hover:from-[#EEF0FF] hover:to-[#E5E9FF] dark:border-[#5865F2]/30 dark:from-[#5865F2]/10 dark:via-[#5865F2]/15 dark:to-[#5865F2]/10 dark:text-[#A5B0FF] dark:hover:border-[#5865F2]/50 dark:hover:from-[#5865F2]/15 dark:hover:to-[#5865F2]/20">
       <div className="flex items-center gap-3">
         <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#5865F2]/12 text-[#5865F2]">
           <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -148,7 +150,9 @@ export function DiscordBanner() {
         </div>
         <div className="min-w-0 flex-1">
           <div className="text-sm font-semibold">{t('home.banners.discordTitle')}</div>
-          <div className="mt-0.5 text-sm text-[#5E66BC]">{t('home.banners.discordSubtitle')}</div>
+          <div className="mt-0.5 text-sm text-[#5E66BC] dark:text-[#8B95DD]">
+            {t('home.banners.discordSubtitle')}
+          </div>
         </div>
       </div>
     </button>
diff --git a/app/src/components/intelligence/ActionableCard.tsx b/app/src/components/intelligence/ActionableCard.tsx
index 629a9d745..073131b6a 100644
--- a/app/src/components/intelligence/ActionableCard.tsx
+++ b/app/src/components/intelligence/ActionableCard.tsx
@@ -88,13 +88,13 @@ function SnoozeDropdownPortal({ isOpen, buttonRef, onClose, onSnooze }: SnoozeDr
     <div
       ref={dropdownRef}
       data-snooze-dropdown
-      className="fixed py-1 bg-white border border-stone-200 rounded-lg shadow-xl min-w-[120px] z-[9999] animate-fade-in"
+      className="fixed py-1 bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-lg shadow-xl min-w-[120px] z-[9999] animate-fade-in"
       style={{ top: position.top, left: position.left }}>
       {SNOOZE_OPTIONS.map(option => (
         <button
           key={option.label}
           onClick={() => onSnooze(option.duration)}
-          className="w-full text-left px-3 py-1.5 text-xs text-stone-900 hover:bg-stone-100 transition-colors cursor-pointer">
+          className="w-full text-left px-3 py-1.5 text-xs text-stone-900 dark:text-neutral-100 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors cursor-pointer">
           {option.label}
         </button>
       ))}
@@ -237,7 +237,7 @@ export function ActionableCard({
   const priorityClasses = {
     critical: 'border-coral-500/30 bg-coral-500/5',
     important: 'border-amber-500/30 bg-amber-500/5',
-    normal: 'border-stone-200 bg-stone-50',
+    normal: 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60',
   };
 
   const priorityDotClasses = {
@@ -260,13 +260,13 @@ export function ActionableCard({
       <div
         className={`
           relative p-4 rounded-xl border backdrop-blur-sm transition-all duration-200
-          hover:bg-stone-50 hover:border-stone-200
+          hover:bg-stone-50 dark:hover:bg-neutral-800/60 hover:border-stone-200 dark:border-neutral-800
           ${priorityClasses[item.priority]}
         `}>
         {/* Main content row */}
         <div className="flex items-start gap-3">
           {/* Icon */}
-          <div className="w-8 h-8 flex items-center justify-center text-stone-600 flex-shrink-0 mt-0.5">
+          <div className="w-8 h-8 flex items-center justify-center text-stone-600 dark:text-neutral-300 flex-shrink-0 mt-0.5">
             {sourceIcon}
           </div>
 
@@ -274,9 +274,13 @@ export function ActionableCard({
           <div className="flex-1 min-w-0">
             <div className="flex items-start justify-between gap-3">
               <div className="flex-1 min-w-0">
-                <h3 className="text-sm font-medium text-stone-900 leading-snug">{item.title}</h3>
+                <h3 className="text-sm font-medium text-stone-900 dark:text-neutral-100 leading-snug">
+                  {item.title}
+                </h3>
                 {item.description && (
-                  <p className="text-xs text-stone-400 mt-1 leading-relaxed">{item.description}</p>
+                  <p className="text-xs text-stone-400 dark:text-neutral-500 mt-1 leading-relaxed">
+                    {item.description}
+                  </p>
                 )}
               </div>
 
@@ -285,7 +289,7 @@ export function ActionableCard({
                 {/* Complete button */}
                 <button
                   onClick={handleComplete}
-                  className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-sage-400 hover:bg-sage-400/10 transition-all duration-150"
+                  className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 hover:text-sage-400 hover:bg-sage-400/10 transition-all duration-150"
                   title={t('actionable.complete')}>
                   <svg
                     className="w-3.5 h-3.5"
@@ -304,7 +308,7 @@ export function ActionableCard({
                 {/* Dismiss button */}
                 <button
                   onClick={handleDismiss}
-                  className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-coral-400 hover:bg-coral-400/10 transition-all duration-150"
+                  className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 hover:text-coral-400 hover:bg-coral-400/10 transition-all duration-150"
                   title={t('actionable.dismiss')}>
                   <svg
                     className="w-3.5 h-3.5"
@@ -325,7 +329,7 @@ export function ActionableCard({
                   <button
                     ref={snoozeButtonRef}
                     onClick={() => setShowSnoozeMenu(!showSnoozeMenu)}
-                    className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-150"
+                    className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-150"
                     title={t('actionable.snooze')}>
                     <svg
                       className="w-3.5 h-3.5"
@@ -348,13 +352,15 @@ export function ActionableCard({
             <div className="flex items-center gap-2 mt-2">
               <div className="flex items-center gap-1.5">
                 <div className={`w-1.5 h-1.5 rounded-full ${priorityDotClasses[item.priority]}`} />
-                <span className="text-xs text-stone-500">{item.sourceLabel || item.source}</span>
+                <span className="text-xs text-stone-500 dark:text-neutral-400">
+                  {item.sourceLabel || item.source}
+                </span>
               </div>
-              <span className="text-xs text-stone-600">•</span>
-              <span className="text-xs text-stone-500">{timeAgo}</span>
+              <span className="text-xs text-stone-600 dark:text-neutral-300">•</span>
+              <span className="text-xs text-stone-500 dark:text-neutral-400">{timeAgo}</span>
               {isNew && (
                 <>
-                  <span className="text-xs text-stone-600">•</span>
+                  <span className="text-xs text-stone-600 dark:text-neutral-300">•</span>
                   <span className="text-xs bg-sage-500 text-white px-1.5 py-0.5 rounded-sm font-medium">
                     {t('actionable.new')}
                   </span>
diff --git a/app/src/components/intelligence/ConfirmationModal.tsx b/app/src/components/intelligence/ConfirmationModal.tsx
index 001ce131a..b82035262 100644
--- a/app/src/components/intelligence/ConfirmationModal.tsx
+++ b/app/src/components/intelligence/ConfirmationModal.tsx
@@ -37,13 +37,13 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
       className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/30 animate-fade-in"
       onClick={handleCancel}>
       <div
-        className="bg-white rounded-2xl max-w-md w-full shadow-large border border-stone-200 animate-slide-up"
+        className="bg-white dark:bg-neutral-900 rounded-2xl max-w-md w-full shadow-large border border-stone-200 dark:border-neutral-800 animate-slide-up"
         onClick={e => e.stopPropagation()}>
         {/* Header */}
         <div className="p-6 pb-4">
           <div className="flex items-center gap-3">
             {modal.destructive && (
-              <div className="w-10 h-10 rounded-full bg-coral-500/10 flex items-center justify-center flex-shrink-0">
+              <div className="w-10 h-10 rounded-full bg-coral-50 dark:bg-coral-500/10 flex items-center justify-center flex-shrink-0">
                 <svg
                   className="w-5 h-5 text-coral-400"
                   fill="none"
@@ -59,8 +59,10 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
               </div>
             )}
             <div className="flex-1">
-              <h2 className="text-lg font-semibold text-stone-900">{modal.title}</h2>
-              <p className="text-sm text-stone-600 mt-1">{modal.message}</p>
+              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+                {modal.title}
+              </h2>
+              <p className="text-sm text-stone-600 dark:text-neutral-300 mt-1">{modal.message}</p>
             </div>
           </div>
         </div>
@@ -68,12 +70,12 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
         {/* Don't show again option */}
         {modal.showDontShowAgain && (
           <div className="px-6 pb-2">
-            <label className="flex items-center gap-2 text-sm text-stone-600 cursor-pointer">
+            <label className="flex items-center gap-2 text-sm text-stone-600 dark:text-neutral-300 cursor-pointer">
               <input
                 type="checkbox"
                 checked={dontShowAgain}
                 onChange={e => setDontShowAgain(e.target.checked)}
-                className="rounded border-stone-300 bg-stone-100 text-primary-500 focus:ring-primary-500 focus:ring-offset-0"
+                className="rounded border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 text-primary-500 focus:ring-primary-500 focus:ring-offset-0"
               />
               {t('modal.dontShowAgain')}
             </label>
@@ -81,10 +83,10 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
         )}
 
         {/* Actions */}
-        <div className="flex items-center justify-end gap-3 p-6 pt-4 border-t border-stone-200">
+        <div className="flex items-center justify-end gap-3 p-6 pt-4 border-t border-stone-200 dark:border-neutral-800">
           <button
             onClick={handleCancel}
-            className="px-4 py-2 text-sm font-medium text-stone-600 hover:text-stone-900 rounded-lg hover:bg-stone-100 transition-colors">
+            className="px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100 rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
             {modal.cancelText || t('common.cancel')}
           </button>
           <button
diff --git a/app/src/components/intelligence/IntelligenceCallsTab.tsx b/app/src/components/intelligence/IntelligenceCallsTab.tsx
index b12408628..9dd499ffc 100644
--- a/app/src/components/intelligence/IntelligenceCallsTab.tsx
+++ b/app/src/components/intelligence/IntelligenceCallsTab.tsx
@@ -102,13 +102,17 @@ export default function IntelligenceCallsTab({ onToast }: Props) {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-base font-semibold text-stone-900">{t('calls.joinMeet')}</h2>
-        <p className="mt-1 text-sm text-stone-500">{t('calls.joinMeetDescription')}</p>
+        <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          {t('calls.joinMeet')}
+        </h2>
+        <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
+          {t('calls.joinMeetDescription')}
+        </p>
       </div>
 
       <form onSubmit={handleSubmit} className="space-y-4">
         <label className="block">
-          <span className="text-xs font-medium uppercase tracking-wide text-stone-500">
+          <span className="text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-neutral-400">
             {t('calls.meetLink')}
           </span>
           <input
@@ -119,13 +123,13 @@ export default function IntelligenceCallsTab({ onToast }: Props) {
             value={meetUrl}
             onChange={e => setMeetUrl(e.target.value)}
             placeholder={PLACEHOLDER_URL}
-            className="mt-1 w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100"
+            className="mt-1 w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:text-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100"
             required
           />
         </label>
 
         <label className="block">
-          <span className="text-xs font-medium uppercase tracking-wide text-stone-500">
+          <span className="text-xs font-medium uppercase tracking-wide text-stone-500 dark:text-neutral-400">
             {t('calls.displayName')}
           </span>
           <input
@@ -133,7 +137,7 @@ export default function IntelligenceCallsTab({ onToast }: Props) {
             value={displayName}
             onChange={e => setDisplayName(e.target.value)}
             maxLength={64}
-            className="mt-1 w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100"
+            className="mt-1 w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100"
             required
           />
         </label>
@@ -141,7 +145,7 @@ export default function IntelligenceCallsTab({ onToast }: Props) {
         {error && (
           <div
             role="alert"
-            className="rounded-xl border border-coral-200 bg-coral-50 px-3 py-2 text-sm text-coral-700">
+            className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-700 dark:text-coral-300">
             {error}
           </div>
         )}
@@ -156,24 +160,26 @@ export default function IntelligenceCallsTab({ onToast }: Props) {
 
       {activeCalls.length > 0 && (
         <div className="space-y-2">
-          <h3 className="text-xs font-semibold uppercase tracking-wide text-stone-500">
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
             {t('calls.activeCalls')}
           </h3>
           <ul className="space-y-2">
             {activeCalls.map(call => (
               <li
                 key={call.requestId}
-                className="flex items-center justify-between gap-3 rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
+                className="flex items-center justify-between gap-3 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
                 <div className="min-w-0">
-                  <div className="truncate text-sm font-medium text-stone-900">
+                  <div className="truncate text-sm font-medium text-stone-900 dark:text-neutral-100">
                     {call.displayName}
                   </div>
-                  <div className="truncate text-xs text-stone-500">{call.meetUrl}</div>
+                  <div className="truncate text-xs text-stone-500 dark:text-neutral-400">
+                    {call.meetUrl}
+                  </div>
                 </div>
                 <button
                   type="button"
                   onClick={() => handleClose(call.requestId)}
-                  className="shrink-0 rounded-lg border border-stone-200 bg-white px-3 py-1 text-xs text-stone-600 hover:border-coral-300 hover:text-coral-600">
+                  className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1 text-xs text-stone-600 dark:text-neutral-300 hover:border-coral-300 hover:text-coral-600 dark:text-coral-300">
                   {t('calls.leave')}
                 </button>
               </li>
diff --git a/app/src/components/intelligence/IntelligenceDreamsTab.tsx b/app/src/components/intelligence/IntelligenceDreamsTab.tsx
index d551c658d..a938ffce2 100644
--- a/app/src/components/intelligence/IntelligenceDreamsTab.tsx
+++ b/app/src/components/intelligence/IntelligenceDreamsTab.tsx
@@ -4,7 +4,7 @@ export default function IntelligenceDreamsTab() {
   const { t } = useT();
   return (
     <div className="glass rounded-2xl p-8 text-center animate-fade-up">
-      <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-sky-500/10">
+      <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-sky-50 dark:bg-sky-500/10">
         <svg className="w-8 h-8 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
             strokeLinecap="round"
@@ -20,9 +20,11 @@ export default function IntelligenceDreamsTab() {
           />
         </svg>
       </div>
-      <h2 className="text-lg font-semibold text-stone-900 mb-2">{t('memory.tab.dreams')}</h2>
-      <p className="text-stone-400 text-sm mb-1">{t('dreams.description')}</p>
-      <p className="text-xs text-stone-500">{t('dreams.comingSoon')}</p>
+      <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
+        {t('memory.tab.dreams')}
+      </h2>
+      <p className="text-stone-400 dark:text-neutral-500 text-sm mb-1">{t('dreams.description')}</p>
+      <p className="text-xs text-stone-500 dark:text-neutral-400">{t('dreams.comingSoon')}</p>
     </div>
   );
 }
diff --git a/app/src/components/intelligence/IntelligenceMemoryTab.tsx b/app/src/components/intelligence/IntelligenceMemoryTab.tsx
index ebebc0f1a..20bdbf6e7 100644
--- a/app/src/components/intelligence/IntelligenceMemoryTab.tsx
+++ b/app/src/components/intelligence/IntelligenceMemoryTab.tsx
@@ -47,7 +47,7 @@ export default function IntelligenceMemoryTab({
             placeholder={t('memory.search')}
             value={searchFilter}
             onChange={e => setSearchFilter(e.target.value)}
-            className="w-full px-3 py-2 text-sm bg-white border border-stone-200 rounded-lg text-stone-900 placeholder-stone-400 focus:outline-none focus:border-primary-500/50 transition-colors"
+            className="w-full px-3 py-2 text-sm bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-lg text-stone-900 dark:text-neutral-100 placeholder-stone-400 focus:outline-none focus:border-primary-500/50 transition-colors"
           />
         </div>
         <label htmlFor="actionable-source" className="sr-only">
@@ -57,7 +57,7 @@ export default function IntelligenceMemoryTab({
           id="actionable-source"
           value={sourceFilter}
           onChange={e => setSourceFilter(e.target.value as ActionableItemSource | 'all')}
-          className="px-3 py-2 text-sm bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:border-primary-500/50 transition-colors">
+          className="px-3 py-2 text-sm bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-lg text-stone-900 dark:text-neutral-100 focus:outline-none focus:border-primary-500/50 transition-colors">
           <option value="all">{t('memory.sourceFilter.all')}</option>
           <option value="email">{t('memory.sourceFilter.email')}</option>
           <option value="calendar">{t('memory.sourceFilter.calendar')}</option>
@@ -74,16 +74,22 @@ export default function IntelligenceMemoryTab({
           <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-primary-500/10">
             <div className="w-8 h-8 border-2 border-primary-400 border-t-transparent rounded-full animate-spin" />
           </div>
-          <h2 className="text-lg font-semibold text-stone-900 mb-2">{t('memory.loading')}</h2>
-          <p className="text-stone-400 text-sm">{t('memory.fetching')}</p>
+          <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
+            {t('memory.loading')}
+          </h2>
+          <p className="text-stone-400 dark:text-neutral-500 text-sm">{t('memory.fetching')}</p>
         </div>
       ) : isRunning && items.length === 0 ? (
         <div className="glass rounded-2xl p-8 text-center animate-fade-up">
           <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-primary-500/10">
             <div className="w-8 h-8 border-2 border-primary-400 border-t-transparent rounded-full animate-spin" />
           </div>
-          <h2 className="text-lg font-semibold text-stone-900 mb-2">{t('memory.analyzing')}</h2>
-          <p className="text-stone-400 text-sm">{t('memory.analyzingHint')}</p>
+          <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
+            {t('memory.analyzing')}
+          </h2>
+          <p className="text-stone-400 dark:text-neutral-500 text-sm">
+            {t('memory.analyzingHint')}
+          </p>
         </div>
       ) : timeGroups.length === 0 ? (
         <div className="glass rounded-2xl p-8 text-center animate-fade-up">
@@ -103,22 +109,30 @@ export default function IntelligenceMemoryTab({
           </div>
           {searchFilter || sourceFilter !== 'all' ? (
             <>
-              <h2 className="text-lg font-semibold text-stone-900 mb-2">{t('memory.noMatches')}</h2>
-              <p className="text-stone-400 text-sm">{t('memory.noMatchesHint')}</p>
+              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
+                {t('memory.noMatches')}
+              </h2>
+              <p className="text-stone-400 dark:text-neutral-500 text-sm">
+                {t('memory.noMatchesHint')}
+              </p>
             </>
           ) : usingMemoryData ? (
             <>
-              <h2 className="text-lg font-semibold text-stone-900 mb-2">
+              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
                 {t('memory.allCaughtUp')}
               </h2>
-              <p className="text-stone-400 text-sm">{t('memory.allCaughtUpHint')}</p>
+              <p className="text-stone-400 dark:text-neutral-500 text-sm">
+                {t('memory.allCaughtUpHint')}
+              </p>
             </>
           ) : (
             <>
-              <h2 className="text-lg font-semibold text-stone-900 mb-2">
+              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100 mb-2">
                 {t('memory.noAnalysis')}
               </h2>
-              <p className="text-stone-400 text-sm mb-4">{t('memory.noAnalysisHint')}</p>
+              <p className="text-stone-400 dark:text-neutral-500 text-sm mb-4">
+                {t('memory.noAnalysisHint')}
+              </p>
               <button
                 onClick={() => void handleAnalyzeNow()}
                 disabled={isRunning}
@@ -131,7 +145,7 @@ export default function IntelligenceMemoryTab({
       ) : (
         <div className="space-y-6">
           {isRunning && (
-            <div className="flex items-center gap-2 text-xs text-stone-400 animate-fade-up">
+            <div className="flex items-center gap-2 text-xs text-stone-400 dark:text-neutral-500 animate-fade-up">
               <div className="w-3 h-3 border border-stone-400 border-t-transparent rounded-full animate-spin" />
               {t('memory.analyzing')}
             </div>
@@ -142,8 +156,10 @@ export default function IntelligenceMemoryTab({
               className="animate-fade-up"
               style={{ animationDelay: `${groupIndex * 50}ms` }}>
               <div className="flex items-center justify-between mb-3">
-                <h2 className="text-sm font-semibold text-stone-900 opacity-80">{group.label}</h2>
-                <div className="text-xs bg-stone-100 text-stone-900 px-2 py-1 rounded-full">
+                <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 opacity-80">
+                  {group.label}
+                </h2>
+                <div className="text-xs bg-stone-100 dark:bg-neutral-800 text-stone-900 dark:text-neutral-100 px-2 py-1 rounded-full">
                   {group.count}
                 </div>
               </div>
diff --git a/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx b/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
index 10e6f9f9b..79a691174 100644
--- a/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
+++ b/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
@@ -175,19 +175,19 @@ export default function IntelligenceSubconsciousTab({
   return (
     <div className="space-y-6 animate-fade-up">
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 text-xs text-stone-400">
+        <div className="flex items-center gap-2 text-xs text-stone-400 dark:text-neutral-500">
           {status && (
             <>
               <span>
                 {status.task_count} {t('subconscious.tasks')}
               </span>
-              <span className="text-stone-300">|</span>
+              <span className="text-stone-300 dark:text-neutral-600">|</span>
               <span>
                 {status.total_ticks} {t('subconscious.ticks')}
               </span>
               {status.last_tick_at && (
                 <>
-                  <span className="text-stone-300">|</span>
+                  <span className="text-stone-300 dark:text-neutral-600">|</span>
                   <span>
                     {t('subconscious.last')}:{' '}
                     {new Date(status.last_tick_at * 1000).toLocaleTimeString()}
@@ -196,7 +196,7 @@ export default function IntelligenceSubconsciousTab({
               )}
               {status.consecutive_failures > 0 && (
                 <>
-                  <span className="text-stone-300">|</span>
+                  <span className="text-stone-300 dark:text-neutral-600">|</span>
                   <span className="text-coral-500">
                     {status.consecutive_failures} {t('subconscious.failed')}
                   </span>
@@ -208,7 +208,7 @@ export default function IntelligenceSubconsciousTab({
         <div className="flex items-center gap-2">
           <div className="flex items-center gap-1.5">
             <svg
-              className="w-3 h-3 text-stone-400"
+              className="w-3 h-3 text-stone-400 dark:text-neutral-500"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -226,7 +226,7 @@ export default function IntelligenceSubconsciousTab({
               }}
               disabled
               title={t('subconscious.tickInterval')}
-              className="text-xs bg-stone-50 border border-stone-200 rounded px-1.5 py-0.5 text-stone-500 cursor-not-allowed">
+              className="text-xs bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 rounded px-1.5 py-0.5 text-stone-500 dark:text-neutral-400 cursor-not-allowed">
               <option value={5}>5 min</option>
               <option value={10}>10 min</option>
               <option value={15}>15 min</option>
@@ -240,7 +240,7 @@ export default function IntelligenceSubconsciousTab({
           <button
             onClick={() => void handleRunTick()}
             disabled={triggering}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-stone-50 hover:bg-stone-100 disabled:opacity-40 border border-stone-200 rounded-lg text-stone-600 transition-colors">
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-40 border border-stone-200 dark:border-neutral-800 rounded-lg text-stone-600 dark:text-neutral-300 transition-colors">
             {triggering ? (
               <div className="w-3 h-3 border border-stone-400 border-t-transparent rounded-full animate-spin" />
             ) : (
@@ -265,32 +265,38 @@ export default function IntelligenceSubconsciousTab({
 
       {escalations.length > 0 && (
         <div>
-          <h3 className="text-sm font-semibold text-stone-900 mb-3 flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-3 flex items-center gap-2">
             <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
             {t('subconscious.approvalNeeded')}
-            <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-700">
+            <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300">
               {escalations.length}
             </span>
           </h3>
           <div className="space-y-2">
             {escalations.map(esc => (
-              <div key={esc.id} className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+              <div
+                key={esc.id}
+                className="bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 rounded-xl p-4">
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
-                    <p className="text-sm font-medium text-stone-900">{esc.title}</p>
-                    <p className="text-xs text-stone-500 mt-1">{esc.description}</p>
+                    <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                      {esc.title}
+                    </p>
+                    <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+                      {esc.description}
+                    </p>
                     <div className="flex items-center gap-2 mt-2">
                       <span
                         className={`text-[10px] px-2 py-0.5 rounded-full ${
                           esc.priority === 'critical'
-                            ? 'bg-coral-100 text-coral-700'
+                            ? 'bg-coral-100 dark:bg-coral-500/20 text-coral-700 dark:text-coral-300'
                             : esc.priority === 'important'
-                              ? 'bg-amber-100 text-amber-700'
-                              : 'bg-stone-100 text-stone-600'
+                              ? 'bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300'
+                              : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300'
                         }`}>
                         {esc.priority}
                       </span>
-                      <span className="text-[10px] text-stone-400">
+                      <span className="text-[10px] text-stone-400 dark:text-neutral-500">
                         {t('subconscious.requiresApproval')}
                       </span>
                     </div>
@@ -311,7 +317,7 @@ export default function IntelligenceSubconsciousTab({
                     )}
                     <button
                       onClick={() => void handleDismissEscalation(esc.id)}
-                      className="px-3 py-1.5 text-xs bg-stone-100 hover:bg-stone-200 text-stone-600 rounded-lg transition-colors">
+                      className="px-3 py-1.5 text-xs bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200  text-stone-600 dark:text-neutral-300 rounded-lg transition-colors">
                       {t('common.skip')}
                     </button>
                   </div>
@@ -323,24 +329,30 @@ export default function IntelligenceSubconsciousTab({
       )}
 
       <div>
-        <h3 className="text-sm font-semibold text-stone-900 mb-3">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-3">
           {t('subconscious.activeTasks')}
         </h3>
         {loading && tasks.length === 0 ? (
           <div className="text-center py-4">
-            <div className="w-6 h-6 mx-auto border-2 border-stone-300 border-t-transparent rounded-full animate-spin" />
+            <div className="w-6 h-6 mx-auto border-2 border-stone-300 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
           </div>
         ) : tasks.filter(t => !t.completed).length === 0 ? (
-          <p className="text-xs text-stone-400 py-3">{t('subconscious.noActiveTasks')}</p>
+          <p className="text-xs text-stone-400 dark:text-neutral-500 py-3">
+            {t('subconscious.noActiveTasks')}
+          </p>
         ) : (
           <div className="space-y-1.5">
             {tasks
               .filter(t => !t.completed && t.source === 'system')
               .map(task => (
-                <div key={task.id} className="flex items-center py-2 px-3 bg-stone-50 rounded-lg">
+                <div
+                  key={task.id}
+                  className="flex items-center py-2 px-3 bg-stone-50 dark:bg-neutral-800/60 rounded-lg">
                   <div className="w-1.5 h-1.5 rounded-full bg-sage-400 flex-shrink-0 mr-2.5" />
-                  <span className="text-sm text-stone-900 truncate flex-1">{task.title}</span>
-                  <span className="text-[10px] text-stone-400 flex-shrink-0 px-1.5 py-0.5 rounded bg-stone-100">
+                  <span className="text-sm text-stone-900 dark:text-neutral-100 truncate flex-1">
+                    {task.title}
+                  </span>
+                  <span className="text-[10px] text-stone-400 dark:text-neutral-500 flex-shrink-0 px-1.5 py-0.5 rounded bg-stone-100 dark:bg-neutral-800">
                     {t('subconscious.default')}
                   </span>
                 </div>
@@ -350,7 +362,7 @@ export default function IntelligenceSubconsciousTab({
               .map(task => (
                 <div
                   key={task.id}
-                  className="flex items-center justify-between py-2 px-3 bg-stone-50 rounded-lg group">
+                  className="flex items-center justify-between py-2 px-3 bg-stone-50 dark:bg-neutral-800/60 rounded-lg group">
                   <div className="flex items-center gap-2.5 flex-1 min-w-0">
                     <button
                       type="button"
@@ -361,13 +373,13 @@ export default function IntelligenceSubconsciousTab({
                         task.enabled ? 'bg-sage-500' : 'bg-stone-300'
                       }`}>
                       <span
-                        className={`absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-white shadow transition-transform ${
+                        className={`absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
                           task.enabled ? 'translate-x-3' : 'translate-x-0'
                         }`}
                       />
                     </button>
                     <span
-                      className={`text-sm truncate ${task.enabled ? 'text-stone-900' : 'text-stone-400'}`}>
+                      className={`text-sm truncate ${task.enabled ? 'text-stone-900 dark:text-neutral-100' : 'text-stone-400 dark:text-neutral-500'}`}>
                       {task.title}
                     </span>
                   </div>
@@ -375,7 +387,7 @@ export default function IntelligenceSubconsciousTab({
                     type="button"
                     aria-label={`${t('common.remove')} ${task.title}`}
                     onClick={() => void handleRemoveTask(task.id, task.title)}
-                    className="opacity-0 group-hover:opacity-100 p-1 text-stone-400 hover:text-coral-500 transition-all">
+                    className="opacity-0 group-hover:opacity-100 p-1 text-stone-400 dark:text-neutral-500 hover:text-coral-500 transition-all">
                     <svg
                       className="w-3.5 h-3.5"
                       fill="none"
@@ -400,7 +412,7 @@ export default function IntelligenceSubconsciousTab({
             placeholder={t('subconscious.addTaskPlaceholder')}
             value={newTaskTitle}
             onChange={e => setNewTaskTitle(e.target.value)}
-            className="flex-1 px-3 py-2 text-sm bg-white border border-stone-200 rounded-lg text-stone-900 placeholder-stone-400 focus:outline-none focus:border-primary-500/50 transition-colors"
+            className="flex-1 px-3 py-2 text-sm bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-lg text-stone-900 dark:text-neutral-100 placeholder-stone-400 focus:outline-none focus:border-primary-500/50 transition-colors"
           />
           <button
             type="submit"
@@ -412,16 +424,18 @@ export default function IntelligenceSubconsciousTab({
       </div>
 
       <div>
-        <h3 className="text-sm font-semibold text-stone-900 mb-3">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-3">
           {t('subconscious.activityLog')}
         </h3>
         {logEntries.length === 0 ? (
-          <p className="text-xs text-stone-400 py-3">{t('subconscious.noActivity')}</p>
+          <p className="text-xs text-stone-400 dark:text-neutral-500 py-3">
+            {t('subconscious.noActivity')}
+          </p>
         ) : (
           <div className="space-y-1 max-h-64 overflow-y-auto">
             {logEntries.map(entry => (
               <div key={entry.id} className="flex items-start gap-2 py-1.5 px-2 text-xs">
-                <span className="text-stone-400 flex-shrink-0 w-14">
+                <span className="text-stone-400 dark:text-neutral-500 flex-shrink-0 w-14">
                   {new Date(entry.tick_at * 1000).toLocaleTimeString([], {
                     hour: '2-digit',
                     minute: '2-digit',
@@ -441,17 +455,17 @@ export default function IntelligenceSubconsciousTab({
                               ? 'bg-stone-300'
                               : entry.decision === 'dismissed'
                                 ? 'bg-stone-300'
-                                : 'bg-stone-200'
+                                : 'bg-stone-200 dark:bg-neutral-800'
                   }`}
                 />
                 <span
                   className={`break-words min-w-0 ${
                     entry.decision === 'in_progress'
-                      ? 'text-stone-400'
+                      ? 'text-stone-400 dark:text-neutral-500'
                       : entry.decision === 'failed'
                         ? 'text-coral-500'
-                        : 'text-stone-600'
-                  } ${entry.result && entry.result.length > 120 ? 'cursor-pointer hover:text-stone-900' : ''}`}
+                        : 'text-stone-600 dark:text-neutral-300'
+                  } ${entry.result && entry.result.length > 120 ? 'cursor-pointer hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100' : ''}`}
                   onClick={() => {
                     if (entry.result && entry.result.length > 120) {
                       setExpandedLogIds(prev => {
@@ -485,7 +499,7 @@ export default function IntelligenceSubconsciousTab({
                                   : entry.decision}
                 </span>
                 {entry.duration_ms != null && (
-                  <span className="text-stone-300 flex-shrink-0 ml-auto">
+                  <span className="text-stone-300 dark:text-neutral-600 flex-shrink-0 ml-auto">
                     {entry.duration_ms > 1000
                       ? `${(entry.duration_ms / 1000).toFixed(1)}s`
                       : `${entry.duration_ms}ms`}
diff --git a/app/src/components/intelligence/IntelligenceTasksTab.tsx b/app/src/components/intelligence/IntelligenceTasksTab.tsx
index 7416c5f80..d21b81e3f 100644
--- a/app/src/components/intelligence/IntelligenceTasksTab.tsx
+++ b/app/src/components/intelligence/IntelligenceTasksTab.tsx
@@ -118,7 +118,7 @@ export default function IntelligenceTasksTab() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-12 text-stone-400">
+      <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500">
         <div className="h-4 w-4 animate-spin rounded-full border-2 border-ocean-500 border-t-transparent mr-2" />
         <span className="text-sm">{t('intelligence.tasks.loadingBoards')}</span>
       </div>
@@ -127,7 +127,7 @@ export default function IntelligenceTasksTab() {
 
   if (error) {
     return (
-      <div className="rounded-xl border border-coral-200 bg-coral-50 px-4 py-3 text-sm text-coral-700">
+      <div className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-4 py-3 text-sm text-coral-700 dark:text-coral-300">
         {t('intelligence.tasks.failedToLoad')}: {error}
       </div>
     );
@@ -135,10 +135,12 @@ export default function IntelligenceTasksTab() {
 
   if (boardEntries.length === 0) {
     return (
-      <div className="flex flex-col items-center gap-3 py-12 text-center text-stone-400">
+      <div className="flex flex-col items-center gap-3 py-12 text-center text-stone-400 dark:text-neutral-500">
         <div className="text-3xl">📋</div>
         <p className="text-sm font-medium">{t('intelligence.tasks.empty')}</p>
-        <p className="text-xs text-stone-400">{t('intelligence.tasks.emptyHint')}</p>
+        <p className="text-xs text-stone-400 dark:text-neutral-500">
+          {t('intelligence.tasks.emptyHint')}
+        </p>
       </div>
     );
   }
@@ -151,11 +153,13 @@ export default function IntelligenceTasksTab() {
 
   return (
     <div className="space-y-6">
-      <p className="text-xs text-stone-400">{boardCountLabel}</p>
+      <p className="text-xs text-stone-400 dark:text-neutral-500">{boardCountLabel}</p>
       {boardEntries.map(entry => (
         <section key={entry.threadId} className="space-y-2">
           <div className="flex items-center gap-2">
-            <h3 className="truncate text-sm font-semibold text-stone-700" title={entry.title}>
+            <h3
+              className="truncate text-sm font-semibold text-stone-700 dark:text-neutral-200"
+              title={entry.title}>
               {entry.title}
             </h3>
             {entry.live && (
diff --git a/app/src/components/intelligence/MemoryGraph.tsx b/app/src/components/intelligence/MemoryGraph.tsx
index 70277f131..cedf9d591 100644
--- a/app/src/components/intelligence/MemoryGraph.tsx
+++ b/app/src/components/intelligence/MemoryGraph.tsx
@@ -240,7 +240,7 @@ export function MemoryGraph({ nodes, edges, mode, contentRootAbs, emptyHint }: M
   if (nodes.length === 0) {
     return (
       <div
-        className="flex h-[640px] items-center justify-center rounded-lg border border-stone-100 bg-stone-50/40 text-sm text-stone-500"
+        className="flex h-[640px] items-center justify-center rounded-lg border border-stone-100 dark:border-neutral-800 bg-stone-50/40 text-sm text-stone-500 dark:text-neutral-400"
         data-testid="memory-graph-empty">
         {emptyHint ?? (mode === 'contacts' ? t('graph.noContactMentions') : t('graph.noMemory'))}
       </div>
@@ -269,13 +269,13 @@ export function MemoryGraph({ nodes, edges, mode, contentRootAbs, emptyHint }: M
         ];
 
   return (
-    <div className="memory-graph rounded-lg border border-stone-100 bg-white">
-      <div className="flex items-center justify-between gap-4 border-b border-stone-100 px-4 py-2">
-        <div className="flex items-center gap-3 text-xs text-stone-500">
+    <div className="memory-graph rounded-lg border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div className="flex items-center justify-between gap-4 border-b border-stone-100 dark:border-neutral-800 px-4 py-2">
+        <div className="flex items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
           <span>
             {nodes.length} {t('graph.nodes')}
           </span>
-          <span className="text-stone-300">·</span>
+          <span className="text-stone-300 dark:text-neutral-600">·</span>
           <span>
             {sim.edges.length}{' '}
             {mode === 'tree' ? t('graph.parentChild') : t('graph.documentContact')}{' '}
@@ -284,7 +284,9 @@ export function MemoryGraph({ nodes, edges, mode, contentRootAbs, emptyHint }: M
         </div>
         <div className="flex items-center gap-3">
           {legend.map(item => (
-            <span key={item.label} className="flex items-center gap-1.5 text-xs text-stone-600">
+            <span
+              key={item.label}
+              className="flex items-center gap-1.5 text-xs text-stone-600 dark:text-neutral-300">
               <span
                 className="inline-block h-2.5 w-2.5 rounded-full"
                 style={{ backgroundColor: item.color }}
@@ -336,32 +338,38 @@ export function MemoryGraph({ nodes, edges, mode, contentRootAbs, emptyHint }: M
       </svg>
       {hovered && (
         <div
-          className="border-t border-stone-100 bg-stone-50/70 px-4 py-2 text-xs text-stone-700"
+          className="border-t border-stone-100 dark:border-neutral-800 bg-stone-50/70 px-4 py-2 text-xs text-stone-700 dark:text-neutral-200"
           data-testid="memory-graph-tooltip">
           {hovered.kind === 'summary' ? (
             <>
               <span className="font-mono">L{hovered.level ?? '?'}</span>
-              <span className="text-stone-400"> · </span>
+              <span className="text-stone-400 dark:text-neutral-500"> · </span>
               <span className="capitalize">{hovered.tree_kind}</span>
-              <span className="text-stone-400"> · </span>
+              <span className="text-stone-400 dark:text-neutral-500"> · </span>
               <span>{hovered.tree_scope}</span>
-              <span className="text-stone-400"> · </span>
+              <span className="text-stone-400 dark:text-neutral-500"> · </span>
               <span>
                 {hovered.child_count ?? 0} {t('graph.children')}
               </span>
-              <span className="ml-3 text-stone-400">{t('graph.clickToOpenObsidian')}</span>
+              <span className="ml-3 text-stone-400 dark:text-neutral-500">
+                {t('graph.clickToOpenObsidian')}
+              </span>
             </>
           ) : hovered.kind === 'contact' ? (
             <>
-              <span className="font-medium text-violet-700">{hovered.label}</span>
-              <span className="ml-3 text-stone-400">
+              <span className="font-medium text-violet-700 dark:text-violet-300">
+                {hovered.label}
+              </span>
+              <span className="ml-3 text-stone-400 dark:text-neutral-500">
                 {t('graph.person')} · canonical id {hovered.id.slice(0, 12)}…
               </span>
             </>
           ) : (
             <>
               <span className="font-medium">{hovered.label || 'chunk'}</span>
-              <span className="ml-3 text-stone-400">{t('graph.document')}</span>
+              <span className="ml-3 text-stone-400 dark:text-neutral-500">
+                {t('graph.document')}
+              </span>
             </>
           )}
         </div>
diff --git a/app/src/components/intelligence/MemoryHeatmap.tsx b/app/src/components/intelligence/MemoryHeatmap.tsx
index d4d57e11b..64bfc0cc9 100644
--- a/app/src/components/intelligence/MemoryHeatmap.tsx
+++ b/app/src/components/intelligence/MemoryHeatmap.tsx
@@ -128,21 +128,23 @@ export function MemoryHeatmap({ timestamps, loading }: MemoryHeatmapProps) {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-stone-200 bg-stone-50 p-5">
-        <h3 className="text-sm font-semibold text-stone-900 mb-3">
+      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-3">
           {t('memory.ingestionActivity')}
         </h3>
-        <div className="h-28 rounded-lg bg-stone-200 animate-pulse" />
+        <div className="h-28 rounded-lg bg-stone-200 dark:bg-neutral-800 animate-pulse" />
       </div>
     );
   }
 
   return (
-    <div className="rounded-xl border border-stone-200 bg-stone-50 p-5">
+    <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
       <div className="flex items-center justify-between mb-3">
         <div>
-          <h3 className="text-sm font-semibold text-stone-900">{t('memory.ingestionActivity')}</h3>
-          <p className="text-xs text-stone-500 mt-0.5">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('memory.ingestionActivity')}
+          </h3>
+          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
             {totalEvents} {totalEvents !== 1 ? t('memory.events') : t('memory.event')}{' '}
             {t('memory.overTheLast')} {MONTHS} {t('memory.months')}
             {maxDailyCount > 0 && (
@@ -154,7 +156,7 @@ export function MemoryHeatmap({ timestamps, loading }: MemoryHeatmapProps) {
             )}
           </p>
         </div>
-        <div className="flex items-center gap-1 text-[10px] text-stone-500">
+        <div className="flex items-center gap-1 text-[10px] text-stone-500 dark:text-neutral-400">
           <span>{t('memory.less')}</span>
           {INTENSITY_COLORS.map((color, i) => (
             <div
@@ -240,12 +242,12 @@ export function MemoryHeatmap({ timestamps, loading }: MemoryHeatmapProps) {
       {/* Tooltip */}
       {hoveredCell && (
         <div
-          className="fixed z-50 px-2 py-1 rounded-md bg-white border border-stone-200 text-[11px] text-stone-900 shadow-lg pointer-events-none"
+          className="fixed z-50 px-2 py-1 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 text-[11px] text-stone-900 dark:text-neutral-100 shadow-lg pointer-events-none"
           style={{ left: hoveredCell.x, top: hoveredCell.y - 32, transform: 'translateX(-50%)' }}>
           <span className="font-medium">
             {hoveredCell.count} {hoveredCell.count !== 1 ? t('memory.events') : t('memory.event')}
           </span>{' '}
-          <span className="text-stone-400">
+          <span className="text-stone-400 dark:text-neutral-500">
             {t('memory.on')} {formatDate(hoveredCell.date)}
           </span>
         </div>
diff --git a/app/src/components/intelligence/MemoryInsights.tsx b/app/src/components/intelligence/MemoryInsights.tsx
index 041f655a4..369a47d49 100644
--- a/app/src/components/intelligence/MemoryInsights.tsx
+++ b/app/src/components/intelligence/MemoryInsights.tsx
@@ -95,44 +95,44 @@ function useInsightCategoryLabels() {
     facts: {
       label: t('insights.knownFacts'),
       icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
-      color: 'text-emerald-600',
-      bgColor: 'bg-emerald-50',
-      borderColor: 'border-emerald-200',
+      color: 'text-emerald-600 dark:text-emerald-300',
+      bgColor: 'bg-emerald-50 dark:bg-emerald-500/10 ',
+      borderColor: 'border-emerald-200 dark:border-emerald-500/30',
     },
     preferences: {
       label: t('insights.preferences'),
       icon: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z',
-      color: 'text-rose-600',
-      bgColor: 'bg-rose-50',
-      borderColor: 'border-rose-200',
+      color: 'text-rose-600 dark:text-rose-300',
+      bgColor: 'bg-rose-50 dark:bg-rose-500/10 ',
+      borderColor: 'border-rose-200 dark:border-rose-500/30',
     },
     relationships: {
       label: t('insights.relationships'),
       icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
-      color: 'text-primary-600',
-      bgColor: 'bg-primary-50',
-      borderColor: 'border-primary-200',
+      color: 'text-primary-600 dark:text-primary-300',
+      bgColor: 'bg-primary-50 dark:bg-primary-500/15',
+      borderColor: 'border-primary-200 dark:border-primary-500/30',
     },
     skills: {
       label: t('insights.skills'),
       icon: 'M13 10V3L4 14h7v7l9-11h-7z',
-      color: 'text-amber-600',
-      bgColor: 'bg-amber-100',
-      borderColor: 'border-amber-200',
+      color: 'text-amber-600 dark:text-amber-300',
+      bgColor: 'bg-amber-100 dark:bg-amber-500/20',
+      borderColor: 'border-amber-200 dark:border-amber-500/30',
     },
     opinions: {
       label: t('insights.opinions'),
       icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z',
-      color: 'text-lavender-600',
-      bgColor: 'bg-lavender-50',
-      borderColor: 'border-lavender-200',
+      color: 'text-lavender-600 dark:text-lavender-300',
+      bgColor: 'bg-lavender-50 dark:bg-lavender-500/10 ',
+      borderColor: 'border-lavender-200 dark:border-lavender-500/30',
     },
     other: {
       label: t('insights.other'),
       icon: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z',
-      color: 'text-stone-600',
-      bgColor: 'bg-stone-100',
-      borderColor: 'border-stone-200',
+      color: 'text-stone-600 dark:text-neutral-300',
+      bgColor: 'bg-stone-100 dark:bg-neutral-800',
+      borderColor: 'border-stone-200 dark:border-neutral-800',
     },
   } as const;
 }
@@ -140,7 +140,7 @@ function useInsightCategoryLabels() {
 /** Small inline badge that displays an entity type (e.g. "person", "project"). */
 function EntityTypeBadge({ type }: { type: string }) {
   return (
-    <span className="inline-block ml-1 px-1 py-px rounded text-[9px] leading-tight font-medium bg-white/8 text-stone-400 border border-white/6 uppercase tracking-wide">
+    <span className="inline-block ml-1 px-1 py-px rounded text-[9px] leading-tight font-medium bg-white/8 text-stone-400 dark:text-neutral-500 border border-white/6 uppercase tracking-wide">
       {type}
     </span>
   );
@@ -192,11 +192,16 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-stone-200 bg-stone-50 p-5">
-        <h3 className="text-sm font-semibold text-stone-900 mb-4">{t('insights.title')}</h3>
+      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
+          {t('insights.title')}
+        </h3>
         <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
           {[1, 2, 3].map(i => (
-            <div key={i} className="h-28 rounded-lg bg-stone-200 animate-pulse" />
+            <div
+              key={i}
+              className="h-28 rounded-lg bg-stone-200 dark:bg-neutral-800 animate-pulse"
+            />
           ))}
         </div>
       </div>
@@ -205,19 +210,23 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
 
   if (groups.length === 0) {
     return (
-      <div className="rounded-xl border border-stone-200 bg-stone-50 p-5">
-        <h3 className="text-sm font-semibold text-stone-900 mb-2">{t('insights.title')}</h3>
-        <p className="text-sm text-stone-600">{t('insights.empty')}</p>
+      <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-2">
+          {t('insights.title')}
+        </h3>
+        <p className="text-sm text-stone-600 dark:text-neutral-300">{t('insights.empty')}</p>
       </div>
     );
   }
 
   return (
-    <div className="rounded-xl border border-stone-200 bg-stone-50 p-5">
+    <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
       <div className="flex items-center justify-between mb-4">
         <div>
-          <h3 className="text-sm font-semibold text-stone-900">{t('insights.title')}</h3>
-          <p className="text-xs text-stone-500 mt-0.5">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('insights.title')}
+          </h3>
+          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
             {t('insights.description').replace('{count}', String(relations.length))}
           </p>
         </div>
@@ -254,12 +263,12 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className={`text-xs font-medium ${group.color}`}>{group.label}</div>
-                  <div className="text-[10px] text-stone-500">
+                  <div className="text-[10px] text-stone-500 dark:text-neutral-400">
                     {group.items.length} {t('insights.items')}
                   </div>
                 </div>
                 <svg
-                  className={`w-3.5 h-3.5 text-stone-500 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                  className={`w-3.5 h-3.5 text-stone-500 dark:text-neutral-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24">
@@ -278,25 +287,29 @@ export function MemoryInsights({ relations, loading }: MemoryInsightsProps) {
                     key={`${item.subject}-${item.predicate}-${item.object}-${idx}`}
                     className="flex items-start gap-1.5 text-[11px] leading-relaxed">
                     <span
-                      className="text-stone-900 font-medium shrink-0 max-w-[30%] truncate"
+                      className="text-stone-900 dark:text-neutral-100 font-medium shrink-0 max-w-[30%] truncate"
                       title={item.subject}>
                       {item.subject}
                       {item.subjectType && <EntityTypeBadge type={item.subjectType} />}
                     </span>
-                    <span className="text-stone-500 shrink-0 italic">{item.predicate}</span>
-                    <span className="text-stone-600 truncate" title={item.object}>
+                    <span className="text-stone-500 dark:text-neutral-400 shrink-0 italic">
+                      {item.predicate}
+                    </span>
+                    <span
+                      className="text-stone-600 dark:text-neutral-300 truncate"
+                      title={item.object}>
                       {item.object}
                       {item.objectType && <EntityTypeBadge type={item.objectType} />}
                     </span>
                     {item.evidenceCount > 1 && (
-                      <span className="ml-auto text-[9px] text-stone-600 shrink-0 tabular-nums">
+                      <span className="ml-auto text-[9px] text-stone-600 dark:text-neutral-300 shrink-0 tabular-nums">
                         x{item.evidenceCount}
                       </span>
                     )}
                   </div>
                 ))}
                 {!isExpanded && group.items.length > 3 && (
-                  <div className="text-[10px] text-stone-500 pt-0.5">
+                  <div className="text-[10px] text-stone-500 dark:text-neutral-400 pt-0.5">
                     +{group.items.length - 3} {t('insights.more')}
                   </div>
                 )}
diff --git a/app/src/components/intelligence/MemorySources.tsx b/app/src/components/intelligence/MemorySources.tsx
index b8577bfd6..833337ebc 100644
--- a/app/src/components/intelligence/MemorySources.tsx
+++ b/app/src/components/intelligence/MemorySources.tsx
@@ -67,11 +67,11 @@ function useFreshnessLabel() {
 function freshnessBadge(label: FreshnessLabel): string {
   switch (label) {
     case 'active':
-      return 'bg-primary-100 text-primary-700';
+      return 'bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300';
     case 'recent':
-      return 'bg-sage-100 text-sage-700';
+      return 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300';
     case 'idle':
-      return 'bg-stone-100 text-stone-700';
+      return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200';
   }
 }
 
@@ -223,10 +223,12 @@ export function MemorySources({
   if (loading) {
     return (
       <section
-        className="rounded-lg border border-stone-200 bg-white p-4"
+        className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4"
         data-testid="memory-sources">
-        <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
-        <p className="mt-2 text-xs text-stone-500">{t('common.loading')}</p>
+        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          {t('sync.memorySources')}
+        </h3>
+        <p className="mt-2 text-xs text-stone-500 dark:text-neutral-400">{t('common.loading')}</p>
       </section>
     );
   }
@@ -234,10 +236,12 @@ export function MemorySources({
   if (loadError) {
     return (
       <section
-        className="rounded-lg border border-stone-200 bg-white p-4"
+        className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4"
         data-testid="memory-sources">
-        <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
-        <p className="mt-2 break-words rounded-md bg-coral-50 p-2 text-xs text-coral-800">
+        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          {t('sync.memorySources')}
+        </h3>
+        <p className="mt-2 break-words rounded-md bg-coral-50 dark:bg-coral-500/10 p-2 text-xs text-coral-800">
           {loadError}
         </p>
       </section>
@@ -247,25 +251,31 @@ export function MemorySources({
   if (rows.length === 0) {
     return (
       <section
-        className="rounded-lg border border-stone-200 bg-white p-4"
+        className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4"
         data-testid="memory-sources">
-        <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
-        <p className="mt-2 text-xs text-stone-500">{t('sync.noConnectedSources')}</p>
+        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          {t('sync.memorySources')}
+        </h3>
+        <p className="mt-2 text-xs text-stone-500 dark:text-neutral-400">
+          {t('sync.noConnectedSources')}
+        </p>
       </section>
     );
   }
 
   return (
     <section
-      className="rounded-lg border border-stone-200 bg-white p-4"
+      className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4"
       data-testid="memory-sources">
       <header className="mb-3 flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
-        <span className="text-xs text-stone-400">
+        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          {t('sync.memorySources')}
+        </h3>
+        <span className="text-xs text-stone-400 dark:text-neutral-500">
           {rows.length} identit{rows.length === 1 ? 'y' : 'ies'}
         </span>
       </header>
-      <ul className="divide-y divide-stone-100">
+      <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
         {rows.map(row => (
           <SourceRowCard
             key={row.key}
@@ -309,7 +319,9 @@ function SourceRowCard({ row, isSyncing, onSync }: SourceRowCardProps) {
       data-testid={`memory-source-row-${toolkit}`}>
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="truncate text-sm font-medium text-stone-900">{title}</span>
+          <span className="truncate text-sm font-medium text-stone-900 dark:text-neutral-100">
+            {title}
+          </span>
           {status && (
             <span
               className={`rounded-md px-2 py-0.5 text-xs font-medium ${freshnessBadge(status.freshness)}`}
@@ -318,12 +330,12 @@ function SourceRowCard({ row, isSyncing, onSync }: SourceRowCardProps) {
             </span>
           )}
           {!isActive && (
-            <span className="rounded-md bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
+            <span className="rounded-md bg-amber-100 dark:bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300">
               {connection.status}
             </span>
           )}
         </div>
-        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-stone-500">
+        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-stone-500 dark:text-neutral-400">
           <span data-testid={`memory-source-chunks-${toolkit}`}>
             {lifetime.toLocaleString()} {t('sync.chunks')}
           </span>
@@ -340,7 +352,7 @@ function SourceRowCard({ row, isSyncing, onSync }: SourceRowCardProps) {
         </div>
         {showProgress && (
           <div className="mt-2 max-w-md" data-testid={`memory-source-progress-${toolkit}`}>
-            <div className="h-1.5 w-full overflow-hidden rounded-full bg-stone-100">
+            <div className="h-1.5 w-full overflow-hidden rounded-full bg-stone-100 dark:bg-neutral-800">
               <div
                 className="h-full bg-primary-500 transition-all"
                 style={{ width: `${pct}%` }}
@@ -350,7 +362,7 @@ function SourceRowCard({ row, isSyncing, onSync }: SourceRowCardProps) {
                 aria-valuemax={batchTotal}
               />
             </div>
-            <div className="mt-1 text-xs text-stone-500">
+            <div className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
               {batchProcessed.toLocaleString()} / {batchTotal.toLocaleString()}{' '}
               {t('sync.processed')}
             </div>
diff --git a/app/src/components/intelligence/MemoryStatsBar.tsx b/app/src/components/intelligence/MemoryStatsBar.tsx
index 0b31f7bb5..44269ed39 100644
--- a/app/src/components/intelligence/MemoryStatsBar.tsx
+++ b/app/src/components/intelligence/MemoryStatsBar.tsx
@@ -67,19 +67,19 @@ export function MemoryStatsBar(props: MemoryStatsBarProps) {
       label: t('stats.documents'),
       value: formatNumber(totalDocs),
       sub: docsToday > 0 ? `+${docsToday} ${t('stats.today')}` : undefined,
-      color: 'text-emerald-600',
+      color: 'text-emerald-600 dark:text-emerald-300',
     },
     {
       label: t('stats.namespaces'),
       value: formatNumber(totalNamespaces),
       sub: undefined,
-      color: 'text-amber-600',
+      color: 'text-amber-600 dark:text-amber-300',
     },
     {
       label: t('stats.relations'),
       value: formatNumber(totalRelations),
       sub: undefined,
-      color: 'text-lavender-600',
+      color: 'text-lavender-600 dark:text-lavender-300',
     },
     {
       label: t('stats.firstMemory'),
@@ -87,13 +87,13 @@ export function MemoryStatsBar(props: MemoryStatsBarProps) {
       sub: newestDocTimestamp
         ? `${t('stats.latest')}: ${formatTimeAgo(newestDocTimestamp)}`
         : undefined,
-      color: 'text-sky-600',
+      color: 'text-sky-600 dark:text-sky-300',
     },
     {
       label: t('stats.sessions'),
       value: totalSessions !== null ? formatNumber(totalSessions) : '--',
       sub: totalTokens !== null ? `${formatNumber(totalTokens)} ${t('stats.tokens')}` : undefined,
-      color: 'text-rose-600',
+      color: 'text-rose-600 dark:text-rose-300',
     },
   ];
 
@@ -102,14 +102,22 @@ export function MemoryStatsBar(props: MemoryStatsBarProps) {
       {stats.map(stat => (
         <div
           key={stat.label}
-          className="rounded-xl border border-stone-200 bg-stone-50 p-3 transition-colors hover:bg-stone-100">
-          <div className="text-[11px] uppercase tracking-wide text-stone-500 mb-1">
+          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800">
+          <div className="text-[11px] uppercase tracking-wide text-stone-500 dark:text-neutral-400 mb-1">
             {stat.label}
           </div>
           <div className={`text-xl font-semibold ${stat.color}`}>
-            {loading ? <div className="h-7 w-16 rounded bg-stone-200 animate-pulse" /> : stat.value}
+            {loading ? (
+              <div className="h-7 w-16 rounded bg-stone-200 dark:bg-neutral-800 animate-pulse" />
+            ) : (
+              stat.value
+            )}
           </div>
-          {stat.sub && <div className="text-[11px] text-stone-500 mt-0.5">{stat.sub}</div>}
+          {stat.sub && (
+            <div className="text-[11px] text-stone-500 dark:text-neutral-400 mt-0.5">
+              {stat.sub}
+            </div>
+          )}
         </div>
       ))}
     </div>
diff --git a/app/src/components/intelligence/MemorySyncConnections.tsx b/app/src/components/intelligence/MemorySyncConnections.tsx
index 4b4d89387..7b9df678f 100644
--- a/app/src/components/intelligence/MemorySyncConnections.tsx
+++ b/app/src/components/intelligence/MemorySyncConnections.tsx
@@ -47,9 +47,9 @@ function freshnessBadgeClass(label: FreshnessLabel): string {
     case 'active':
       return 'bg-ocean-100 text-ocean-700';
     case 'recent':
-      return 'bg-sage-100 text-sage-700';
+      return 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300';
     case 'idle':
-      return 'bg-stone-100 text-stone-700';
+      return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200';
   }
 }
 
@@ -89,19 +89,19 @@ function SourceCard({ status }: SourceCardProps) {
 
   return (
     <div
-      className="rounded-lg border border-stone-200 bg-white p-4 shadow-sm"
+      className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-sm"
       data-testid={`memory-sync-card-${status.provider}`}>
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <span className="font-medium text-stone-900">{label}</span>
+            <span className="font-medium text-stone-900 dark:text-neutral-100">{label}</span>
             <span
               className={`rounded-md px-2 py-0.5 text-xs font-medium ${freshnessBadgeClass(status.freshness)}`}
               data-testid={`memory-sync-freshness-${status.provider}`}>
               {useFreshnessLabel()[status.freshness]}
             </span>
           </div>
-          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-stone-500">
+          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-stone-500 dark:text-neutral-400">
             <span data-testid={`memory-sync-chunks-${status.provider}`}>
               {lifetime.toLocaleString()} {t('sync.chunks')}
             </span>
@@ -116,7 +116,7 @@ function SourceCard({ status }: SourceCardProps) {
 
       {showProgress && (
         <div className="mt-3" data-testid={`memory-sync-progress-${status.provider}`}>
-          <div className="h-1.5 w-full overflow-hidden rounded-full bg-stone-100">
+          <div className="h-1.5 w-full overflow-hidden rounded-full bg-stone-100 dark:bg-neutral-800">
             <div
               className="h-full bg-ocean-400 transition-all"
               style={{ width: `${pct}%` }}
@@ -126,13 +126,13 @@ function SourceCard({ status }: SourceCardProps) {
               aria-valuemax={batchTotal}
             />
           </div>
-          <div className="mt-1 text-xs text-stone-500">
+          <div className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
             <span data-testid={`memory-sync-pending-${status.provider}`}>
               {batchProcessed.toLocaleString()} / {batchTotal.toLocaleString()}{' '}
               {t('sync.processed')}
             </span>
             {pending > 0 && (
-              <span className="text-stone-400">
+              <span className="text-stone-400 dark:text-neutral-500">
                 {' '}
                 · {pending.toLocaleString()} {t('sync.pending')}
               </span>
@@ -187,8 +187,10 @@ export function MemorySyncConnections({ pollIntervalMs }: MemorySyncConnectionsP
   if (loading) {
     return (
       <section className="memory-sync-connections" data-testid="memory-sync-connections">
-        <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
-        <p className="mt-2 text-xs text-stone-500">{t('common.loading')}</p>
+        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          {t('sync.memorySources')}
+        </h3>
+        <p className="mt-2 text-xs text-stone-500 dark:text-neutral-400">{t('common.loading')}</p>
       </section>
     );
   }
@@ -196,8 +198,10 @@ export function MemorySyncConnections({ pollIntervalMs }: MemorySyncConnectionsP
   if (loadError) {
     return (
       <section className="memory-sync-connections" data-testid="memory-sync-connections">
-        <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
-        <p className="mt-2 rounded-md bg-coral-50 p-2 text-xs text-coral-800 break-words">
+        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          {t('sync.memorySources')}
+        </h3>
+        <p className="mt-2 rounded-md bg-coral-50 dark:bg-coral-500/10 p-2 text-xs text-coral-800 break-words">
           {t('sync.failedToLoad')}: {loadError}
         </p>
       </section>
@@ -207,15 +211,19 @@ export function MemorySyncConnections({ pollIntervalMs }: MemorySyncConnectionsP
   if (statuses.length === 0) {
     return (
       <section className="memory-sync-connections" data-testid="memory-sync-connections">
-        <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
-        <p className="mt-2 text-xs text-stone-500">{t('sync.noContent')}</p>
+        <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+          {t('sync.memorySources')}
+        </h3>
+        <p className="mt-2 text-xs text-stone-500 dark:text-neutral-400">{t('sync.noContent')}</p>
       </section>
     );
   }
 
   return (
     <section className="memory-sync-connections" data-testid="memory-sync-connections">
-      <h3 className="text-sm font-semibold text-stone-700">{t('sync.memorySources')}</h3>
+      <h3 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+        {t('sync.memorySources')}
+      </h3>
       <div className="mt-2 space-y-2">
         {statuses.map(s => (
           <SourceCard key={s.provider} status={s} />
diff --git a/app/src/components/intelligence/MemoryWorkspace.tsx b/app/src/components/intelligence/MemoryWorkspace.tsx
index c27545ad6..648ccb5bc 100644
--- a/app/src/components/intelligence/MemoryWorkspace.tsx
+++ b/app/src/components/intelligence/MemoryWorkspace.tsx
@@ -251,8 +251,8 @@ export function MemoryWorkspace({ onToast }: MemoryWorkspaceProps) {
             disabled={wiping || building}
             data-testid="memory-wipe-all"
             className="inline-flex items-center gap-2 rounded-lg
-                       border border-coral-200 bg-white px-4 py-2 text-sm font-semibold
-                       text-coral-700 shadow-sm transition-colors hover:bg-coral-50
+                       border border-coral-200 dark:border-coral-500/30 bg-white dark:bg-neutral-900 px-4 py-2 text-sm font-semibold
+                       text-coral-700 dark:text-coral-300 shadow-sm transition-colors hover:bg-coral-50 dark:hover:bg-coral-500/10
                        disabled:cursor-not-allowed disabled:opacity-50
                        focus:outline-none focus:ring-2 focus:ring-coral-200"
             title={t('workspace.wipeTitle')}>
@@ -272,8 +272,8 @@ export function MemoryWorkspace({ onToast }: MemoryWorkspaceProps) {
             disabled={resetting || wiping || building}
             data-testid="memory-reset-tree"
             className="inline-flex items-center gap-2 rounded-lg
-                       border border-amber-300 bg-white px-4 py-2 text-sm font-semibold
-                       text-amber-800 shadow-sm transition-colors hover:bg-amber-50
+                       border border-amber-300 dark:border-amber-500/30 bg-white dark:bg-neutral-900 px-4 py-2 text-sm font-semibold
+                       text-amber-800 dark:text-amber-300 shadow-sm transition-colors hover:bg-amber-50 dark:hover:bg-amber-500/10
                        disabled:cursor-not-allowed disabled:opacity-50
                        focus:outline-none focus:ring-2 focus:ring-amber-200"
             title={t('workspace.resetTreeTitle')}>
@@ -325,11 +325,11 @@ export function MemoryWorkspace({ onToast }: MemoryWorkspaceProps) {
       </div>
 
       {error ? (
-        <div className="rounded-lg border border-coral-200 bg-coral-50 px-4 py-3 text-sm text-coral-800">
+        <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-4 py-3 text-sm text-coral-800">
           {t('workspace.graphLoadFailed')}: {error}
         </div>
       ) : !graph ? (
-        <div className="flex h-[640px] items-center justify-center rounded-lg border border-stone-100 bg-stone-50/40 text-sm text-stone-500">
+        <div className="flex h-[640px] items-center justify-center rounded-lg border border-stone-100 dark:border-neutral-800 bg-stone-50/40 text-sm text-stone-500 dark:text-neutral-400">
           {t('workspace.loadingGraph')}
         </div>
       ) : (
@@ -354,10 +354,11 @@ function ModeToggle({ mode, onChange }: ModeToggleProps) {
   const baseBtn =
     'px-3 py-1.5 text-xs font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-200';
   const active = 'bg-primary-500 text-white shadow-sm';
-  const idle = 'bg-white text-stone-600 hover:bg-stone-50';
+  const idle =
+    'bg-white dark:bg-neutral-900 text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800/60';
   return (
     <div
-      className="inline-flex items-center gap-1 rounded-lg border border-stone-200 bg-stone-50 p-1"
+      className="inline-flex items-center gap-1 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-1"
       role="tablist"
       aria-label={t('workspace.graphViewMode')}
       data-testid="memory-graph-mode-toggle">
diff --git a/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx b/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx
index b8cad639d..f732cccb9 100644
--- a/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx
+++ b/app/src/components/intelligence/ScreenIntelligenceDebugPanel.tsx
@@ -62,18 +62,18 @@ const ScreenIntelligenceDebugPanelContent = ({
         </h3>
         <button
           onClick={handleRefreshStatus}
-          className="rounded-lg border border-stone-700 bg-stone-800/60 px-3 py-1 text-xs text-stone-300 transition-colors hover:bg-stone-700/60">
+          className="rounded-lg border border-stone-700 bg-stone-800/60 px-3 py-1 text-xs text-stone-300 dark:text-neutral-600 transition-colors hover:bg-stone-700/60">
           {t('common.refresh')}
         </button>
       </div>
 
       {/* Permissions */}
       <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400">
+        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
           {t('intelligence.screenDebug.permissions')}
         </h4>
         {status?.platform_supported === false ? (
-          <p className="text-xs text-stone-500">
+          <p className="text-xs text-stone-500 dark:text-neutral-400">
             {t('intelligence.screenDebug.platformNotSupported')}
           </p>
         ) : (
@@ -96,13 +96,16 @@ const ScreenIntelligenceDebugPanelContent = ({
 
       {/* Session Status */}
       <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400">
+        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
           {t('intelligence.screenDebug.session')}
         </h4>
-        <div className="space-y-1 text-xs text-stone-300">
+        <div className="space-y-1 text-xs text-stone-300 dark:text-neutral-600">
           <div className="flex justify-between">
             <span>{t('intelligence.screenDebug.active')}</span>
-            <span className={session?.active ? 'text-green-400' : 'text-stone-500'}>
+            <span
+              className={
+                session?.active ? 'text-green-400' : 'text-stone-500 dark:text-neutral-400'
+              }>
               {session?.active ? t('common.yes') : t('common.no')}
             </span>
           </div>
@@ -129,7 +132,7 @@ const ScreenIntelligenceDebugPanelContent = ({
 
       {/* Capture Test */}
       <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400">
+        <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
           {t('intelligence.screenDebug.captureTest')}
         </h4>
         <button
@@ -143,7 +146,7 @@ const ScreenIntelligenceDebugPanelContent = ({
 
         {captureTestResult && (
           <div className="space-y-2">
-            <div className="space-y-1 text-xs text-stone-300">
+            <div className="space-y-1 text-xs text-stone-300 dark:text-neutral-600">
               <div className="flex justify-between">
                 <span>{t('intelligence.screenDebug.status')}</span>
                 <span className={captureTestResult.ok ? 'text-green-400' : 'text-red-400'}>
@@ -208,7 +211,7 @@ const ScreenIntelligenceDebugPanelContent = ({
       {/* Recent Vision Summaries */}
       {recentVisionSummaries.length > 0 && (
         <div className="rounded-xl border border-stone-700 bg-stone-900/50 p-3">
-          <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400">
+          <h4 className="mb-2 text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
             {t('intelligence.screenDebug.recentVisionSummaries')}
           </h4>
           <div className="space-y-2">
@@ -216,7 +219,7 @@ const ScreenIntelligenceDebugPanelContent = ({
               <div
                 key={summary.id}
                 className="rounded-lg border border-stone-700/50 bg-stone-800/30 p-2 text-xs">
-                <div className="flex justify-between text-stone-400">
+                <div className="flex justify-between text-stone-400 dark:text-neutral-500">
                   <span>{summary.app_name ?? t('intelligence.screenDebug.unknown')}</span>
                   <span>
                     {new Date(summary.captured_at_ms).toLocaleTimeString()} &middot;{' '}
@@ -258,7 +261,7 @@ const PermissionDot = ({ label, value }: { label: string; value?: string }) => {
   return (
     <div className="flex items-center gap-1.5">
       <div className={`h-2 w-2 rounded-full ${color}`} />
-      <span className="text-stone-300">{label}</span>
+      <span className="text-stone-300 dark:text-neutral-600">{label}</span>
     </div>
   );
 };
diff --git a/app/src/components/intelligence/SubconsciousReflectionCards.tsx b/app/src/components/intelligence/SubconsciousReflectionCards.tsx
index 19868d62e..67e4c7a1f 100644
--- a/app/src/components/intelligence/SubconsciousReflectionCards.tsx
+++ b/app/src/components/intelligence/SubconsciousReflectionCards.tsx
@@ -173,7 +173,9 @@ export default function SubconsciousReflectionCards({
 
   if (loading) {
     return (
-      <div data-testid="reflection-cards-loading" className="text-xs text-stone-400 py-2">
+      <div
+        data-testid="reflection-cards-loading"
+        className="text-xs text-stone-400 dark:text-neutral-500 py-2">
         {t('reflections.loading')}
       </div>
     );
@@ -181,7 +183,9 @@ export default function SubconsciousReflectionCards({
 
   if (visible.length === 0 && !error) {
     return (
-      <div data-testid="reflection-cards-empty" className="text-xs text-stone-400 py-3">
+      <div
+        data-testid="reflection-cards-empty"
+        className="text-xs text-stone-400 dark:text-neutral-500 py-3">
         {t('reflections.empty')}
       </div>
     );
@@ -195,15 +199,17 @@ export default function SubconsciousReflectionCards({
   return (
     <div data-testid="reflection-cards" className="flex flex-col h-full min-h-0 overflow-hidden">
       <div className="shrink-0 pb-3">
-        <h3 className="text-sm font-semibold text-stone-900 flex items-center gap-2">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 flex items-center gap-2">
           <span className="w-2 h-2 rounded-full bg-primary-400" />
           {t('reflections.title')}
-          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700">
+          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300">
             {visible.length}
           </span>
         </h3>
         {error && (
-          <div data-testid="reflection-cards-error" className="text-xs text-coral-600 mt-2">
+          <div
+            data-testid="reflection-cards-error"
+            className="text-xs text-coral-600 dark:text-coral-300 mt-2">
             {error}
           </div>
         )}
@@ -229,23 +235,25 @@ export default function SubconsciousReflectionCards({
           <div
             key={r.id}
             data-testid={`reflection-card-${r.id}`}
-            className="bg-white border border-stone-200 rounded-xl p-4">
+            className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-xl p-4">
             <div className="flex items-start justify-between gap-3">
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 mb-1">
-                  <span className="text-[10px] px-2 py-0.5 rounded-full bg-stone-100 text-stone-600">
+                  <span className="text-[10px] px-2 py-0.5 rounded-full bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300">
                     {kindLabel(r.kind, t)}
                   </span>
                   <span
                     data-testid={`reflection-timestamp-${r.id}`}
-                    className="text-[10px] text-stone-400"
+                    className="text-[10px] text-stone-400 dark:text-neutral-500"
                     title={formatAbsoluteTime(r.created_at)}>
                     {formatRelativeTime(r.created_at, t)}
                   </span>
                 </div>
-                <p className="text-sm text-stone-900 whitespace-pre-line break-words">{r.body}</p>
+                <p className="text-sm text-stone-900 dark:text-neutral-100 whitespace-pre-line break-words">
+                  {r.body}
+                </p>
                 {r.proposed_action && (
-                  <p className="text-xs text-stone-500 mt-2">
+                  <p className="text-xs text-stone-500 dark:text-neutral-400 mt-2">
                     <em>{t('reflections.proposedAction')}:</em> {r.proposed_action}
                   </p>
                 )}
@@ -262,7 +270,7 @@ export default function SubconsciousReflectionCards({
                 <button
                   data-testid={`reflection-dismiss-${r.id}`}
                   onClick={() => void handleDismiss(r.id)}
-                  className="px-3 py-1.5 text-xs bg-stone-100 hover:bg-stone-200 text-stone-600 rounded-lg transition-colors">
+                  className="px-3 py-1.5 text-xs bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200  text-stone-600 dark:text-neutral-300 rounded-lg transition-colors">
                   {t('reflections.dismiss')}
                 </button>
               </div>
diff --git a/app/src/components/intelligence/VaultPanel.tsx b/app/src/components/intelligence/VaultPanel.tsx
index 8860b541e..c0fa760d9 100644
--- a/app/src/components/intelligence/VaultPanel.tsx
+++ b/app/src/components/intelligence/VaultPanel.tsx
@@ -150,21 +150,23 @@ export function VaultPanel({ onToast }: VaultPanelProps) {
 
   return (
     <div
-      className="rounded-lg border border-stone-200 bg-white p-4 shadow-sm"
+      className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-sm"
       data-testid="vault-panel">
       <div className="mb-3 flex items-center justify-between gap-3">
         <div>
-          <h3 className="text-sm font-semibold text-stone-800">Knowledge vaults</h3>
-          <p className="text-xs text-stone-500">
+          <h3 className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
+            Knowledge vaults
+          </h3>
+          <p className="text-xs text-stone-500 dark:text-neutral-400">
             Point at a local folder; files are chunked and mirrored into memory.
           </p>
         </div>
         <button
           type="button"
           onClick={() => setShowForm(v => !v)}
-          className="inline-flex items-center gap-1 rounded-md border border-primary-300 bg-white
-                     px-3 py-1.5 text-xs font-semibold text-primary-700 shadow-sm
-                     transition-colors hover:bg-primary-50
+          className="inline-flex items-center gap-1 rounded-md border border-primary-300 bg-white dark:bg-neutral-900
+                     px-3 py-1.5 text-xs font-semibold text-primary-700 dark:text-primary-300 shadow-sm
+                     transition-colors hover:bg-primary-50 dark:hover:bg-primary-500/15
                      focus:outline-none focus:ring-2 focus:ring-primary-200"
           data-testid="vault-add-toggle">
           {showForm ? 'Cancel' : '+ Add vault'}
@@ -174,34 +176,36 @@ export function VaultPanel({ onToast }: VaultPanelProps) {
       {showForm ? (
         <form
           onSubmit={handleCreate}
-          className="mb-3 space-y-2 rounded-md border border-stone-100 bg-stone-50 p-3"
+          className="mb-3 space-y-2 rounded-md border border-stone-100 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3"
           data-testid="vault-add-form">
           <label className="block">
-            <span className="text-xs font-medium text-stone-600">Name</span>
+            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">Name</span>
             <input
               type="text"
               value={newName}
               onChange={e => setNewName(e.target.value)}
               required
               placeholder="My research notes"
-              className="mt-1 w-full rounded border border-stone-200 bg-white px-2 py-1.5 text-sm
+              className="mt-1 w-full rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1.5 text-sm
                          focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
             />
           </label>
           <label className="block">
-            <span className="text-xs font-medium text-stone-600">Folder path (absolute)</span>
+            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+              Folder path (absolute)
+            </span>
             <input
               type="text"
               value={newPath}
               onChange={e => setNewPath(e.target.value)}
               required
               placeholder="/Users/you/Documents/notes"
-              className="mt-1 w-full rounded border border-stone-200 bg-white px-2 py-1.5 font-mono text-xs
+              className="mt-1 w-full rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1.5 font-mono text-xs
                          focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
             />
           </label>
           <label className="block">
-            <span className="text-xs font-medium text-stone-600">
+            <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
               Excludes (comma-separated substrings, optional)
             </span>
             <input
@@ -209,7 +213,7 @@ export function VaultPanel({ onToast }: VaultPanelProps) {
               value={newExcludes}
               onChange={e => setNewExcludes(e.target.value)}
               placeholder="drafts/, .secret"
-              className="mt-1 w-full rounded border border-stone-200 bg-white px-2 py-1.5 text-xs
+              className="mt-1 w-full rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs
                          focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
             />
           </label>
@@ -227,29 +231,33 @@ export function VaultPanel({ onToast }: VaultPanelProps) {
       ) : null}
 
       {loading ? (
-        <div className="py-4 text-center text-xs text-stone-400">Loading vaults…</div>
+        <div className="py-4 text-center text-xs text-stone-400 dark:text-neutral-500">
+          Loading vaults…
+        </div>
       ) : loadError ? (
-        <div className="rounded border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-800">
+        <div className="rounded border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-800">
           Failed to load vaults: {loadError}
         </div>
       ) : vaults.length === 0 ? (
-        <div className="py-4 text-center text-xs text-stone-400">
+        <div className="py-4 text-center text-xs text-stone-400 dark:text-neutral-500">
           No vaults yet. Add one above to start ingesting a folder.
         </div>
       ) : (
-        <ul className="divide-y divide-stone-100" data-testid="vault-list">
+        <ul className="divide-y divide-stone-100 dark:divide-neutral-800" data-testid="vault-list">
           {vaults.map(v => {
             const state = busy[v.id];
             return (
               <li key={v.id} className="flex items-center justify-between gap-3 py-2">
                 <div className="min-w-0 flex-1">
-                  <div className="truncate text-sm font-medium text-stone-800">{v.name}</div>
+                  <div className="truncate text-sm font-medium text-stone-800 dark:text-neutral-100">
+                    {v.name}
+                  </div>
                   <div
-                    className="truncate font-mono text-[11px] text-stone-500"
+                    className="truncate font-mono text-[11px] text-stone-500 dark:text-neutral-400"
                     title={v.root_path}>
                     {v.root_path}
                   </div>
-                  <div className="mt-0.5 text-[11px] text-stone-400">
+                  <div className="mt-0.5 text-[11px] text-stone-400 dark:text-neutral-500">
                     {v.file_count.toLocaleString()} file(s) ·{' '}
                     {v.last_synced_at
                       ? `synced ${formatRelative(v.last_synced_at)}`
@@ -261,18 +269,18 @@ export function VaultPanel({ onToast }: VaultPanelProps) {
                     type="button"
                     onClick={() => void handleSync(v)}
                     disabled={state === 'sync' || state === 'remove'}
-                    className="rounded-md border border-primary-300 bg-white px-3 py-1.5 text-xs
-                               font-semibold text-primary-700 shadow-sm transition-colors
-                               hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-50">
+                    className="rounded-md border border-primary-300 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs
+                               font-semibold text-primary-700 dark:text-primary-300 shadow-sm transition-colors
+                               hover:bg-primary-50 dark:hover:bg-primary-500/15 disabled:cursor-not-allowed disabled:opacity-50">
                     {state === 'sync' ? 'Syncing…' : 'Sync'}
                   </button>
                   <button
                     type="button"
                     onClick={() => void handleRemove(v)}
                     disabled={state === 'sync' || state === 'remove'}
-                    className="rounded-md border border-coral-200 bg-white px-3 py-1.5 text-xs
-                               font-semibold text-coral-700 shadow-sm transition-colors
-                               hover:bg-coral-50 disabled:cursor-not-allowed disabled:opacity-50">
+                    className="rounded-md border border-coral-200 dark:border-coral-500/30 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs
+                               font-semibold text-coral-700 dark:text-coral-300 shadow-sm transition-colors
+                               hover:bg-coral-50 dark:hover:bg-coral-500/10 disabled:cursor-not-allowed disabled:opacity-50">
                     {state === 'remove' ? 'Removing…' : 'Remove'}
                   </button>
                 </div>
diff --git a/app/src/components/intelligence/WhatsAppMemorySection.tsx b/app/src/components/intelligence/WhatsAppMemorySection.tsx
index 569a439eb..9921260ef 100644
--- a/app/src/components/intelligence/WhatsAppMemorySection.tsx
+++ b/app/src/components/intelligence/WhatsAppMemorySection.tsx
@@ -47,13 +47,15 @@ export function WhatsAppMemorySection({ pollIntervalMs = 30000 }: WhatsAppMemory
 
   return (
     <div
-      className="rounded-xl border border-stone-100 bg-white px-4 py-3 shadow-sm"
+      className="rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3 shadow-sm"
       data-testid="whatsapp-memory-section">
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-2 min-w-0">
           <WhatsAppIcon />
-          <span className="text-sm font-semibold text-stone-800">WhatsApp</span>
-          <span className="text-xs text-stone-500">
+          <span className="text-sm font-semibold text-stone-800 dark:text-neutral-100">
+            WhatsApp
+          </span>
+          <span className="text-xs text-stone-500 dark:text-neutral-400">
             {chatCount.toLocaleString()}{' '}
             {chatCount !== 1 ? t('whatsapp.chatsSynced') : t('whatsapp.chatSynced')}
             {lastSyncTs !== null && <> · {relativeTime(lastSyncTs, t)}</>}
@@ -63,9 +65,9 @@ export function WhatsAppMemorySection({ pollIntervalMs = 30000 }: WhatsAppMemory
           type="button"
           onClick={() => void handleSync()}
           disabled={syncing}
-          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-stone-200
-                     bg-white px-3 py-1.5 text-xs font-semibold text-stone-700 shadow-sm
-                     transition-colors hover:bg-stone-50
+          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-stone-200 dark:border-neutral-800
+                     bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-semibold text-stone-700 dark:text-neutral-200 shadow-sm
+                     transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60
                      disabled:cursor-not-allowed disabled:opacity-50
                      focus:outline-none focus:ring-2 focus:ring-primary-200">
           <RefreshIcon spinning={syncing} />
diff --git a/app/src/components/notifications/NotificationCard.tsx b/app/src/components/notifications/NotificationCard.tsx
index 030215788..be5757d7c 100644
--- a/app/src/components/notifications/NotificationCard.tsx
+++ b/app/src/components/notifications/NotificationCard.tsx
@@ -33,7 +33,7 @@ function providerBadgeClass(provider: string): string {
     case 'linkedin':
       return 'bg-sky-100 text-sky-700 border-sky-200';
     default:
-      return 'bg-stone-100 text-stone-700 border-stone-200';
+      return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 border-stone-200 dark:border-neutral-800';
   }
 }
 
@@ -69,8 +69,8 @@ const NotificationCard = ({ notification: n, onMarkRead, onNavigate, onDismiss }
 
   return (
     <div
-      className={`w-full p-3 border-b border-stone-100 hover:bg-stone-50 transition-colors duration-150 ${
-        isUnread ? 'bg-primary-50/30' : 'bg-white'
+      className={`w-full p-3 border-b border-stone-100 dark:border-neutral-800 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors duration-150 ${
+        isUnread ? 'bg-primary-50/30' : 'bg-white dark:bg-neutral-900'
       }`}>
       <div className="flex items-start gap-3">
         {/* Unread dot — reserve space so text stays aligned whether read or unread */}
@@ -107,21 +107,27 @@ const NotificationCard = ({ notification: n, onMarkRead, onNavigate, onDismiss }
               </span>
             )}
 
-            <span className="ml-auto text-[11px] text-stone-400 flex-shrink-0">
+            <span className="ml-auto text-[11px] text-stone-400 dark:text-neutral-500 flex-shrink-0">
               {relativeTime(n.received_at)}
             </span>
           </div>
 
           {/* Title */}
-          <p className="text-sm font-medium text-stone-900 truncate">{n.title}</p>
+          <p className="text-sm font-medium text-stone-900 dark:text-neutral-100 truncate">
+            {n.title}
+          </p>
 
           {/* Body preview */}
-          {n.body && <p className="text-xs text-stone-500 mt-0.5 line-clamp-2">{n.body}</p>}
+          {n.body && (
+            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+              {n.body}
+            </p>
+          )}
         </button>
         {onDismiss && (
           <button
             onClick={() => onDismiss(n.id)}
-            className="mt-0.5 ml-1 flex-shrink-0 p-0.5 rounded hover:bg-stone-200 text-stone-400 hover:text-stone-600 transition-colors"
+            className="mt-0.5 ml-1 flex-shrink-0 p-0.5 rounded hover:bg-stone-200 dark:hover:bg-neutral-800/60 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors"
             aria-label={t('notifications.card.dismiss')}>
             <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
diff --git a/app/src/components/notifications/NotificationCenter.tsx b/app/src/components/notifications/NotificationCenter.tsx
index 28c1b3bf6..544176845 100644
--- a/app/src/components/notifications/NotificationCenter.tsx
+++ b/app/src/components/notifications/NotificationCenter.tsx
@@ -121,9 +121,9 @@ const NotificationCenter = () => {
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-stone-200">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-stone-200 dark:border-neutral-800">
         <div className="flex items-center gap-2">
-          <h2 className="text-base font-semibold text-stone-900">
+          <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
             {t('notifications.center.title')}
           </h2>
           {filteredUnreadCount > 0 && (
@@ -145,13 +145,13 @@ const NotificationCenter = () => {
 
       {/* Provider filter pills */}
       {allProviders.length > 1 && (
-        <div className="flex items-center gap-2 px-4 py-2 border-b border-stone-100 overflow-x-auto">
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-stone-100 dark:border-neutral-800 overflow-x-auto">
           <button
             onClick={() => setSelectedProvider(undefined)}
             className={`flex-shrink-0 px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
               selectedProvider === undefined
                 ? 'bg-primary-500 text-white'
-                : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
+                : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-800/60'
             }`}>
             {t('notifications.center.filterAll')}
           </button>
@@ -162,7 +162,7 @@ const NotificationCenter = () => {
               className={`flex-shrink-0 px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
                 selectedProvider === p
                   ? 'bg-primary-500 text-white'
-                  : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
+                  : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-800/60'
               }`}>
               {p}
             </button>
@@ -173,7 +173,7 @@ const NotificationCenter = () => {
       {/* Content */}
       <div className="flex-1 overflow-y-auto">
         {loading && (
-          <div className="flex items-center justify-center py-12 text-stone-400 text-sm">
+          <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500 text-sm">
             {t('common.loading')}
           </div>
         )}
@@ -185,7 +185,7 @@ const NotificationCenter = () => {
         )}
 
         {!loading && !error && visibleItems.length === 0 && (
-          <div className="flex flex-col items-center justify-center py-16 text-stone-400">
+          <div className="flex flex-col items-center justify-center py-16 text-stone-400 dark:text-neutral-500">
             <svg
               className="w-10 h-10 mb-3 opacity-40"
               fill="none"
diff --git a/app/src/components/oauth/providerConfigs.tsx b/app/src/components/oauth/providerConfigs.tsx
index 0f32f4b40..368ddf331 100644
--- a/app/src/components/oauth/providerConfigs.tsx
+++ b/app/src/components/oauth/providerConfigs.tsx
@@ -48,27 +48,30 @@ export const oauthProviderConfigs: OAuthProviderConfig[] = [
     id: 'google',
     name: 'Google',
     icon: GoogleIcon,
-    color: 'bg-white border border-gray-200',
-    hoverColor: 'hover:bg-gray-50 hover:border-gray-300',
-    textColor: 'text-gray-900',
+    color: 'bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700',
+    hoverColor:
+      'hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-800 dark:hover:border-neutral-600',
+    textColor: 'text-gray-900 dark:text-neutral-100',
     showOnWelcome: true,
   },
   {
     id: 'github',
     name: 'GitHub',
     icon: GitHubIcon,
-    color: 'bg-white border border-gray-200',
-    hoverColor: 'hover:bg-gray-50 hover:border-gray-300',
-    textColor: 'text-gray-900',
+    color: 'bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700',
+    hoverColor:
+      'hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-800 dark:hover:border-neutral-600',
+    textColor: 'text-gray-900 dark:text-neutral-100',
     showOnWelcome: true,
   },
   {
     id: 'twitter',
     name: 'Twitter',
     icon: TwitterIcon,
-    color: 'bg-white border border-gray-200',
-    hoverColor: 'hover:bg-gray-50 hover:border-gray-300',
-    textColor: 'text-gray-900',
+    color: 'bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700',
+    hoverColor:
+      'hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-800 dark:hover:border-neutral-600',
+    textColor: 'text-gray-900 dark:text-neutral-100',
     showOnWelcome: true,
   },
   {
diff --git a/app/src/components/rewards/ReferralRewardsSection.tsx b/app/src/components/rewards/ReferralRewardsSection.tsx
index c0b75f488..b3ea1a9f9 100644
--- a/app/src/components/rewards/ReferralRewardsSection.tsx
+++ b/app/src/components/rewards/ReferralRewardsSection.tsx
@@ -14,11 +14,11 @@ function formatUsd(n: number): string {
 function statusBadgeClass(status: ReferralRelationshipStatus): string {
   switch (status) {
     case 'converted':
-      return 'bg-sage-100 text-sage-800';
+      return 'bg-sage-100 dark:bg-sage-500/20 text-sage-800 dark:text-sage-200';
     case 'expired':
-      return 'bg-stone-100 text-stone-600';
+      return 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300';
     default:
-      return 'bg-amber-50 text-amber-800';
+      return 'bg-amber-50 dark:bg-amber-500/10 text-amber-800 dark:text-amber-200';
   }
 }
 
@@ -163,23 +163,25 @@ const ReferralRewardsSection = () => {
 
   return (
     <div className="space-y-4">
-      <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6 space-y-6">
+      <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 space-y-6">
         <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
           <div className="space-y-2">
-            <h2 className="text-2xl font-semibold text-stone-900">
+            <h2 className="text-2xl font-semibold text-stone-900 dark:text-neutral-100">
               {t('rewards.referralSection.title')}
             </h2>
-            <p className="text-sm text-stone-600 max-w-xl">
+            <p className="text-sm text-stone-600 dark:text-neutral-300 max-w-xl">
               {t('rewards.referralSection.subtitle')}
             </p>
           </div>
         </div>
 
         {loading && !stats ? (
-          <p className="text-sm text-stone-500">{t('rewards.referralSection.loading')}</p>
+          <p className="text-sm text-stone-500 dark:text-neutral-400">
+            {t('rewards.referralSection.loading')}
+          </p>
         ) : null}
         {loadError ? (
-          <div className="rounded-xl border border-coral-200 bg-coral-50 px-3 py-2 text-sm text-coral-800">
+          <div className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-800 dark:text-coral-200">
             {loadError}
             <button
               type="button"
@@ -193,35 +195,35 @@ const ReferralRewardsSection = () => {
         {stats ? (
           <>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-              <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400">
+              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('rewards.referralSection.yourCode')}
                 </div>
-                <div className="mt-2 font-mono text-lg font-semibold text-stone-900 break-all">
+                <div className="mt-2 font-mono text-lg font-semibold text-stone-900 dark:text-neutral-100 break-all">
                   {stats.referralCode || '—'}
                 </div>
               </div>
-              <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400">
+              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('rewards.referralSection.totalEarned')}
                 </div>
-                <div className="mt-2 text-2xl font-semibold text-stone-900">
+                <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
                   {formatUsd(stats.totals.totalRewardUsd)}
                 </div>
               </div>
-              <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400">
+              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('rewards.referralSection.pendingReferrals')}
                 </div>
-                <div className="mt-2 text-2xl font-semibold text-stone-900">
+                <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
                   {stats.totals.pendingCount}
                 </div>
               </div>
-              <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
-                <div className="text-xs font-medium uppercase tracking-wide text-stone-400">
+              <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+                <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('rewards.referralSection.completed')}
                 </div>
-                <div className="mt-2 text-2xl font-semibold text-stone-900">
+                <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
                   {stats.totals.convertedCount}
                 </div>
               </div>
@@ -239,11 +241,13 @@ const ReferralRewardsSection = () => {
                 type="button"
                 onClick={() => void handleShare()}
                 disabled={!referralCodeToCopy}
-                className="inline-flex items-center justify-center rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm font-medium text-stone-700 transition-colors hover:bg-stone-50 disabled:opacity-50">
+                className="inline-flex items-center justify-center rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3 text-sm font-medium text-stone-700 dark:text-neutral-200 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 disabled:opacity-50">
                 {t('rewards.referralSection.share')}
               </button>
               {copyHint ? (
-                <span className="self-center text-sm text-sage-600">{copyHint}</span>
+                <span className="self-center text-sm text-sage-600 dark:text-sage-300">
+                  {copyHint}
+                </span>
               ) : null}
             </div>
           </>
@@ -251,11 +255,13 @@ const ReferralRewardsSection = () => {
       </div>
 
       {stats && stats.canApplyReferral !== false && showApplyForm ? (
-        <div className="rounded-xl shadow-soft border border-stone-200 bg-white p-4 space-y-3">
-          <h2 className="text-2xl font-semibold text-stone-900">
+        <div className="rounded-xl shadow-soft border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+          <h2 className="text-2xl font-semibold text-stone-900 dark:text-neutral-100">
             {t('rewards.referralSection.haveCode')}
           </h2>
-          <p className="text-xs text-stone-600">{t('rewards.referralSection.haveCodeDesc')}</p>
+          <p className="text-xs text-stone-600 dark:text-neutral-300">
+            {t('rewards.referralSection.haveCodeDesc')}
+          </p>
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
             <input
               type="text"
@@ -264,7 +270,7 @@ const ReferralRewardsSection = () => {
               onKeyDown={e => e.key === 'Enter' && void handleApply()}
               placeholder={t('rewards.referralSection.placeholder')}
               disabled={applyLoading}
-              className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 bg-white font-mono text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
+              className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
             />
             <button
               type="button"
@@ -276,12 +282,14 @@ const ReferralRewardsSection = () => {
                 : t('rewards.referralSection.apply')}
             </button>
           </div>
-          {applyError ? <p className="text-xs text-coral-600">{applyError}</p> : null}
+          {applyError ? (
+            <p className="text-xs text-coral-600 dark:text-coral-300">{applyError}</p>
+          ) : null}
         </div>
       ) : null}
 
       {stats && (hasAppliedFromStats || hasAppliedFromProfile || applySuccess) && !showApplyForm ? (
-        <p className="text-sm text-sage-700 rounded-xl border border-sage-200 bg-sage-50 px-3 py-2">
+        <p className="text-sm text-sage-700 dark:text-sage-300 rounded-xl border border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 px-3 py-2">
           {t('rewards.referralSection.linked')}
           {stats.appliedReferralCode
             ? ' ' +
@@ -292,19 +300,19 @@ const ReferralRewardsSection = () => {
       ) : null}
 
       {stats ? (
-        <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6">
+        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6">
           <div>
-            <h3 className="text-sm font-semibold text-stone-900 mb-2">
+            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-2">
               {t('rewards.referralSection.activity')}
             </h3>
             {stats.referrals.length === 0 ? (
-              <p className="text-sm text-stone-500 rounded-xl border border-dashed border-stone-200 px-4 py-6 text-center">
+              <p className="text-sm text-stone-500 dark:text-neutral-400 rounded-xl border border-dashed border-stone-200 dark:border-neutral-800 px-4 py-6 text-center">
                 {t('rewards.referralSection.noReferrals')}
               </p>
             ) : (
-              <div className="overflow-x-auto rounded-xl border border-stone-200">
+              <div className="overflow-x-auto rounded-xl border border-stone-200 dark:border-neutral-800">
                 <table className="min-w-full text-sm text-left">
-                  <thead className="bg-stone-50 text-xs uppercase tracking-wide text-stone-500">
+                  <thead className="bg-stone-50 dark:bg-neutral-800/60 text-xs uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                     <tr>
                       <th className="px-3 py-2 font-medium">
                         {t('rewards.referralSection.colReferredUser')}
@@ -320,10 +328,12 @@ const ReferralRewardsSection = () => {
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-stone-100">
+                  <tbody className="divide-y divide-stone-100 dark:divide-neutral-800">
                     {stats.referrals.map((row, idx) => (
-                      <tr key={row.id ?? row.referredUserId ?? idx} className="bg-white">
-                        <td className="px-3 py-2 font-mono text-stone-800">
+                      <tr
+                        key={row.id ?? row.referredUserId ?? idx}
+                        className="bg-white dark:bg-neutral-900">
+                        <td className="px-3 py-2 font-mono text-stone-800 dark:text-neutral-100">
                           {row.referredUserMasked || row.referredDisplayName || '—'}
                         </td>
                         <td className="px-3 py-2">
@@ -336,12 +346,12 @@ const ReferralRewardsSection = () => {
                                 : t('rewards.referralSection.statusJoined')}
                           </span>
                         </td>
-                        <td className="px-3 py-2 text-stone-700">
+                        <td className="px-3 py-2 text-stone-700 dark:text-neutral-200">
                           {row.rewardUsd != null && row.rewardUsd > 0
                             ? formatUsd(row.rewardUsd)
                             : '—'}
                         </td>
-                        <td className="px-3 py-2 text-stone-500 text-xs">
+                        <td className="px-3 py-2 text-stone-500 dark:text-neutral-400 text-xs">
                           {row.status === 'converted' && row.convertedAt
                             ? new Date(row.convertedAt).toLocaleString()
                             : row.createdAt
diff --git a/app/src/components/rewards/RewardsCommunityTab.tsx b/app/src/components/rewards/RewardsCommunityTab.tsx
index 3ba593472..194b2297e 100644
--- a/app/src/components/rewards/RewardsCommunityTab.tsx
+++ b/app/src/components/rewards/RewardsCommunityTab.tsx
@@ -13,10 +13,22 @@ function formatNumber(value: number): string {
 
 function roleAccentTone(index: number) {
   const tones = [
-    { iconBg: 'bg-amber-50', iconText: 'text-amber-600', iconBorder: 'border-amber-100' },
-    { iconBg: 'bg-blue-50', iconText: 'text-primary-600', iconBorder: 'border-blue-100' },
+    {
+      iconBg: 'bg-amber-50 dark:bg-amber-500/10',
+      iconText: 'text-amber-600 dark:text-amber-300',
+      iconBorder: 'border-amber-100',
+    },
+    {
+      iconBg: 'bg-blue-50 dark:bg-blue-500/10',
+      iconText: 'text-primary-600 dark:text-primary-300',
+      iconBorder: 'border-blue-100',
+    },
     { iconBg: 'bg-slate-100', iconText: 'text-slate-600', iconBorder: 'border-slate-200' },
-    { iconBg: 'bg-emerald-50', iconText: 'text-emerald-600', iconBorder: 'border-emerald-100' },
+    {
+      iconBg: 'bg-emerald-50 dark:bg-emerald-500/10',
+      iconText: 'text-emerald-600 dark:text-emerald-300',
+      iconBorder: 'border-emerald-100',
+    },
   ] as const;
 
   return tones[index % tones.length];
@@ -95,7 +107,7 @@ export default function RewardsCommunityTab({
           <div className="flex flex-col gap-2 sm:flex-row">
             <button
               onClick={() => navigate('/settings/messaging')}
-              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-3 text-sm font-semibold text-primary-700 shadow-lg transition-transform active:scale-[0.98]">
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white dark:bg-neutral-900 px-4 py-3 text-sm font-semibold text-primary-700 dark:text-primary-300 shadow-lg transition-transform active:scale-[0.98]">
               <svg
                 className="w-4 h-4"
                 fill="none"
@@ -131,7 +143,7 @@ export default function RewardsCommunityTab({
         <div
           role="alert"
           data-testid="rewards-error"
-          className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+          className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-4 py-3 text-sm text-amber-800 dark:text-amber-200">
           <span>
             {t('rewards.community.syncUnavailable')} {error}
           </span>
@@ -141,7 +153,7 @@ export default function RewardsCommunityTab({
               data-testid="rewards-retry"
               onClick={onRetry}
               disabled={isLoading}
-              className="rounded-full border border-amber-300 bg-white px-3 py-1 text-xs font-semibold text-amber-800 shadow-sm transition-colors hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-60">
+              className="rounded-full border border-amber-300 dark:border-amber-500/40 bg-white dark:bg-neutral-900 px-3 py-1 text-xs font-semibold text-amber-800 dark:text-amber-200 shadow-sm transition-colors hover:bg-amber-100 dark:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-60">
               {isLoading ? t('rewards.community.retrying') : t('rewards.community.tryAgain')}
             </button>
           ) : null}
@@ -149,13 +161,13 @@ export default function RewardsCommunityTab({
       ) : null}
 
       <div className="space-y-4">
-        <section className="rounded-[1.25rem] bg-white p-6 shadow-[0_4px_20px_rgba(25,28,30,0.04)]">
+        <section className="rounded-[1.25rem] bg-white dark:bg-neutral-900 p-6 shadow-[0_4px_20px_rgba(25,28,30,0.04)]">
           <div className="mb-6 flex items-center justify-between gap-4">
             <div>
-              <h2 className="text-lg font-bold text-stone-900">
+              <h2 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
                 {t('rewards.community.yourProgress')}
               </h2>
-              <p className="text-xs text-stone-500">
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
                 {isLoading
                   ? t('rewards.community.loadingRewards')
                   : t('rewards.community.achievementsUnlocked')
@@ -183,10 +195,12 @@ export default function RewardsCommunityTab({
                   strokeWidth="4"
                   strokeDasharray={ringCircumference}
                   strokeDashoffset={ringOffset}
-                  className="text-primary-600 transition-all duration-300"
+                  className="text-primary-600 dark:text-primary-300 transition-all duration-300"
                 />
               </svg>
-              <span className="absolute text-sm font-bold text-stone-900">{progressPercent}%</span>
+              <span className="absolute text-sm font-bold text-stone-900 dark:text-neutral-100">
+                {progressPercent}%
+              </span>
             </div>
           </div>
 
@@ -196,8 +210,8 @@ export default function RewardsCommunityTab({
                 key={role?.id ?? `placeholder-${index}`}
                 className={`flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full border-2 ${
                   role?.unlocked
-                    ? 'border-primary-200 bg-primary-50 text-primary-600'
-                    : 'border-dashed border-stone-300 bg-stone-100 text-stone-400'
+                    ? 'border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300'
+                    : 'border-dashed border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 text-stone-400 dark:text-neutral-500'
                 }`}>
                 <svg className="h-6 w-6" viewBox="0 0 24 24" aria-hidden="true">
                   {roleGlyph(index)}
@@ -209,13 +223,15 @@ export default function RewardsCommunityTab({
 
         <section className="space-y-3">
           <div className="flex items-center justify-between">
-            <h2 className="text-lg font-bold text-stone-900">
+            <h2 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
               {t('rewards.community.rolesAndRewards')}
             </h2>
           </div>
           {isLoading ? (
-            <div className="rounded-2xl border border-stone-200 bg-white p-5 shadow-soft">
-              <div className="text-sm text-stone-600">{t('rewards.community.loadingRewards')}</div>
+            <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-soft">
+              <div className="text-sm text-stone-600 dark:text-neutral-300">
+                {t('rewards.community.loadingRewards')}
+              </div>
             </div>
           ) : rewardRoles.length > 0 ? (
             rewardRoles.map((role, index) => {
@@ -224,7 +240,7 @@ export default function RewardsCommunityTab({
               return (
                 <div
                   key={role.id}
-                  className={`rounded-[1.25rem] bg-white p-5 shadow-sm transition-shadow hover:shadow-md ${
+                  className={`rounded-[1.25rem] bg-white dark:bg-neutral-900 p-5 shadow-sm transition-shadow hover:shadow-md ${
                     role.unlocked ? 'ring-1 ring-primary-100' : 'ring-1 ring-black/[0.04]'
                   }`}>
                   <div className="flex items-start justify-between gap-4">
@@ -236,13 +252,15 @@ export default function RewardsCommunityTab({
                         </svg>
                       </div>
                       <div>
-                        <h3 className="text-base font-bold text-stone-900">{role.title}</h3>
-                        <p className="mt-1 text-xs leading-relaxed text-stone-600">
+                        <h3 className="text-base font-bold text-stone-900 dark:text-neutral-100">
+                          {role.title}
+                        </h3>
+                        <p className="mt-1 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
                           {role.description}
                         </p>
                       </div>
                     </div>
-                    <div className="flex items-center gap-1 text-primary-700">
+                    <div className="flex items-center gap-1 text-primary-700 dark:text-primary-300">
                       <span className="text-[10px] font-bold uppercase tracking-[0.16em]">
                         {role.unlocked
                           ? t('rewards.community.unlocked')
@@ -265,21 +283,21 @@ export default function RewardsCommunityTab({
               );
             })
           ) : (
-            <div className="rounded-2xl border border-stone-200 bg-white p-5 shadow-soft">
-              <h2 className="text-lg font-semibold text-stone-900">
+            <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-soft">
+              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
                 {t('rewards.community.syncPending')}
               </h2>
-              <p className="mt-2 text-sm text-stone-600">
+              <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
                 {t('rewards.community.syncPendingDesc')}
               </p>
             </div>
           )}
         </section>
 
-        <section className="rounded-[1.25rem] bg-[#f2f4f6] p-4 text-sm text-stone-600">
+        <section className="rounded-[1.25rem] bg-[#f2f4f6] p-4 text-sm text-stone-600 dark:text-neutral-300">
           <div className="flex items-center justify-between gap-3">
             <span>{t('rewards.community.discordServer')}</span>
-            <span className="font-semibold text-stone-900">
+            <span className="font-semibold text-stone-900 dark:text-neutral-100">
               {!snapshot
                 ? t('rewards.community.discordWaiting')
                 : snapshot.discord.membershipStatus === 'member'
@@ -293,7 +311,7 @@ export default function RewardsCommunityTab({
           </div>
           <div className="mt-3 flex items-center justify-between gap-3">
             <span>{t('rewards.community.currentStreak')}</span>
-            <span className="font-semibold text-stone-900">
+            <span className="font-semibold text-stone-900 dark:text-neutral-100">
               {snapshot
                 ? t('rewards.community.streakDays').replace(
                     '{n}',
@@ -304,7 +322,7 @@ export default function RewardsCommunityTab({
           </div>
           <div className="mt-3 flex items-center justify-between gap-3">
             <span>{t('rewards.community.cumulativeTokens')}</span>
-            <span className="font-semibold text-stone-900">
+            <span className="font-semibold text-stone-900 dark:text-neutral-100">
               {snapshot
                 ? formatNumber(snapshot.metrics.cumulativeTokens)
                 : t('rewards.community.unknown')}
diff --git a/app/src/components/rewards/RewardsCouponSection.tsx b/app/src/components/rewards/RewardsCouponSection.tsx
index 3be2ba5b4..7029313bf 100644
--- a/app/src/components/rewards/RewardsCouponSection.tsx
+++ b/app/src/components/rewards/RewardsCouponSection.tsx
@@ -19,9 +19,10 @@ function formatDateTime(value: string | null, pendingLabel: string): string {
 }
 
 function redemptionStatusClass(coupon: RedeemedCoupon): string {
-  if (coupon.fulfilled) return 'bg-sage-100 text-sage-700';
-  if (coupon.activationType === 'CONDITIONAL') return 'bg-amber-50 text-amber-800';
-  return 'bg-stone-100 text-stone-700';
+  if (coupon.fulfilled) return 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300';
+  if (coupon.activationType === 'CONDITIONAL')
+    return 'bg-amber-50 dark:bg-amber-500/10 text-amber-800 dark:text-amber-200';
+  return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200';
 }
 
 const RewardsCouponSection = () => {
@@ -139,26 +140,30 @@ const RewardsCouponSection = () => {
 
   return (
     <>
-      <section className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6 space-y-5">
+      <section className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 space-y-5">
         <div className="space-y-2">
-          <h2 className="text-2xl font-semibold text-stone-900">{t('rewards.coupon.title')}</h2>
-          <p className="max-w-2xl text-sm text-stone-600">{t('rewards.coupon.subtitle')}</p>
+          <h2 className="text-2xl font-semibold text-stone-900 dark:text-neutral-100">
+            {t('rewards.coupon.title')}
+          </h2>
+          <p className="max-w-2xl text-sm text-stone-600 dark:text-neutral-300">
+            {t('rewards.coupon.subtitle')}
+          </p>
         </div>
 
         <div className="grid gap-4 sm:grid-cols-2">
-          <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
-            <div className="text-xs font-medium uppercase tracking-wide text-stone-400">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+            <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
               {t('rewards.coupon.promoCredits')}
             </div>
-            <div className="mt-2 text-2xl font-semibold text-stone-900">
+            <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
               {creditBalance ? formatUsd(creditBalance.promotionBalanceUsd) : loading ? '…' : '—'}
             </div>
           </div>
-          <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
-            <div className="text-xs font-medium uppercase tracking-wide text-stone-400">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+            <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-neutral-500">
               {t('rewards.coupon.redeemedCodes')}
             </div>
-            <div className="mt-2 text-2xl font-semibold text-stone-900">
+            <div className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
               {redeemedCoupons.length}
             </div>
           </div>
@@ -181,7 +186,7 @@ const RewardsCouponSection = () => {
               }}
               placeholder={t('rewards.coupon.placeholder')}
               disabled={submitLoading}
-              className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 bg-white font-mono text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
+              className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
             />
             <button
               type="button"
@@ -192,17 +197,17 @@ const RewardsCouponSection = () => {
             </button>
           </div>
           {submitSuccess ? (
-            <div className="rounded-xl border border-sage-200 bg-sage-50 px-3 py-2 text-sm text-sage-800">
+            <div className="rounded-xl border border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 px-3 py-2 text-sm text-sage-800 dark:text-sage-200">
               {submitSuccess}
             </div>
           ) : null}
           {submitError ? (
-            <div className="rounded-xl border border-coral-200 bg-coral-50 px-3 py-2 text-sm text-coral-800">
+            <div className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-800 dark:text-coral-200">
               {submitError}
             </div>
           ) : null}
           {loadError ? (
-            <div className="rounded-xl border border-coral-200 bg-coral-50 px-3 py-2 text-sm text-coral-800">
+            <div className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-800 dark:text-coral-200">
               {loadError}
               <button
                 type="button"
@@ -214,33 +219,35 @@ const RewardsCouponSection = () => {
           ) : null}
         </div>
       </section>
-      <section className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6 space-y-5">
+      <section className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 space-y-5">
         <div className="space-y-2">
           <div className="flex items-center justify-between gap-3">
-            <h3 className="text-sm font-semibold text-stone-900">
+            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
               {t('rewards.coupon.recentRedemptions')}
             </h3>
             <button
               type="button"
               onClick={() => void loadCouponState()}
               disabled={loading}
-              className="text-xs font-medium text-stone-500 transition-colors hover:text-stone-700 disabled:opacity-50">
+              className="text-xs font-medium text-stone-500 dark:text-neutral-400 transition-colors hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 dark:text-neutral-200 disabled:opacity-50">
               {t('common.refresh')}
             </button>
           </div>
 
           {loading && redeemedCoupons.length === 0 ? (
-            <p className="text-sm text-stone-500">{t('rewards.coupon.loadingHistory')}</p>
+            <p className="text-sm text-stone-500 dark:text-neutral-400">
+              {t('rewards.coupon.loadingHistory')}
+            </p>
           ) : null}
 
           {redeemedCoupons.length === 0 && !loading && !loadError ? (
-            <p className="text-sm text-stone-500 rounded-xl border border-dashed border-stone-200 px-4 py-6 text-center">
+            <p className="text-sm text-stone-500 dark:text-neutral-400 rounded-xl border border-dashed border-stone-200 dark:border-neutral-800 px-4 py-6 text-center">
               {t('rewards.coupon.noCodes')}
             </p>
           ) : redeemedCoupons.length > 0 ? (
-            <div className="overflow-x-auto rounded-xl border border-stone-200">
+            <div className="overflow-x-auto rounded-xl border border-stone-200 dark:border-neutral-800">
               <table className="min-w-full text-sm text-left">
-                <thead className="bg-stone-50 text-xs uppercase tracking-wide text-stone-500">
+                <thead className="bg-stone-50 dark:bg-neutral-800/60 text-xs uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                   <tr>
                     <th className="px-3 py-2 font-medium">{t('rewards.coupon.colCode')}</th>
                     <th className="px-3 py-2 font-medium">{t('rewards.coupon.colReward')}</th>
@@ -248,13 +255,17 @@ const RewardsCouponSection = () => {
                     <th className="px-3 py-2 font-medium">{t('rewards.coupon.colRedeemed')}</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-stone-100">
+                <tbody className="divide-y divide-stone-100 dark:divide-neutral-800">
                   {redeemedCoupons.map(coupon => (
                     <tr
                       key={`${coupon.code}-${coupon.redeemedAt ?? coupon.activationType}`}
-                      className="bg-white">
-                      <td className="px-3 py-2 font-mono text-stone-800">{coupon.code}</td>
-                      <td className="px-3 py-2 text-stone-700">{formatUsd(coupon.amountUsd)}</td>
+                      className="bg-white dark:bg-neutral-900">
+                      <td className="px-3 py-2 font-mono text-stone-800 dark:text-neutral-100">
+                        {coupon.code}
+                      </td>
+                      <td className="px-3 py-2 text-stone-700 dark:text-neutral-200">
+                        {formatUsd(coupon.amountUsd)}
+                      </td>
                       <td className="px-3 py-2">
                         <span
                           className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${redemptionStatusClass(coupon)}`}>
@@ -265,7 +276,7 @@ const RewardsCouponSection = () => {
                               : t('rewards.coupon.statusRedeemed')}
                         </span>
                       </td>
-                      <td className="px-3 py-2 text-xs text-stone-500">
+                      <td className="px-3 py-2 text-xs text-stone-500 dark:text-neutral-400">
                         {formatDateTime(coupon.redeemedAt, t('rewards.coupon.pending'))}
                       </td>
                     </tr>
diff --git a/app/src/components/settings/SettingsHome.tsx b/app/src/components/settings/SettingsHome.tsx
index 427946391..7f3c048ef 100644
--- a/app/src/components/settings/SettingsHome.tsx
+++ b/app/src/components/settings/SettingsHome.tsx
@@ -126,6 +126,22 @@ const SettingsHome = () => {
           ),
           rightElement: <LanguageSelect ariaLabel={t('settings.language')} />,
         },
+        {
+          id: 'appearance',
+          title: 'Appearance',
+          description: 'Pick light, dark, or match your system theme',
+          icon: (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
+              />
+            </svg>
+          ),
+          onClick: () => navigateToSettings('appearance'),
+        },
         {
           id: 'mascot',
           title: 'Mascot',
@@ -261,9 +277,9 @@ const SettingsHome = () => {
       {/* Log Out & Clear Data Confirmation Modal */}
       {showLogoutAndClearModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/30">
-          <div className="bg-white rounded-2xl max-w-md w-full p-6 border border-stone-200">
+          <div className="bg-white dark:bg-neutral-900 rounded-2xl max-w-md w-full p-6 border border-stone-200 dark:border-neutral-800">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
+              <div className="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center">
                 <svg
                   className="w-5 h-5 text-amber-400"
                   fill="none"
@@ -278,12 +294,14 @@ const SettingsHome = () => {
                 </svg>
               </div>
               <div>
-                <h3 className="text-lg font-semibold text-stone-900">{t('clearData.title')}</h3>
+                <h3 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+                  {t('clearData.title')}
+                </h3>
               </div>
             </div>
 
             <div className="mb-6">
-              <div className="text-stone-700 text-sm leading-relaxed">
+              <div className="text-stone-700 dark:text-neutral-200 text-sm leading-relaxed">
                 <p>{t('clearData.warning')}</p>
                 <ul className="list-disc pl-5 mt-2 space-y-1">
                   <li>{t('clearData.bulletSettings')}</li>
@@ -295,8 +313,8 @@ const SettingsHome = () => {
               </div>
 
               {error && (
-                <div className="mt-3 p-3 rounded-lg bg-coral-100 border border-coral-500/20">
-                  <p className="text-coral-600 text-sm">{error}</p>
+                <div className="mt-3 p-3 rounded-lg bg-coral-100 dark:bg-coral-500/20 border border-coral-500/20">
+                  <p className="text-coral-600 dark:text-coral-300 text-sm">{error}</p>
                 </div>
               )}
             </div>
@@ -308,7 +326,7 @@ const SettingsHome = () => {
                   setError(null);
                 }}
                 disabled={isLoading}
-                className="flex-1 px-4 py-2 rounded-lg border border-stone-200 text-stone-700 hover:bg-stone-100 transition-colors disabled:opacity-50">
+                className="flex-1 px-4 py-2 rounded-lg border border-stone-200 dark:border-neutral-800 text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 transition-colors disabled:opacity-50">
                 {t('common.cancel')}
               </button>
               <button
diff --git a/app/src/components/settings/SettingsSectionPage.tsx b/app/src/components/settings/SettingsSectionPage.tsx
index e90263f46..049dc9277 100644
--- a/app/src/components/settings/SettingsSectionPage.tsx
+++ b/app/src/components/settings/SettingsSectionPage.tsx
@@ -31,7 +31,11 @@ const SettingsSectionPage = ({ title, description, items }: SettingsSectionPageP
       />
 
       <div>
-        {description && <p className="mt-1 text-xs text-stone-500 px-5 pb-3">{description}</p>}
+        {description && (
+          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 px-5 pb-3">
+            {description}
+          </p>
+        )}
 
         <div>
           {items.map((item, index) => (
diff --git a/app/src/components/settings/components/PageBackButton.tsx b/app/src/components/settings/components/PageBackButton.tsx
index 0e6b3849d..aa5e59955 100644
--- a/app/src/components/settings/components/PageBackButton.tsx
+++ b/app/src/components/settings/components/PageBackButton.tsx
@@ -12,7 +12,7 @@ const PageBackButton = ({ label, onClick, trailingContent }: PageBackButtonProps
       <button
         type="button"
         onClick={onClick}
-        className="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-700 shadow-sm transition-colors hover:bg-stone-50">
+        className="inline-flex items-center gap-2 rounded-full border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-2 text-sm font-semibold text-stone-700 dark:text-neutral-200 shadow-sm transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800">
         <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
         </svg>
diff --git a/app/src/components/settings/components/SettingsHeader.tsx b/app/src/components/settings/components/SettingsHeader.tsx
index 65aecb10f..6b3170427 100644
--- a/app/src/components/settings/components/SettingsHeader.tsx
+++ b/app/src/components/settings/components/SettingsHeader.tsx
@@ -29,10 +29,10 @@ const SettingsHeader = ({
         {showBackButton && onBack && (
           <button
             onClick={onBack}
-            className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-stone-100 transition-colors mr-2"
+            className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 transition-colors mr-2"
             aria-label={t('common.back')}>
             <svg
-              className="w-4 h-4 text-stone-500"
+              className="w-4 h-4 text-stone-500 dark:text-neutral-400"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -55,15 +55,17 @@ const SettingsHeader = ({
                   {crumb.onClick ? (
                     <button
                       onClick={crumb.onClick}
-                      className="text-xs text-stone-400 hover:text-stone-600 transition-colors">
+                      className="text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 dark:hover:text-neutral-300 transition-colors">
                       {crumb.label}
                     </button>
                   ) : (
-                    <span className="text-xs text-stone-400">{crumb.label}</span>
+                    <span className="text-xs text-stone-400 dark:text-neutral-500">
+                      {crumb.label}
+                    </span>
                   )}
                   <svg
                     aria-hidden="true"
-                    className="w-3 h-3 text-stone-300"
+                    className="w-3 h-3 text-stone-300 dark:text-neutral-600"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
@@ -81,7 +83,9 @@ const SettingsHeader = ({
         )}
 
         {/* Title */}
-        <h2 className="text-sm font-semibold text-stone-900">{title ?? t('nav.settings')}</h2>
+        <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          {title ?? t('nav.settings')}
+        </h2>
       </div>
     </div>
   );
diff --git a/app/src/components/settings/components/SettingsMenuItem.tsx b/app/src/components/settings/components/SettingsMenuItem.tsx
index 660303391..b394901fa 100644
--- a/app/src/components/settings/components/SettingsMenuItem.tsx
+++ b/app/src/components/settings/components/SettingsMenuItem.tsx
@@ -22,9 +22,13 @@ const SettingsMenuItem = ({
   rightElement,
 }: SettingsMenuItemProps) => {
   // Color variations for dangerous items (like logout/delete)
-  const titleColor = dangerous ? 'text-amber-600' : 'text-stone-900';
-  const iconColor = dangerous ? 'text-amber-600' : 'text-stone-900';
-  const borderColor = 'border-stone-200'; // Use consistent border color for all items
+  const titleColor = dangerous
+    ? 'text-amber-600 dark:text-amber-300'
+    : 'text-stone-900 dark:text-neutral-100';
+  const iconColor = dangerous
+    ? 'text-amber-600 dark:text-amber-300'
+    : 'text-stone-900 dark:text-neutral-100';
+  const borderColor = 'border-stone-200 dark:border-neutral-800';
 
   // Border classes for first/last items
   const borderClasses = isLast ? '' : `border-b ${borderColor}`;
@@ -46,7 +50,7 @@ const SettingsMenuItem = ({
       <button
         type="button"
         onClick={onClick}
-        className={`w-full flex items-center justify-between py-3 px-4 bg-white ${borderClasses} hover:bg-stone-50 transition-all duration-200 text-left ${roundedClasses} focus:outline-none focus:ring-0 focus:border-inherit`}>
+        className={`w-full flex items-center justify-between py-3 px-4 bg-white dark:bg-neutral-900 text-stone-900 dark:text-neutral-100 ${borderClasses} hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 transition-all duration-200 text-left ${roundedClasses} focus:outline-none focus:ring-0 focus:border-inherit`}>
         {content}
       </button>
     );
@@ -54,7 +58,7 @@ const SettingsMenuItem = ({
 
   return (
     <div
-      className={`w-full flex items-center justify-between py-3 px-4 bg-white ${borderClasses} ${roundedClasses}`}>
+      className={`w-full flex items-center justify-between py-3 px-4 bg-white dark:bg-neutral-900 text-stone-900 dark:text-neutral-100 ${borderClasses} ${roundedClasses}`}>
       {content}
     </div>
   );
diff --git a/app/src/components/settings/hooks/useSettingsNavigation.ts b/app/src/components/settings/hooks/useSettingsNavigation.ts
index e2b825119..93cbacb58 100644
--- a/app/src/components/settings/hooks/useSettingsNavigation.ts
+++ b/app/src/components/settings/hooks/useSettingsNavigation.ts
@@ -32,6 +32,7 @@ export type SettingsRoute =
   | 'notifications'
   | 'notification-routing'
   | 'mascot'
+  | 'appearance'
   | 'intelligence'
   | 'webhooks-triggers'
   | 'composio-triggers'
@@ -111,6 +112,7 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
     if (path.includes('/settings/notification-routing')) return 'notification-routing';
     if (path.includes('/settings/notifications')) return 'notifications';
     if (path.includes('/settings/mascot')) return 'mascot';
+    if (path.includes('/settings/appearance')) return 'appearance';
     return 'home';
   };
 
@@ -231,6 +233,10 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
       case 'mascot':
         return [settingsCrumb];
 
+      // Appearance (theme) panel sits at the top level of Settings.
+      case 'appearance':
+        return [settingsCrumb];
+
       case 'home':
       default:
         return [];
diff --git a/app/src/components/settings/panels/AIPanel.tsx b/app/src/components/settings/panels/AIPanel.tsx
index 785bbf55b..0ab696d18 100644
--- a/app/src/components/settings/panels/AIPanel.tsx
+++ b/app/src/components/settings/panels/AIPanel.tsx
@@ -87,11 +87,26 @@ type RoutingMap = Record<WorkloadId, ProviderRef>;
 // Slug-keyed display metadata for built-in provider slugs. Used only for
 // chip rendering (label, tone). Custom providers use `provider.label` directly.
 const BUILTIN_PROVIDER_META: Record<string, { tone: string; label: string }> = {
-  openhuman: { label: 'OpenHuman', tone: 'bg-primary-50 ring-primary-200 text-primary-900' },
-  openai: { label: 'OpenAI', tone: 'bg-emerald-50 ring-emerald-200 text-emerald-900' },
-  anthropic: { label: 'Anthropic', tone: 'bg-orange-50 ring-orange-200 text-orange-900' },
-  openrouter: { label: 'OpenRouter', tone: 'bg-slate-100 ring-slate-300 text-slate-900' },
-  custom: { label: 'Custom', tone: 'bg-stone-100 ring-stone-300 text-stone-900' },
+  openhuman: {
+    label: 'OpenHuman',
+    tone: 'bg-primary-50 dark:bg-primary-500/10 ring-primary-200 text-primary-900 dark:text-primary-100',
+  },
+  openai: {
+    label: 'OpenAI',
+    tone: 'bg-emerald-50 dark:bg-emerald-500/10 ring-emerald-200 text-emerald-900 dark:text-emerald-100',
+  },
+  anthropic: {
+    label: 'Anthropic',
+    tone: 'bg-orange-50 dark:bg-orange-500/10 ring-orange-200 text-orange-900 dark:text-orange-100',
+  },
+  openrouter: {
+    label: 'OpenRouter',
+    tone: 'bg-slate-100 dark:bg-slate-500/15 ring-slate-300 text-slate-900 dark:text-slate-100',
+  },
+  custom: {
+    label: 'Custom',
+    tone: 'bg-stone-100 dark:bg-neutral-800 ring-stone-300 text-stone-900 dark:text-neutral-100',
+  },
 };
 
 const WORKLOADS: Workload[] = [
@@ -361,14 +376,17 @@ type LocalChipSlug = 'lmstudio' | 'ollama';
 
 // Tints per local-runtime chip slug.
 const LOCAL_CHIP_TONE: Record<LocalChipSlug, string> = {
-  lmstudio: 'bg-cyan-50 ring-cyan-200 text-cyan-900',
-  ollama: 'bg-violet-50 ring-violet-200 text-violet-900',
+  lmstudio: 'bg-cyan-50 dark:bg-cyan-500/10 ring-cyan-200 text-cyan-900 dark:text-cyan-100',
+  ollama: 'bg-violet-50 dark:bg-violet-500/10 ring-violet-200 text-violet-900 dark:text-violet-100',
 };
 
 const LOCAL_CHIP_LABEL: Record<LocalChipSlug, string> = { lmstudio: 'LM Studio', ollama: 'Ollama' };
 
 function slugTone(slug: string): string {
-  return BUILTIN_PROVIDER_META[slug]?.tone ?? 'bg-stone-100 ring-stone-300 text-stone-900';
+  return (
+    BUILTIN_PROVIDER_META[slug]?.tone ??
+    'bg-stone-100 dark:bg-neutral-800 ring-stone-300 text-stone-900 dark:text-neutral-100'
+  );
 }
 
 const ProviderToggleChip = ({
@@ -387,7 +405,7 @@ const ProviderToggleChip = ({
   const tone = slugTone(slug);
   return (
     <div
-      className={`inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-medium ring-1 transition-colors ${tone}`}>
+      className={`inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-medium ring-1 transition-colors dark:ring-neutral-700 ${tone}`}>
       <span>{label}</span>
       <button
         type="button"
@@ -396,10 +414,10 @@ const ProviderToggleChip = ({
         aria-label={`${enabled ? 'Disconnect' : 'Connect'} ${label}`}
         disabled={busy}
         onClick={onToggle}
-        className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-stone-300'}`}>
+        className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-stone-300 dark:bg-neutral-700'}`}>
         <span
           aria-hidden
-          className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
+          className={`inline-block h-3 w-3 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
         />
       </button>
     </div>
@@ -458,14 +476,18 @@ const ProviderKeyDialog = ({
       aria-modal="true"
       aria-label={`Connect ${label}`}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
-      <div className="w-full max-w-md rounded-2xl border border-stone-200 bg-white p-6 shadow-soft">
+      <div className="w-full max-w-md rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft">
         <div className="mb-4">
-          <h3 className="text-base font-semibold text-stone-900">{`${t('settings.ai.connectProvider')} ${label}`}</h3>
-          <p className="mt-0.5 text-xs text-stone-500">{t('settings.ai.apiKeyStoredEncrypted')}</p>
+          <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{`${t('settings.ai.connectProvider')} ${label}`}</h3>
+          <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
+            {t('settings.ai.apiKeyStoredEncrypted')}
+          </p>
         </div>
 
         <div className="flex flex-col gap-1.5">
-          <label htmlFor="provider-key-input" className="text-xs font-medium text-stone-700">
+          <label
+            htmlFor="provider-key-input"
+            className="text-xs font-medium text-stone-700 dark:text-neutral-200">
             {t('settings.ai.apiKeyFieldLabel')}
           </label>
           <input
@@ -485,9 +507,11 @@ const ProviderKeyDialog = ({
               setApiKey(e.target.value);
               setError(null);
             }}
-            className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 placeholder-stone-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:opacity-60"
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:opacity-60"
           />
-          {error ? <p className="text-xs font-medium text-red-600">{error}</p> : null}
+          {error ? (
+            <p className="text-xs font-medium text-red-600 dark:text-red-300">{error}</p>
+          ) : null}
         </div>
 
         <div className="mt-6 flex justify-end gap-2">
@@ -495,7 +519,7 @@ const ProviderKeyDialog = ({
             type="button"
             onClick={onCancel}
             disabled={busy}
-            className="rounded-lg border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50">
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-2 text-sm font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 disabled:opacity-50">
             {t('common.cancel')}
           </button>
           <button
@@ -635,10 +659,10 @@ const LoopToggle = ({
   busy: boolean;
   onToggle: () => void;
 }) => (
-  <div className="flex items-center justify-between gap-3 rounded-lg border border-stone-200 bg-white px-3 py-2">
+  <div className="flex items-center justify-between gap-3 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
     <div className="min-w-0">
-      <div className="text-sm font-medium text-stone-900">{label}</div>
-      <div className="text-xs text-stone-500">{description}</div>
+      <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">{label}</div>
+      <div className="text-xs text-stone-500 dark:text-neutral-400">{description}</div>
     </div>
     <button
       type="button"
@@ -647,10 +671,10 @@ const LoopToggle = ({
       aria-checked={checked}
       disabled={busy}
       onClick={onToggle}
-      className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-60 ${checked ? 'bg-primary-500' : 'bg-stone-300'}`}>
+      className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-60 ${checked ? 'bg-primary-500' : 'bg-stone-300 dark:bg-neutral-700'}`}>
       <span
         aria-hidden
-        className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${checked ? 'translate-x-4' : 'translate-x-0.5'}`}
+        className={`inline-block h-4 w-4 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${checked ? 'translate-x-4' : 'translate-x-0.5'}`}
       />
     </button>
   </div>
@@ -665,20 +689,24 @@ const MetricTile = ({
   value: string;
   detail?: string;
 }) => (
-  <div className="rounded-md bg-stone-50 px-3 py-2">
-    <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">{label}</div>
-    <div className="mt-1 text-sm font-semibold text-stone-900">{value}</div>
-    {detail ? <div className="mt-0.5 text-[11px] text-stone-500">{detail}</div> : null}
+  <div className="rounded-md bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+    <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+      {label}
+    </div>
+    <div className="mt-1 text-sm font-semibold text-stone-900 dark:text-neutral-100">{value}</div>
+    {detail ? (
+      <div className="mt-0.5 text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
+    ) : null}
   </div>
 );
 
 const FormulaRow = ({ label, value, detail }: { label: string; value: string; detail: string }) => (
-  <div className="rounded-md border border-stone-200 bg-white px-3 py-2">
+  <div className="rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
     <div className="flex items-center justify-between gap-3">
-      <span className="text-xs font-medium text-stone-800">{label}</span>
-      <span className="font-mono text-xs text-stone-600">{value}</span>
+      <span className="text-xs font-medium text-stone-800 dark:text-neutral-100">{label}</span>
+      <span className="font-mono text-xs text-stone-600 dark:text-neutral-300">{value}</span>
     </div>
-    <div className="mt-1 text-[11px] text-stone-500">{detail}</div>
+    <div className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
   </div>
 );
 
@@ -898,27 +926,31 @@ const BackgroundLoopControls = ({
 
   return (
     <div className="space-y-4">
-      <div className="border-b border-stone-200 pb-2">
-        <h2 className="text-base font-semibold text-stone-900">Background loops</h2>
-        <p className="mt-0.5 text-xs text-stone-500">
+      <div className="border-b border-stone-200 dark:border-neutral-800 pb-2">
+        <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+          Background loops
+        </h2>
+        <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
           See what runs without a chat message, pause heartbeat work, and inspect recent credit
           ledger rows.
         </p>
       </div>
 
       {error && (
-        <div className="rounded-md border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+        <div className="rounded-md border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
           {error}
         </div>
       )}
 
       <section className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(300px,0.8fr)]">
         <div className="space-y-3">
-          <div className="rounded-lg border border-stone-200 bg-stone-50 p-3">
+          <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
             <div className="mb-3 flex items-center justify-between gap-3">
               <div>
-                <div className="text-sm font-semibold text-stone-900">Heartbeat controls</div>
-                <div className="text-xs text-stone-500">
+                <div className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                  Heartbeat controls
+                </div>
+                <div className="text-xs text-stone-500 dark:text-neutral-400">
                   Defaults off. Enabling starts the loop; disabling aborts the running task.
                 </div>
               </div>
@@ -926,7 +958,7 @@ const BackgroundLoopControls = ({
                 type="button"
                 onClick={() => void refresh()}
                 disabled={loading}
-                className="rounded-md border border-stone-200 bg-white px-2 py-1 text-xs font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50">
+                className="rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 disabled:opacity-50">
                 Refresh
               </button>
             </div>
@@ -958,8 +990,8 @@ const BackgroundLoopControls = ({
                     void applyHeartbeatPatch({ notify_meetings: !settings.notify_meetings })
                   }
                 />
-                <div className="grid gap-2 rounded-lg border border-stone-200 bg-white px-3 py-2 md:grid-cols-3">
-                  <label className="space-y-1 text-xs font-medium text-stone-700">
+                <div className="grid gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 md:grid-cols-3">
+                  <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
                     <span>Calendar cap</span>
                     <select
                       value={maxCalendarConnectionsPerTick}
@@ -969,7 +1001,7 @@ const BackgroundLoopControls = ({
                           max_calendar_connections_per_tick: Number(e.target.value),
                         })
                       }
-                      className="w-full rounded-md border border-stone-200 bg-white px-2 py-1 text-xs text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                      className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                       {[1, 2, 3, 5, 10].map(count => (
                         <option key={count} value={count}>
                           {count} conn/tick
@@ -977,7 +1009,7 @@ const BackgroundLoopControls = ({
                       ))}
                     </select>
                   </label>
-                  <label className="space-y-1 text-xs font-medium text-stone-700">
+                  <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
                     <span>Meeting lookahead</span>
                     <select
                       value={settings.meeting_lookahead_minutes}
@@ -987,7 +1019,7 @@ const BackgroundLoopControls = ({
                           meeting_lookahead_minutes: Number(e.target.value),
                         })
                       }
-                      className="w-full rounded-md border border-stone-200 bg-white px-2 py-1 text-xs text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                      className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                       {[15, 30, 60, 120, 240].map(minutes => (
                         <option key={minutes} value={minutes}>
                           {minutes} min
@@ -995,7 +1027,7 @@ const BackgroundLoopControls = ({
                       ))}
                     </select>
                   </label>
-                  <label className="space-y-1 text-xs font-medium text-stone-700">
+                  <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
                     <span>Reminder lookahead</span>
                     <select
                       value={settings.reminder_lookahead_minutes}
@@ -1005,7 +1037,7 @@ const BackgroundLoopControls = ({
                           reminder_lookahead_minutes: Number(e.target.value),
                         })
                       }
-                      className="w-full rounded-md border border-stone-200 bg-white px-2 py-1 text-xs text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                      className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                       {[5, 15, 30, 60, 120].map(minutes => (
                         <option key={minutes} value={minutes}>
                           {minutes} min
@@ -1046,9 +1078,9 @@ const BackgroundLoopControls = ({
                   }
                 />
 
-                <div className="flex flex-wrap items-center gap-2 rounded-lg border border-stone-200 bg-white px-3 py-2">
+                <div className="flex flex-wrap items-center gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
                   <label
-                    className="text-xs font-medium text-stone-700"
+                    className="text-xs font-medium text-stone-700 dark:text-neutral-200"
                     htmlFor="heartbeat-interval">
                     Interval
                   </label>
@@ -1059,7 +1091,7 @@ const BackgroundLoopControls = ({
                     onChange={e =>
                       void applyHeartbeatPatch({ interval_minutes: Number(e.target.value) })
                     }
-                    className="rounded-md border border-stone-200 bg-white px-2 py-1 text-xs text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                    className="rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                     {[5, 10, 15, 30, 60].map(minutes => (
                       <option key={minutes} value={minutes}>
                         {minutes} min
@@ -1070,13 +1102,13 @@ const BackgroundLoopControls = ({
                     type="button"
                     onClick={() => void runPlannerNow()}
                     disabled={runningTick}
-                    className="ml-auto rounded-md border border-stone-200 bg-white px-2 py-1 text-xs font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50">
+                    className="ml-auto rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 disabled:opacity-50">
                     {runningTick ? 'Running...' : 'Planner tick now'}
                   </button>
                 </div>
 
                 {plannerSummary && (
-                  <div className="rounded-md border border-primary-100 bg-primary-50 px-3 py-2 text-xs text-primary-900">
+                  <div className="rounded-md border border-primary-100 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-xs text-primary-900">
                     Planner: {plannerSummary.source_events} source events,{' '}
                     {plannerSummary.deliveries_sent} sent, {plannerSummary.deliveries_skipped_dedup}{' '}
                     deduped.
@@ -1084,32 +1116,34 @@ const BackgroundLoopControls = ({
                 )}
               </div>
             ) : (
-              <div className="text-xs text-stone-500">
+              <div className="text-xs text-stone-500 dark:text-neutral-400">
                 {loading ? 'Loading heartbeat controls...' : 'Heartbeat controls unavailable.'}
               </div>
             )}
           </div>
 
-          <div className="overflow-hidden rounded-lg border border-stone-200 bg-stone-50">
-            <div className="border-b border-stone-200 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-stone-400">
+          <div className="overflow-hidden rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60">
+            <div className="border-b border-stone-200 dark:border-neutral-800 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
               Loop map
             </div>
-            <div className="divide-y divide-stone-200">
+            <div className="divide-y divide-stone-200 dark:divide-neutral-800">
               {loops.map(loop => (
                 <div key={loop.name} className="grid gap-2 px-3 py-3 md:grid-cols-[150px_1fr]">
                   <div>
-                    <div className="text-sm font-medium text-stone-900">{loop.name}</div>
-                    <div className="mt-0.5 flex flex-wrap gap-1 text-[11px] text-stone-500">
+                    <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                      {loop.name}
+                    </div>
+                    <div className="mt-0.5 flex flex-wrap gap-1 text-[11px] text-stone-500 dark:text-neutral-400">
                       <span>{loop.enabled ? 'on' : 'off'}</span>
                       <span>{loop.cadence}</span>
                     </div>
                   </div>
-                  <div className="text-xs text-stone-600">
+                  <div className="text-xs text-stone-600 dark:text-neutral-300">
                     <div>{loop.work}</div>
-                    <div className="mt-1 font-mono text-[11px] text-stone-500">
+                    <div className="mt-1 font-mono text-[11px] text-stone-500 dark:text-neutral-400">
                       route: {loop.route}
                     </div>
-                    <div className="mt-1 text-stone-500">{loop.risk}</div>
+                    <div className="mt-1 text-stone-500 dark:text-neutral-400">{loop.risk}</div>
                   </div>
                 </div>
               ))}
@@ -1117,11 +1151,13 @@ const BackgroundLoopControls = ({
           </div>
         </div>
 
-        <div className="rounded-lg border border-stone-200 bg-white p-3">
+        <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
           <div className="flex items-center justify-between gap-3">
             <div>
-              <div className="text-sm font-semibold text-stone-900">Recent usage ledger</div>
-              <div className="text-xs text-stone-500">
+              <div className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                Recent usage ledger
+              </div>
+              <div className="text-xs text-stone-500 dark:text-neutral-400">
                 Backend rows expose action/time today; source tags need backend support.
               </div>
             </div>
@@ -1129,7 +1165,7 @@ const BackgroundLoopControls = ({
               type="button"
               onClick={() => void refresh()}
               disabled={loading}
-              className="rounded-md border border-stone-200 px-2 py-1 text-xs font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50">
+              className="rounded-md border border-stone-200 dark:border-neutral-800 px-2 py-1 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 disabled:opacity-50">
               Reload
             </button>
           </div>
@@ -1171,8 +1207,8 @@ const BackgroundLoopControls = ({
             />
           </div>
 
-          <div className="mt-3 rounded-lg border border-stone-200 bg-stone-50 p-3">
-            <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">
+          <div className="mt-3 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
+            <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
               Budget math
             </div>
             <div className="mt-2 grid gap-2">
@@ -1232,8 +1268,8 @@ const BackgroundLoopControls = ({
             </div>
           </div>
 
-          <div className="mt-3 rounded-lg border border-stone-200 bg-stone-50 p-3">
-            <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">
+          <div className="mt-3 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
+            <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
               Loop call budget
             </div>
             <div className="mt-2 grid gap-2">
@@ -1284,7 +1320,7 @@ const BackgroundLoopControls = ({
           </div>
 
           {latestSpend && (
-            <div className="mt-3 rounded-md border border-stone-200 bg-stone-50 px-3 py-2 text-xs text-stone-600">
+            <div className="mt-3 rounded-md border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-xs text-stone-600 dark:text-neutral-300">
               Latest spend: {formatUsd(spendAmount(latestSpend))} at{' '}
               {new Date(latestSpend.createdAt).toLocaleString()} ({latestSpend.action})
             </div>
@@ -1292,7 +1328,7 @@ const BackgroundLoopControls = ({
 
           <div className="mt-3 space-y-3">
             <div>
-              <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">
+              <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                 Top actions
               </div>
               <div className="mt-1 space-y-1">
@@ -1300,21 +1336,23 @@ const BackgroundLoopControls = ({
                   actionSummary.map(([action, count, total]) => (
                     <div
                       key={action}
-                      className="flex items-center justify-between gap-2 text-xs text-stone-600">
+                      className="flex items-center justify-between gap-2 text-xs text-stone-600 dark:text-neutral-300">
                       <span className="truncate font-mono">{action}</span>
-                      <span className="shrink-0 text-stone-500">
+                      <span className="shrink-0 text-stone-500 dark:text-neutral-400">
                         {count} / {formatUsd(total)}
                       </span>
                     </div>
                   ))
                 ) : (
-                  <div className="text-xs text-stone-500">No spend rows loaded.</div>
+                  <div className="text-xs text-stone-500 dark:text-neutral-400">
+                    No spend rows loaded.
+                  </div>
                 )}
               </div>
             </div>
 
             <div>
-              <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">
+              <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                 Top hours
               </div>
               <div className="mt-1 space-y-1">
@@ -1322,13 +1360,17 @@ const BackgroundLoopControls = ({
                   hourSummary.map(([hour, total]) => (
                     <div
                       key={hour}
-                      className="flex items-center justify-between gap-2 text-xs text-stone-600">
+                      className="flex items-center justify-between gap-2 text-xs text-stone-600 dark:text-neutral-300">
                       <span>{hour}</span>
-                      <span className="font-mono text-stone-500">{formatUsd(total)}</span>
+                      <span className="font-mono text-stone-500 dark:text-neutral-400">
+                        {formatUsd(total)}
+                      </span>
                     </div>
                   ))
                 ) : (
-                  <div className="text-xs text-stone-500">No hourly spend yet.</div>
+                  <div className="text-xs text-stone-500 dark:text-neutral-400">
+                    No hourly spend yet.
+                  </div>
                 )}
               </div>
             </div>
@@ -1389,17 +1431,25 @@ const WorkloadRow = ({
 
   const segmentBase =
     'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors cursor-pointer';
-  const activeSegment = 'bg-white text-stone-900 shadow-subtle ring-1 ring-stone-200';
-  const inactiveSegment = 'text-stone-500 hover:text-stone-800';
+  const activeSegment =
+    'bg-white dark:bg-neutral-900 text-stone-900 dark:text-neutral-100 shadow-subtle ring-1 ring-stone-200 dark:ring-neutral-600';
+  const inactiveSegment =
+    'text-stone-500 dark:text-neutral-400 hover:text-stone-800 dark:text-neutral-100 dark:hover:text-neutral-200';
 
   return (
     <div className="flex items-center justify-between gap-3 py-3">
       <div className="min-w-0 flex-1">
-        <div className="text-sm font-medium text-stone-900">{workload.label}</div>
-        <div className="truncate text-xs text-stone-500">{workload.description}</div>
-        <div className="mt-0.5 font-mono text-[11px] text-stone-400 truncate">↳ {resolved}</div>
+        <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+          {workload.label}
+        </div>
+        <div className="truncate text-xs text-stone-500 dark:text-neutral-400">
+          {workload.description}
+        </div>
+        <div className="mt-0.5 font-mono text-[11px] text-stone-400 dark:text-neutral-500 truncate">
+          ↳ {resolved}
+        </div>
       </div>
-      <div className="inline-flex shrink-0 items-center rounded-lg bg-stone-100 p-0.5">
+      <div className="inline-flex shrink-0 items-center rounded-lg bg-stone-100 dark:bg-neutral-800 p-0.5">
         <button
           type="button"
           onClick={() => onChange({ kind: 'openhuman' })}
@@ -1492,18 +1542,18 @@ const CustomRoutingDialog = ({
       aria-modal="true"
       aria-label={`Custom routing for ${workload.label}`}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
-      <div className="w-full max-w-md rounded-2xl border border-stone-200 bg-white p-6 shadow-soft">
+      <div className="w-full max-w-md rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft">
         <div className="flex items-start justify-between gap-3 mb-4">
           <div>
-            <h3 className="text-base font-semibold text-stone-900">
+            <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
               {t('settings.ai.customRouting')}
             </h3>
-            <p className="mt-0.5 text-xs text-stone-500">{workload.label}</p>
+            <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">{workload.label}</p>
           </div>
           <button
             type="button"
             onClick={onClose}
-            className="rounded-md p-1 text-stone-400 hover:bg-stone-100 hover:text-stone-700">
+            className="rounded-md p-1 text-stone-400 dark:text-neutral-500 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200">
             <span className="sr-only">{t('common.close')}</span>
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -1517,13 +1567,13 @@ const CustomRoutingDialog = ({
         </div>
 
         {noProviders ? (
-          <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800">
+          <div className="rounded-lg border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-3 text-xs text-amber-800 dark:text-amber-200">
             {t('settings.ai.noCustomProviders')}
           </div>
         ) : (
           <div className="flex flex-col gap-4">
             <div className="flex flex-col gap-1.5">
-              <label className="text-xs font-medium text-stone-700">
+              <label className="text-xs font-medium text-stone-700 dark:text-neutral-200">
                 {t('settings.ai.providerLabel')}
               </label>
               <select
@@ -1544,7 +1594,7 @@ const CustomRoutingDialog = ({
                     setModel('');
                   }
                 }}
-                className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                 {customCloud.map(p => (
                   <option key={p.slug} value={`cloud:${p.slug}`}>
                     {p.label}
@@ -1555,14 +1605,14 @@ const CustomRoutingDialog = ({
             </div>
 
             <div className="flex flex-col gap-1.5">
-              <label className="text-xs font-medium text-stone-700">
+              <label className="text-xs font-medium text-stone-700 dark:text-neutral-200">
                 {t('settings.ai.modelLabel')}
               </label>
               {source?.kind === 'local' ? (
                 <select
                   value={model}
                   onChange={e => setModel(e.target.value)}
-                  className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                  className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                   {localModels.map(m => (
                     <option key={m.id} value={m.id}>
                       {m.id}
@@ -1575,7 +1625,7 @@ const CustomRoutingDialog = ({
                   value={model}
                   onChange={e => setModel(e.target.value)}
                   placeholder={selectedCloud ? `${selectedCloud.slug} model id` : 'model-id'}
-                  className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm font-mono text-stone-900 placeholder-stone-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                  className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm font-mono text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                 />
               )}
             </div>
@@ -1586,7 +1636,7 @@ const CustomRoutingDialog = ({
           <button
             type="button"
             onClick={onClose}
-            className="rounded-lg border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-50">
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-2 text-sm font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60">
             {t('common.cancel')}
           </button>
           <button
@@ -1620,24 +1670,24 @@ const SaveBar = ({
   const { t } = useT();
   return (
     <div className="pointer-events-none sticky bottom-3 z-20 flex justify-center px-4">
-      <div className="pointer-events-auto flex w-full items-center gap-2 rounded-lg border border-stone-200 bg-white/95 px-3 py-2 shadow-float backdrop-blur-md animate-fade-up">
-        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-amber-50 text-amber-600">
+      <div className="pointer-events-auto flex w-full items-center gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white/95 dark:bg-neutral-900/95 px-3 py-2 shadow-float backdrop-blur-md animate-fade-up">
+        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-300">
           <LuCircleAlert className="h-3.5 w-3.5" />
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-xs font-medium text-stone-900">
+          <div className="text-xs font-medium text-stone-900 dark:text-neutral-100">
             {changeCount === 1
               ? t('settings.ai.unsavedChange')
               : `${String(changeCount)} ${t('settings.ai.unsavedChanges')}`}
           </div>
-          <div className="truncate font-mono text-[10px] text-stone-500">
+          <div className="truncate font-mono text-[10px] text-stone-500 dark:text-neutral-400">
             {diffSummary.slice(0, 2).join(' · ')}
             {diffSummary.length > 2 ? ` · +${diffSummary.length - 2}` : ''}
           </div>
         </div>
         <button
           onClick={onDiscard}
-          className="rounded-md border border-stone-200 px-2 py-1 text-xs font-medium text-stone-700 hover:bg-stone-50">
+          className="rounded-md border border-stone-200 dark:border-neutral-800 px-2 py-1 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60">
           {t('settings.ai.discard')}
         </button>
         <button
@@ -1724,18 +1774,24 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
             setup). Everything the user needs to wire a model up.
             ═══════════════════════════════════════════════════════════════ */}
         <div className="space-y-4">
-          <div className="border-b border-stone-200 pb-2">
-            <h2 className="text-base font-semibold text-stone-900">
+          <div className="border-b border-stone-200 dark:border-neutral-800 pb-2">
+            <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
               {t('settings.ai.llmProviders')}
             </h2>
-            <p className="text-xs text-stone-500 mt-0.5">{t('settings.ai.llmProvidersDesc')}</p>
+            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+              {t('settings.ai.llmProvidersDesc')}
+            </p>
           </div>
 
           {/* ─── Provider chip-toggle list ────────────────────────────────── */}
           <section className="space-y-3">
-            {loading && <div className="text-xs text-stone-500">{t('common.loading')}</div>}
+            {loading && (
+              <div className="text-xs text-stone-500 dark:text-neutral-400">
+                {t('common.loading')}
+              </div>
+            )}
             {error && (
-              <div className="rounded-md border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+              <div className="rounded-md border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
                 {error}
               </div>
             )}
@@ -1821,10 +1877,10 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                           setPendingLocalLabel(label);
                         }
                       }}
-                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-stone-300'}`}>
+                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors disabled:cursor-wait disabled:opacity-60 ${enabled ? 'bg-primary-500' : 'bg-stone-300 dark:bg-neutral-700'}`}>
                       <span
                         aria-hidden
-                        className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
+                        className={`inline-block h-3 w-3 transform rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`}
                       />
                     </button>
                   </div>
@@ -1841,18 +1897,22 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
             a popup to choose provider + model).
             ═══════════════════════════════════════════════════════════════ */}
         <div className="space-y-4">
-          <div className="border-b border-stone-200 pb-2">
-            <h2 className="text-base font-semibold text-stone-900">{t('settings.ai.routing')}</h2>
-            <p className="text-xs text-stone-500 mt-0.5">{t('settings.ai.routingDesc')}</p>
+          <div className="border-b border-stone-200 dark:border-neutral-800 pb-2">
+            <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+              {t('settings.ai.routing')}
+            </h2>
+            <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+              {t('settings.ai.routingDesc')}
+            </p>
           </div>
 
           <section className="space-y-3">
-            <div className="overflow-hidden rounded-lg border border-stone-200 bg-stone-50 px-3">
+            <div className="overflow-hidden rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3">
               <div className="pt-3">
-                <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">
+                <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('settings.ai.workloadGroupChat')}
                 </div>
-                <div className="divide-y divide-stone-200">
+                <div className="divide-y divide-stone-200 dark:divide-neutral-800">
                   {chatRows.map(w => (
                     <WorkloadRow
                       key={w.id}
@@ -1868,10 +1928,10 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                 </div>
               </div>
               <div className="pb-3 pt-3">
-                <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400">
+                <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('settings.ai.workloadGroupBackground')}
                 </div>
-                <div className="divide-y divide-stone-200">
+                <div className="divide-y divide-stone-200 dark:divide-neutral-800">
                   {bgRows.map(w => (
                     <WorkloadRow
                       key={w.id}
@@ -1888,9 +1948,9 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
               </div>
             </div>
 
-            <div className="text-[11px] text-stone-500">
+            <div className="text-[11px] text-stone-500 dark:text-neutral-400">
               {t('settings.ai.defaultResolvesTo')}{' '}
-              <span className="font-mono text-stone-700">OpenHuman</span>.
+              <span className="font-mono text-stone-700 dark:text-neutral-200">OpenHuman</span>.
             </div>
           </section>
         </div>
@@ -2068,21 +2128,21 @@ const CloudProviderEditor = ({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-stone-900/30 p-4">
-      <div className="w-full max-w-md rounded-lg border border-stone-200 bg-white shadow-float">
-        <div className="border-b border-stone-200 px-4 py-3">
-          <div className="text-sm font-semibold text-stone-900">
+      <div className="w-full max-w-md rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-float">
+        <div className="border-b border-stone-200 dark:border-neutral-800 px-4 py-3">
+          <div className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {initial
               ? `${t('settings.ai.editProvider')} ${initial.label}`
               : t('settings.ai.addCloudProvider')}
           </div>
-          <div className="mt-0.5 text-xs text-stone-500">
+          <div className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
             {t('settings.ai.apiKeysEncrypted')}{' '}
             <span className="font-mono">auth-profiles.json</span>.
           </div>
         </div>
         <div className="space-y-3 px-4 py-3">
           <div>
-            <label className="text-[10px] font-semibold uppercase tracking-wide text-stone-500">
+            <label className="text-[10px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
               Provider slug
             </label>
             <select
@@ -2096,7 +2156,7 @@ const CloudProviderEditor = ({
                 }
               }}
               disabled={!!initial}
-              className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 disabled:opacity-60 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200">
+              className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 disabled:opacity-60 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200">
               {(['openai', 'anthropic', 'openrouter', 'custom'] as const)
                 .filter(s => s === slug || !existingSlugs.includes(s))
                 .map(s => (
@@ -2107,36 +2167,36 @@ const CloudProviderEditor = ({
             </select>
           </div>
           <div>
-            <label className="text-[10px] font-semibold uppercase tracking-wide text-stone-500">
+            <label className="text-[10px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
               Display label
             </label>
             <input
               value={label}
               onChange={e => setLabel(e.target.value)}
-              className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
+              className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
               placeholder="My Provider"
             />
           </div>
           <div>
-            <label className="text-[10px] font-semibold uppercase tracking-wide text-stone-500">
+            <label className="text-[10px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
               Endpoint
             </label>
             <input
               value={endpoint}
               onChange={e => setEndpoint(e.target.value)}
               disabled={isOpenHuman}
-              className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 font-mono text-xs text-stone-900 placeholder:text-stone-400 disabled:opacity-60 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
+              className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 font-mono text-xs text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500 disabled:opacity-60 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
               placeholder="https://api.example.com/v1"
             />
           </div>
           {!isOpenHuman && (
             <div>
-              <label className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wide text-stone-500">
+              <label className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                 <span>API key</span>
                 {hasExistingKey && (
                   <button
                     onClick={() => void onClearKey(slug)}
-                    className="text-[10px] font-medium normal-case text-coral-600 hover:text-coral-700">
+                    className="text-[10px] font-medium normal-case text-coral-600 dark:text-coral-300 hover:text-coral-700 dark:text-coral-300">
                     {t('settings.ai.clearStoredKey')}
                   </button>
                 )}
@@ -2145,17 +2205,17 @@ const CloudProviderEditor = ({
                 type="password"
                 value={apiKey}
                 onChange={e => setApiKey(e.target.value)}
-                className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 font-mono text-xs text-stone-900 placeholder:text-stone-400 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
+                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 font-mono text-xs text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-200"
                 placeholder={hasExistingKey ? 'Leave blank to keep existing key' : 'sk-...'}
               />
             </div>
           )}
         </div>
-        <div className="flex items-center justify-end gap-2 border-t border-stone-200 px-4 py-3">
+        <div className="flex items-center justify-end gap-2 border-t border-stone-200 dark:border-neutral-800 px-4 py-3">
           <button
             onClick={onClose}
             disabled={saving}
-            className="rounded-lg border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50">
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 disabled:opacity-50">
             {t('common.cancel')}
           </button>
           <button
diff --git a/app/src/components/settings/panels/AboutPanel.tsx b/app/src/components/settings/panels/AboutPanel.tsx
index cdf078687..45223fda7 100644
--- a/app/src/components/settings/panels/AboutPanel.tsx
+++ b/app/src/components/settings/panels/AboutPanel.tsx
@@ -42,9 +42,13 @@ const AboutPanel = () => {
       />
 
       <div className="p-4 space-y-4">
-        <div className="rounded-xl border border-stone-200 bg-white p-4">
-          <div className="text-xs text-stone-500">{t('settings.about.version')}</div>
-          <div className="mt-1 text-lg font-semibold text-stone-900">v{APP_VERSION}</div>
+        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+          <div className="text-xs text-stone-500 dark:text-neutral-400">
+            {t('settings.about.version')}
+          </div>
+          <div className="mt-1 text-lg font-semibold text-stone-900 dark:text-neutral-100">
+            v{APP_VERSION}
+          </div>
           {info?.available && info.available_version && (
             <div className="mt-1 text-xs text-primary-500">
               v{info.available_version} {t('settings.about.updateAvailable')}
@@ -52,15 +56,17 @@ const AboutPanel = () => {
           )}
         </div>
 
-        <div className="rounded-xl border border-stone-200 bg-white p-4">
+        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
           <div className="flex items-start justify-between gap-3">
             <div className="flex-1 min-w-0">
-              <div className="text-sm font-medium text-stone-900">
+              <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                 {t('settings.about.softwareUpdates')}
               </div>
-              <div className="mt-1 text-xs text-stone-500 leading-relaxed">{summary}</div>
+              <div className="mt-1 text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
+                {summary}
+              </div>
               {lastCheckedAt && (
-                <div className="mt-1 text-[11px] text-stone-400">
+                <div className="mt-1 text-[11px] text-stone-400 dark:text-neutral-500">
                   {t('settings.about.lastChecked')} {formatRelative(lastCheckedAt, t)}
                 </div>
               )}
@@ -75,9 +81,11 @@ const AboutPanel = () => {
           </div>
         </div>
 
-        <div className="rounded-xl border border-stone-200 bg-white p-4">
-          <div className="text-sm font-medium text-stone-900">{t('settings.about.releases')}</div>
-          <p className="mt-1 text-xs text-stone-500 leading-relaxed">
+        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+          <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+            {t('settings.about.releases')}
+          </div>
+          <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
             {t('settings.about.releasesDesc')}
           </p>
           <button
@@ -85,7 +93,7 @@ const AboutPanel = () => {
             onClick={() => {
               void openUrl(LATEST_APP_DOWNLOAD_URL);
             }}
-            className="mt-3 px-3 py-1.5 rounded-lg border border-stone-200 text-stone-700 hover:bg-stone-100 text-xs transition-colors">
+            className="mt-3 px-3 py-1.5 rounded-lg border border-stone-200 dark:border-neutral-800 text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 text-xs transition-colors">
             {t('settings.about.openReleases')}
           </button>
         </div>
diff --git a/app/src/components/settings/panels/AgentChatPanel.tsx b/app/src/components/settings/panels/AgentChatPanel.tsx
index 311ed3f93..4b8e48cb8 100644
--- a/app/src/components/settings/panels/AgentChatPanel.tsx
+++ b/app/src/components/settings/panels/AgentChatPanel.tsx
@@ -84,22 +84,24 @@ const AgentChatPanel = () => {
 
       <div className="p-4 space-y-4">
         <section className="space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">{t('chat.overrides')}</h3>
-          <p className="text-sm text-stone-400">{t('chat.agentChatDesc')}</p>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('chat.overrides')}
+          </h3>
+          <p className="text-sm text-stone-400 dark:text-neutral-500">{t('chat.agentChatDesc')}</p>
           <div className="grid gap-3 md:grid-cols-2">
-            <label className="space-y-2 text-sm text-stone-600">
+            <label className="space-y-2 text-sm text-stone-600 dark:text-neutral-300">
               {t('chat.model')}
               <input
-                className="input input-bordered w-full text-slate-900 bg-white"
+                className="input input-bordered w-full text-slate-900 bg-white dark:bg-neutral-900"
                 placeholder="gpt-4o"
                 value={modelOverride}
                 onChange={event => setModelOverride(event.target.value)}
               />
             </label>
-            <label className="space-y-2 text-sm text-stone-600">
+            <label className="space-y-2 text-sm text-stone-600 dark:text-neutral-300">
               {t('chat.temperature')}
               <input
-                className="input input-bordered w-full text-slate-900 bg-white"
+                className="input input-bordered w-full text-slate-900 bg-white dark:bg-neutral-900"
                 placeholder="0.7"
                 value={temperature}
                 onChange={event => setTemperature(event.target.value)}
@@ -109,24 +111,30 @@ const AgentChatPanel = () => {
         </section>
 
         <section className="space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">{t('chat.conversation')}</h3>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('chat.conversation')}
+          </h3>
           {error && (
-            <div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">
+            <div className="rounded-lg border border-red-300 dark:border-red-500/40 bg-red-50 dark:bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-300">
               {error}
             </div>
           )}
-          <div className="rounded-xl border border-stone-200 bg-stone-50 p-4 space-y-3">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4 space-y-3">
             {messages.length === 0 && (
-              <div className="text-sm text-stone-400">{t('chat.startAgentConversation')}</div>
+              <div className="text-sm text-stone-400 dark:text-neutral-500">
+                {t('chat.startAgentConversation')}
+              </div>
             )}
             {messages.map((message, index) => (
               <div key={`${message.role}-${index}`} className="space-y-1">
-                <div className="text-[11px] uppercase tracking-wide text-stone-500">
+                <div className="text-[11px] uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                   {message.role === 'user' ? t('chat.you') : t('chat.agent')}
                 </div>
                 <div
                   className={`text-sm whitespace-pre-wrap ${
-                    message.role === 'user' ? 'text-stone-900' : 'text-emerald-700'
+                    message.role === 'user'
+                      ? 'text-stone-900 dark:text-neutral-100'
+                      : 'text-emerald-700 dark:text-emerald-300'
                   }`}>
                   {message.text}
                 </div>
@@ -135,7 +143,7 @@ const AgentChatPanel = () => {
           </div>
           <div className="space-y-2">
             <textarea
-              className="textarea textarea-bordered w-full min-h-[140px] text-slate-900 bg-white"
+              className="textarea textarea-bordered w-full min-h-[140px] text-slate-900 bg-white dark:bg-neutral-900"
               placeholder={t('chat.askAgent')}
               value={input}
               onChange={event => setInput(event.target.value)}
diff --git a/app/src/components/settings/panels/AppearancePanel.tsx b/app/src/components/settings/panels/AppearancePanel.tsx
new file mode 100644
index 000000000..93844c657
--- /dev/null
+++ b/app/src/components/settings/panels/AppearancePanel.tsx
@@ -0,0 +1,148 @@
+import type { ReactElement } from 'react';
+
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { setThemeMode, type ThemeMode } from '../../../store/themeSlice';
+import SettingsHeader from '../components/SettingsHeader';
+import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
+
+interface ModeOption {
+  id: ThemeMode;
+  label: string;
+  description: string;
+  icon: ReactElement;
+}
+
+const SunIcon = (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 3v2m0 14v2m9-9h-2M5 12H3m15.364-6.364l-1.414 1.414M7.05 16.95l-1.414 1.414m12.728 0l-1.414-1.414M7.05 7.05L5.636 5.636M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+    />
+  </svg>
+);
+
+const MoonIcon = (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
+    />
+  </svg>
+);
+
+const SystemIcon = (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M9 17v2m6-2v2m-9-2h12a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2z"
+    />
+  </svg>
+);
+
+const OPTIONS: ModeOption[] = [
+  { id: 'light', label: 'Light', description: 'Bright surfaces, dark text.', icon: SunIcon },
+  {
+    id: 'dark',
+    label: 'Dark',
+    description: 'Dim surfaces, easier on the eyes after dusk.',
+    icon: MoonIcon,
+  },
+  {
+    id: 'system',
+    label: 'Match system',
+    description: 'Follow your OS appearance setting.',
+    icon: SystemIcon,
+  },
+];
+
+const AppearancePanel = () => {
+  const { navigateBack, breadcrumbs } = useSettingsNavigation();
+  const dispatch = useAppDispatch();
+  const mode = useAppSelector(state => state.theme.mode);
+
+  return (
+    <div>
+      <SettingsHeader
+        title="Appearance"
+        showBackButton
+        onBack={navigateBack}
+        breadcrumbs={breadcrumbs}
+      />
+
+      <div className="p-4 space-y-4">
+        <div>
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-500 mb-2 px-1">
+            Theme
+          </h3>
+          <div
+            className="bg-white dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 overflow-hidden"
+            role="radiogroup"
+            aria-label="Theme">
+            {OPTIONS.map((opt, idx) => {
+              const selected = opt.id === mode;
+              return (
+                <button
+                  key={opt.id}
+                  type="button"
+                  role="radio"
+                  aria-checked={selected}
+                  onClick={() => dispatch(setThemeMode(opt.id))}
+                  className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors focus:outline-none focus-visible:bg-primary-50 dark:bg-primary-500/10 dark:focus-visible:bg-primary-900/30 ${
+                    idx !== 0 ? 'border-t border-neutral-100 dark:border-neutral-800' : ''
+                  } ${
+                    selected
+                      ? 'bg-primary-50 dark:bg-primary-500/10'
+                      : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/60'
+                  }`}>
+                  <span
+                    className={`flex items-center justify-center w-9 h-9 rounded-lg ${
+                      selected
+                        ? 'bg-primary-500 text-white'
+                        : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300'
+                    }`}>
+                    {opt.icon}
+                  </span>
+                  <span className="flex-1 min-w-0">
+                    <span className="block text-sm font-medium text-neutral-900 dark:text-neutral-100">
+                      {opt.label}
+                    </span>
+                    <span className="block text-xs text-neutral-500 dark:text-neutral-400">
+                      {opt.description}
+                    </span>
+                  </span>
+                  {selected && (
+                    <svg
+                      className="w-5 h-5 text-primary-500"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      aria-hidden>
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
+            Dark mode switches the entire app — chat, settings, panels — to a dim palette. "Match
+            system" follows your OS appearance and updates live.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppearancePanel;
diff --git a/app/src/components/settings/panels/AutocompleteDebugPanel.tsx b/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
index c15517bc6..b32635478 100644
--- a/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
+++ b/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
@@ -468,9 +468,9 @@ const AutocompleteDebugPanel = () => {
         {/* ------------------------------------------------------------------ */}
         {/* Runtime section                                                     */}
         {/* ------------------------------------------------------------------ */}
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">Runtime</h3>
-          <div className="text-sm text-stone-700 space-y-1">
+        <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">Runtime</h3>
+          <div className="text-sm text-stone-700 dark:text-neutral-200 space-y-1">
             <div>Platform supported: {status?.platform_supported ? 'yes' : 'no'}</div>
             <div>Enabled: {status?.enabled ? 'yes' : 'no'}</div>
             <div>Running: {status?.running ? 'yes' : 'no'}</div>
@@ -486,21 +486,21 @@ const AutocompleteDebugPanel = () => {
               type="button"
               onClick={() => void refreshStatus(true)}
               disabled={isLoading}
-              className="rounded-lg border border-stone-300 bg-stone-100 px-3 py-2 text-sm text-stone-700 disabled:opacity-50">
+              className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 px-3 py-2 text-sm text-stone-700 dark:text-neutral-200 disabled:opacity-50">
               {isLoading ? 'Refreshing…' : 'Refresh Status'}
             </button>
             <button
               type="button"
               onClick={() => void start()}
               disabled={!status?.platform_supported || Boolean(status?.running)}
-              className="rounded-lg border border-green-500/60 bg-green-50 px-3 py-2 text-sm text-green-700 disabled:opacity-50">
+              className="rounded-lg border border-green-500/60 bg-green-50 dark:bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-300 disabled:opacity-50">
               Start
             </button>
             <button
               type="button"
               onClick={() => void stop()}
               disabled={!status?.running}
-              className="rounded-lg border border-red-500/60 bg-red-50 px-3 py-2 text-sm text-red-600 disabled:opacity-50">
+              className="rounded-lg border border-red-500/60 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300 disabled:opacity-50">
               Stop
             </button>
           </div>
@@ -509,39 +509,41 @@ const AutocompleteDebugPanel = () => {
         {/* ------------------------------------------------------------------ */}
         {/* Test section                                                        */}
         {/* ------------------------------------------------------------------ */}
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">Test</h3>
+        <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">Test</h3>
           <div className="space-y-1">
-            <div className="text-xs text-stone-600">Context Override (optional)</div>
+            <div className="text-xs text-stone-600 dark:text-neutral-300">
+              Context Override (optional)
+            </div>
             <textarea
               value={contextOverride}
               onChange={event => setContextOverride(event.target.value)}
               rows={3}
-              className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+              className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
             />
           </div>
           <div className="flex gap-2">
             <button
               type="button"
               onClick={() => void testCurrent()}
-              className="rounded-lg border border-primary-500/60 bg-primary-50 px-3 py-2 text-sm text-primary-600">
+              className="rounded-lg border border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-600 dark:text-primary-300">
               Get Suggestion
             </button>
             <button
               type="button"
               onClick={() => void acceptSuggestion()}
-              className="rounded-lg border border-emerald-500/60 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+              className="rounded-lg border border-emerald-500/60 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300">
               Accept Suggestion
             </button>
             <button
               type="button"
               onClick={() => void debugFocus()}
-              className="rounded-lg border border-amber-500/60 bg-amber-50 px-3 py-2 text-sm text-amber-700">
+              className="rounded-lg border border-amber-500/60 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300">
               Debug Focus
             </button>
           </div>
           {focusDebug && (
-            <pre className="max-h-48 overflow-auto rounded-xl border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700">
+            <pre className="max-h-48 overflow-auto rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200">
               {focusDebug}
             </pre>
           )}
@@ -550,17 +552,19 @@ const AutocompleteDebugPanel = () => {
         {/* ------------------------------------------------------------------ */}
         {/* Live Logs section                                                   */}
         {/* ------------------------------------------------------------------ */}
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
           <div className="flex items-center justify-between">
-            <h3 className="text-sm font-semibold text-stone-900">Live Logs</h3>
+            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+              Live Logs
+            </h3>
             <button
               type="button"
               onClick={clearLogs}
-              className="rounded-lg border border-stone-300 bg-stone-100 px-3 py-1.5 text-xs text-stone-700">
+              className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200">
               Clear
             </button>
           </div>
-          <pre className="max-h-56 overflow-auto rounded-xl border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700">
+          <pre className="max-h-56 overflow-auto rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200">
             {logs.length > 0 ? logs.join('\n') : 'No logs yet.'}
           </pre>
         </section>
@@ -568,10 +572,12 @@ const AutocompleteDebugPanel = () => {
         {/* ------------------------------------------------------------------ */}
         {/* Advanced settings                                                   */}
         {/* ------------------------------------------------------------------ */}
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">Advanced Settings</h3>
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">Debounce Ms</span>
+        <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            Advanced Settings
+          </h3>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">Debounce Ms</span>
             <input
               type="number"
               min={50}
@@ -579,11 +585,11 @@ const AutocompleteDebugPanel = () => {
               step={10}
               value={debounceMs}
               onChange={event => setDebounceMs(event.target.value)}
-              className="w-28 rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+              className="w-28 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200"
             />
           </label>
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">Max Characters</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">Max Characters</span>
             <input
               type="number"
               min={32}
@@ -591,11 +597,11 @@ const AutocompleteDebugPanel = () => {
               step={8}
               value={maxChars}
               onChange={event => setMaxChars(event.target.value)}
-              className="w-28 rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+              className="w-28 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200"
             />
           </label>
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">Overlay TTL Ms</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">Overlay TTL Ms</span>
             <input
               type="number"
               min={300}
@@ -603,32 +609,34 @@ const AutocompleteDebugPanel = () => {
               step={100}
               value={overlayTtlMs}
               onChange={event => setOverlayTtlMs(event.target.value)}
-              className="w-28 rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+              className="w-28 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200"
             />
           </label>
           <div className="space-y-1">
-            <div className="text-xs text-stone-600">Style Instructions</div>
+            <div className="text-xs text-stone-600 dark:text-neutral-300">Style Instructions</div>
             <textarea
               value={styleInstructions}
               onChange={event => setStyleInstructions(event.target.value)}
               rows={3}
-              className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+              className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
             />
           </div>
           <div className="space-y-1">
-            <div className="text-xs text-stone-600">Style Examples (one per line)</div>
+            <div className="text-xs text-stone-600 dark:text-neutral-300">
+              Style Examples (one per line)
+            </div>
             <textarea
               value={styleExamplesText}
               onChange={event => setStyleExamplesText(event.target.value)}
               rows={3}
-              className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+              className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
             />
           </div>
           <button
             type="button"
             onClick={() => void saveAdvancedConfig()}
             disabled={isSaving}
-            className="rounded-lg border border-primary-500/60 bg-primary-50 px-3 py-2 text-sm text-primary-600 disabled:opacity-50">
+            className="rounded-lg border border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-600 dark:text-primary-300 disabled:opacity-50">
             {isSaving ? 'Saving…' : 'Save'}
           </button>
         </section>
@@ -636,18 +644,20 @@ const AutocompleteDebugPanel = () => {
         {/* ------------------------------------------------------------------ */}
         {/* Personalization History                                             */}
         {/* ------------------------------------------------------------------ */}
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+        <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
           <div className="flex items-center justify-between">
-            <h3 className="text-sm font-semibold text-stone-900">Personalization History</h3>
+            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+              Personalization History
+            </h3>
             <button
               type="button"
               onClick={() => void clearHistory()}
               disabled={isClearingHistory || historyEntries.length === 0}
-              className="rounded-lg border border-red-500/60 bg-red-50 px-3 py-1.5 text-xs text-red-600 disabled:opacity-40">
+              className="rounded-lg border border-red-500/60 bg-red-50 dark:bg-red-500/10 px-3 py-1.5 text-xs text-red-600 dark:text-red-300 disabled:opacity-40">
               {isClearingHistory ? 'Clearing…' : 'Clear History'}
             </button>
           </div>
-          <p className="text-xs text-stone-500">
+          <p className="text-xs text-stone-500 dark:text-neutral-400">
             {isHistoryLoading
               ? 'Loading…'
               : historyEntries.length === 0
@@ -655,25 +665,27 @@ const AutocompleteDebugPanel = () => {
                 : `${String(historyEntries.length)} accepted completion${historyEntries.length === 1 ? '' : 's'} stored — used to personalise future suggestions.`}
           </p>
           {historyEntries.length > 0 && (
-            <div className="max-h-48 overflow-y-auto rounded-xl border border-stone-200 bg-stone-50 p-2 space-y-1">
+            <div className="max-h-48 overflow-y-auto rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 space-y-1">
               {historyEntries.map((entry, idx) => (
                 <div
                   key={`${String(entry.timestamp_ms)}-${String(idx)}`}
-                  className="flex flex-col gap-0.5 rounded-lg bg-white px-2 py-1.5 text-xs border border-stone-100">
-                  <div className="flex items-center gap-2 text-stone-500">
+                  className="flex flex-col gap-0.5 rounded-lg bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs border border-stone-100 dark:border-neutral-800">
+                  <div className="flex items-center gap-2 text-stone-500 dark:text-neutral-400">
                     <span className="shrink-0">
                       {new Date(entry.timestamp_ms).toLocaleString()}
                     </span>
                     {entry.app_name && (
-                      <span className="rounded bg-stone-100 px-1 text-stone-600">
+                      <span className="rounded bg-stone-100 dark:bg-neutral-800 px-1 text-stone-600 dark:text-neutral-300">
                         {entry.app_name}
                       </span>
                     )}
                   </div>
-                  <div className="flex items-baseline gap-1 text-stone-700 truncate">
-                    <span className="shrink-0 text-stone-400">…</span>
-                    <span className="truncate text-stone-500">{entry.context.slice(-40)}</span>
-                    <span className="shrink-0 text-stone-400">→</span>
+                  <div className="flex items-baseline gap-1 text-stone-700 dark:text-neutral-200 truncate">
+                    <span className="shrink-0 text-stone-400 dark:text-neutral-500">…</span>
+                    <span className="truncate text-stone-500 dark:text-neutral-400">
+                      {entry.context.slice(-40)}
+                    </span>
+                    <span className="shrink-0 text-stone-400 dark:text-neutral-500">→</span>
                     <span className="font-medium text-primary-500 truncate">
                       {entry.suggestion}
                     </span>
@@ -687,8 +699,8 @@ const AutocompleteDebugPanel = () => {
         {/* ------------------------------------------------------------------ */}
         {/* Feedback messages                                                   */}
         {/* ------------------------------------------------------------------ */}
-        {message && <div className="text-xs text-green-700">{message}</div>}
-        {error && <div className="text-xs text-red-600">{error}</div>}
+        {message && <div className="text-xs text-green-700 dark:text-green-300">{message}</div>}
+        {error && <div className="text-xs text-red-600 dark:text-red-300">{error}</div>}
       </div>
     </div>
   );
diff --git a/app/src/components/settings/panels/AutocompletePanel.tsx b/app/src/components/settings/panels/AutocompletePanel.tsx
index 907389295..776ee5454 100644
--- a/app/src/components/settings/panels/AutocompletePanel.tsx
+++ b/app/src/components/settings/panels/AutocompletePanel.tsx
@@ -198,11 +198,15 @@ const AutocompletePanel = () => {
       />
 
       <div className="max-w-2xl mx-auto w-full p-4 space-y-4">
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">{t('autocomplete.settings')}</h3>
+        <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('autocomplete.settings')}
+          </h3>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">{t('common.enabled')}</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">
+              {t('common.enabled')}
+            </span>
             <input
               type="checkbox"
               checked={enabled}
@@ -210,8 +214,10 @@ const AutocompletePanel = () => {
             />
           </label>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">{t('autocomplete.acceptWithTab')}</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">
+              {t('autocomplete.acceptWithTab')}
+            </span>
             <input
               type="checkbox"
               checked={acceptWithTab}
@@ -219,12 +225,14 @@ const AutocompletePanel = () => {
             />
           </label>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">{t('autocomplete.stylePreset')}</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">
+              {t('autocomplete.stylePreset')}
+            </span>
             <select
               value={stylePreset}
               onChange={event => setStylePreset(event.target.value)}
-              className="rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700">
+              className="rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200">
               <option value="balanced">{t('autocomplete.style.balanced')}</option>
               <option value="concise">{t('autocomplete.style.concise')}</option>
               <option value="formal">{t('autocomplete.style.formal')}</option>
@@ -234,12 +242,14 @@ const AutocompletePanel = () => {
           </label>
 
           <div className="space-y-1">
-            <div className="text-xs text-stone-600">{t('autocomplete.disabledApps')}</div>
+            <div className="text-xs text-stone-600 dark:text-neutral-300">
+              {t('autocomplete.disabledApps')}
+            </div>
             <textarea
               value={disabledAppsText}
               onChange={event => setDisabledAppsText(event.target.value)}
               rows={3}
-              className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+              className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
             />
           </div>
 
@@ -247,14 +257,16 @@ const AutocompletePanel = () => {
             type="button"
             onClick={() => void saveConfig()}
             disabled={isSaving || !configLoaded}
-            className="rounded-lg border border-primary-500/60 bg-primary-50 px-3 py-2 text-sm text-primary-600 disabled:opacity-50">
+            className="rounded-lg border border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-600 dark:text-primary-300 disabled:opacity-50">
             {isSaving ? t('autocomplete.saving') : t('autocomplete.saveSettings')}
           </button>
         </section>
 
-        <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">{t('autocomplete.runtime')}</h3>
-          <div className="text-sm text-stone-600 space-y-1">
+        <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('autocomplete.runtime')}
+          </h3>
+          <div className="text-sm text-stone-600 dark:text-neutral-300 space-y-1">
             <div>
               {t('autocomplete.running')}: {status?.running ? t('common.yes') : t('common.no')}
             </div>
@@ -267,26 +279,26 @@ const AutocompletePanel = () => {
               type="button"
               onClick={() => void start()}
               disabled={!configLoaded || !status?.platform_supported || Boolean(status?.running)}
-              className="rounded-lg border border-green-500/60 bg-green-50 px-3 py-2 text-sm text-green-700 disabled:opacity-50">
+              className="rounded-lg border border-green-500/60 bg-green-50 dark:bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-300 disabled:opacity-50">
               {t('autocomplete.start')}
             </button>
             <button
               type="button"
               onClick={() => void stop()}
               disabled={!status?.running}
-              className="rounded-lg border border-red-500/60 bg-red-50 px-3 py-2 text-sm text-red-600 disabled:opacity-50">
+              className="rounded-lg border border-red-500/60 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300 disabled:opacity-50">
               {t('autocomplete.stop')}
             </button>
           </div>
         </section>
 
-        {message && <div className="text-xs text-green-700">{message}</div>}
-        {error && <div className="text-xs text-red-600">{error}</div>}
+        {message && <div className="text-xs text-green-700 dark:text-green-300">{message}</div>}
+        {error && <div className="text-xs text-red-600 dark:text-red-300">{error}</div>}
 
         <button
           type="button"
           onClick={() => navigateToSettings('autocomplete-debug')}
-          className="flex items-center gap-1.5 text-xs text-stone-400 hover:text-stone-600 transition-colors">
+          className="flex items-center gap-1.5 text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 dark:hover:text-neutral-300 transition-colors">
           {t('autocomplete.advancedSettings')}
           <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
diff --git a/app/src/components/settings/panels/BillingPanel.tsx b/app/src/components/settings/panels/BillingPanel.tsx
index 49554b418..88ccf1642 100644
--- a/app/src/components/settings/panels/BillingPanel.tsx
+++ b/app/src/components/settings/panels/BillingPanel.tsx
@@ -47,13 +47,13 @@ const BillingPanel = () => {
           onClick={navigateBack}
           trailingContent={
             breadcrumbs.length > 0 ? (
-              <div className="flex flex-wrap items-center gap-2 text-xs text-stone-500">
+              <div className="flex flex-wrap items-center gap-2 text-xs text-stone-500 dark:text-neutral-400">
                 {breadcrumbs.map((crumb, index) => (
                   <button
                     key={`${crumb.label}-${index}`}
                     type="button"
                     onClick={crumb.onClick}
-                    className="rounded-full border border-stone-200 bg-white px-3 py-1 font-medium text-stone-600 transition-colors hover:bg-stone-50">
+                    className="rounded-full border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1 font-medium text-stone-600 dark:text-neutral-300 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60">
                     {crumb.label}
                   </button>
                 ))}
@@ -62,16 +62,16 @@ const BillingPanel = () => {
           }
         />
 
-        <div className="mt-6 rounded-3xl border border-stone-200 bg-white p-6 shadow-soft">
+        <div className="mt-6 rounded-3xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-soft">
           <div className="max-w-xl space-y-4">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-stone-500">
+              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-stone-500 dark:text-neutral-400">
                 {t('settings.billing.movedToWeb')}
               </p>
-              <h1 className="mt-2 text-2xl font-semibold text-stone-900">
+              <h1 className="mt-2 text-2xl font-semibold text-stone-900 dark:text-neutral-100">
                 {t('settings.billing.openDashboard')}
               </h1>
-              <p className="mt-2 text-sm leading-6 text-stone-600">
+              <p className="mt-2 text-sm leading-6 text-stone-600 dark:text-neutral-300">
                 {t('settings.billing.movedToWebDesc')}
               </p>
             </div>
@@ -88,19 +88,25 @@ const BillingPanel = () => {
               <button
                 type="button"
                 onClick={navigateBack}
-                className="inline-flex items-center rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-700 transition-colors hover:bg-stone-50">
+                className="inline-flex items-center rounded-full border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-2 text-sm font-semibold text-stone-700 dark:text-neutral-200 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60">
                 {t('settings.billing.backToSettings')}
               </button>
             </div>
 
             {status === 'opening' && (
-              <p className="text-xs text-stone-500">{t('settings.billing.openingBrowser')}</p>
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
+                {t('settings.billing.openingBrowser')}
+              </p>
             )}
             {status === 'idle' && (
-              <p className="text-xs text-stone-500">{t('settings.billing.browserNotOpen')}</p>
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
+                {t('settings.billing.browserNotOpen')}
+              </p>
             )}
             {status === 'error' && (
-              <p className="text-xs text-coral-600">{t('settings.billing.browserOpenFailed')}</p>
+              <p className="text-xs text-coral-600 dark:text-coral-300">
+                {t('settings.billing.browserOpenFailed')}
+              </p>
             )}
           </div>
         </div>
diff --git a/app/src/components/settings/panels/ComposioPanel.tsx b/app/src/components/settings/panels/ComposioPanel.tsx
index 425a8f899..f6107d8ef 100644
--- a/app/src/components/settings/panels/ComposioPanel.tsx
+++ b/app/src/components/settings/panels/ComposioPanel.tsx
@@ -204,7 +204,9 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
           />
         )}
         <div className={embedded ? '' : 'p-4'}>
-          <p className="text-sm text-stone-500">{t('settings.composio.loading')}</p>
+          <p className="text-sm text-stone-500 dark:text-neutral-400">
+            {t('settings.composio.loading')}
+          </p>
         </div>
       </div>
     );
@@ -222,12 +224,14 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
       )}
 
       <div className={embedded ? 'space-y-5' : 'p-4 space-y-5'}>
-        <p className="text-sm text-stone-500">{t('settings.composio.intro')}</p>
+        <p className="text-sm text-stone-500 dark:text-neutral-400">
+          {t('settings.composio.intro')}
+        </p>
 
         {/* Mode toggle */}
-        <div className="rounded-2xl border border-stone-200 bg-stone-50/60 p-4 space-y-3">
+        <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4 space-y-3">
           <fieldset>
-            <legend className="text-sm font-medium text-stone-900 mb-2">
+            <legend className="text-sm font-medium text-stone-900 dark:text-neutral-100 mb-2">
               {t('settings.composio.routingMode')}
             </legend>
             <div className="space-y-2">
@@ -244,10 +248,10 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
                   className="mt-1"
                 />
                 <div className="text-left">
-                  <span className="text-sm font-medium text-stone-900">
+                  <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                     {t('settings.composio.modeManaged')}
                   </span>
-                  <p className="text-xs text-stone-500 mt-0.5">
+                  <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
                     {t('settings.composio.modeManagedDesc')}
                   </p>
                 </div>
@@ -265,10 +269,10 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
                   className="mt-1"
                 />
                 <div className="text-left">
-                  <span className="text-sm font-medium text-stone-900">
+                  <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                     {t('settings.composio.modeDirect')}
                   </span>
-                  <p className="text-xs text-stone-500 mt-0.5">
+                  <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
                     {t('settings.composio.modeDirectDesc')}
                   </p>
                 </div>
@@ -280,10 +284,14 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
         {/* API key field — only when Direct is selected */}
         {mode === 'direct' && (
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-stone-800" htmlFor="composio-api-key">
+            <label
+              className="block text-sm font-medium text-stone-800 dark:text-neutral-100"
+              htmlFor="composio-api-key">
               {t('settings.composio.apiKeyLabel')}
             </label>
-            <p className="text-xs text-stone-500">{t('settings.composio.apiKeyDesc')}</p>
+            <p className="text-xs text-stone-500 dark:text-neutral-400">
+              {t('settings.composio.apiKeyDesc')}
+            </p>
             <input
               id="composio-api-key"
               type="password"
@@ -295,10 +303,12 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
                   ? t('settings.composio.apiKeyStoredPlaceholder')
                   : 'ck_live_xxxxxxxxxxxxxxxx'
               }
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm font-mono text-stone-900 placeholder-stone-400 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+              className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm font-mono text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
             />
             {apiKeyStored && (
-              <p className="text-xs text-green-600">{t('settings.composio.apiKeyStored')}</p>
+              <p className="text-xs text-green-600 dark:text-green-300">
+                {t('settings.composio.apiKeyStored')}
+              </p>
             )}
           </div>
         )}
@@ -313,7 +323,7 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
           <div
             role="alertdialog"
             aria-labelledby="composio-confirm-title"
-            className="rounded-2xl border border-amber-200 bg-amber-50/80 p-4 space-y-3">
+            className="rounded-2xl border border-amber-200 dark:border-amber-500/30 bg-amber-50/80 p-4 space-y-3">
             <p id="composio-confirm-title" className="text-sm font-medium text-amber-900">
               {t('settings.composio.confirmTitle')}
             </p>
@@ -331,7 +341,7 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
                 type="button"
                 onClick={handleCancelTransition}
                 disabled={saving}
-                className="flex-1 py-2 rounded-xl border border-stone-300 bg-white text-stone-800 text-sm font-medium hover:bg-stone-50 transition-colors disabled:opacity-50">
+                className="flex-1 py-2 rounded-xl border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-stone-800 dark:text-neutral-100 text-sm font-medium hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 transition-colors disabled:opacity-50">
                 {t('common.cancel')}
               </button>
               <button
@@ -354,10 +364,12 @@ const ComposioPanel = ({ embedded = false }: ComposioPanelProps = {}) => {
         )}
 
         {saveStatus === 'saved' && (
-          <p className="text-xs text-center text-green-600">{t('composio.settingsSaved')}</p>
+          <p className="text-xs text-center text-green-600 dark:text-green-300">
+            {t('composio.settingsSaved')}
+          </p>
         )}
         {saveStatus === 'cleared' && (
-          <p className="text-xs text-center text-green-600">
+          <p className="text-xs text-center text-green-600 dark:text-green-300">
             {t('settings.composio.clearedToBackend')}
           </p>
         )}
diff --git a/app/src/components/settings/panels/ComposioTriagePanel.tsx b/app/src/components/settings/panels/ComposioTriagePanel.tsx
index 3be18108c..ae79533e7 100644
--- a/app/src/components/settings/panels/ComposioTriagePanel.tsx
+++ b/app/src/components/settings/panels/ComposioTriagePanel.tsx
@@ -83,7 +83,7 @@ const ComposioTriagePanel = () => {
           breadcrumbs={breadcrumbs}
         />
         <div className="p-4">
-          <p className="text-sm text-stone-500">Loading…</p>
+          <p className="text-sm text-stone-500 dark:text-neutral-400">Loading…</p>
         </div>
       </div>
     );
@@ -99,13 +99,13 @@ const ComposioTriagePanel = () => {
       />
 
       <div className="p-4 space-y-5">
-        <p className="text-sm text-stone-500">
+        <p className="text-sm text-stone-500 dark:text-neutral-400">
           {t('composio.triageDesc')}{' '}
           <span className="font-mono">OPENHUMAN_TRIGGER_TRIAGE_DISABLED</span>{' '}
           {t('composio.envVarOverrides')}
         </p>
 
-        <div className="rounded-2xl border border-stone-200 bg-stone-50/60 p-4 space-y-1">
+        <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4 space-y-1">
           <button
             type="button"
             role="switch"
@@ -114,17 +114,19 @@ const ComposioTriagePanel = () => {
             onClick={() => setTriageDisabled(v => !v)}
             className="w-full flex items-center justify-between">
             <div className="text-left">
-              <span className="text-sm font-medium text-stone-900">
+              <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                 {t('composio.disableAllTriage')}
               </span>
-              <p className="text-xs text-stone-500 mt-0.5">{t('composio.triggersStillRecorded')}</p>
+              <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+                {t('composio.triggersStillRecorded')}
+              </p>
             </div>
             <div
               className={`ml-3 flex-shrink-0 w-9 h-5 rounded-full transition-colors relative ${
-                triageDisabled ? 'bg-coral-400' : 'bg-stone-200'
+                triageDisabled ? 'bg-coral-400' : 'bg-stone-200 dark:bg-neutral-800'
               }`}>
               <div
-                className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
+                className={`absolute top-0.5 w-4 h-4 rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
                   triageDisabled ? 'translate-x-4' : 'translate-x-0.5'
                 }`}
               />
@@ -133,10 +135,12 @@ const ComposioTriagePanel = () => {
         </div>
 
         <div className={`space-y-2 ${triageDisabled ? 'opacity-40 pointer-events-none' : ''}`}>
-          <label className="block text-sm font-medium text-stone-800" htmlFor="disabled-toolkits">
+          <label
+            className="block text-sm font-medium text-stone-800 dark:text-neutral-100"
+            htmlFor="disabled-toolkits">
             {t('composio.disableSpecificIntegrations')}
           </label>
-          <p className="text-xs text-stone-500">
+          <p className="text-xs text-stone-500 dark:text-neutral-400">
             Comma-separated integration slugs, e.g. <span className="font-mono">gmail, slack</span>.
             Case-insensitive.
           </p>
@@ -147,7 +151,7 @@ const ComposioTriagePanel = () => {
             onChange={e => setDisabledToolkits(e.target.value)}
             placeholder="gmail, slack, ..."
             disabled={triageDisabled}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder-stone-400 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-400 disabled:cursor-not-allowed"
+            className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-400 focus:outline-none focus:ring-1 focus:ring-primary-400 disabled:cursor-not-allowed"
           />
         </div>
 
@@ -160,7 +164,9 @@ const ComposioTriagePanel = () => {
         </button>
 
         {saveStatus === 'saved' && (
-          <p className="text-xs text-center text-green-600">{t('composio.settingsSaved')}</p>
+          <p className="text-xs text-center text-green-600 dark:text-green-300">
+            {t('composio.settingsSaved')}
+          </p>
         )}
         {saveStatus === 'error' && (
           <p className="text-xs text-center text-red-500">{t('composio.saveFailed')}</p>
diff --git a/app/src/components/settings/panels/ConnectionsPanel.tsx b/app/src/components/settings/panels/ConnectionsPanel.tsx
index bb868116f..cb652d30c 100644
--- a/app/src/components/settings/panels/ConnectionsPanel.tsx
+++ b/app/src/components/settings/panels/ConnectionsPanel.tsx
@@ -36,15 +36,15 @@ function ConnectionOptionRow({
   const isDisabled = option.comingSoon;
 
   const badge = option.comingSoon ? (
-    <span className="px-2 py-0.5 text-[11px] font-medium rounded-full bg-stone-100 text-stone-500 border border-stone-200">
+    <span className="px-2 py-0.5 text-[11px] font-medium rounded-full bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 border border-stone-200 dark:border-neutral-800">
       {t('connections.comingSoon')}
     </span>
   ) : option.statusLabel ? (
-    <span className="px-2 py-0.5 text-[11px] font-medium rounded-full bg-sage-50 text-sage-700 border border-sage-200">
+    <span className="px-2 py-0.5 text-[11px] font-medium rounded-full bg-sage-50 dark:bg-sage-500/10 text-sage-700 dark:text-sage-300 border border-sage-200 dark:border-sage-500/30">
       {option.statusLabel}
     </span>
   ) : (
-    <span className="px-2 py-0.5 text-[11px] font-medium rounded-full bg-primary-50 text-primary-600 border border-primary-100">
+    <span className="px-2 py-0.5 text-[11px] font-medium rounded-full bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300 border border-primary-100 dark:border-primary-500/30">
       {t('connections.setUp')}
     </span>
   );
@@ -53,20 +53,24 @@ function ConnectionOptionRow({
     <button
       onClick={() => onConnect(option)}
       disabled={isDisabled}
-      className={`group w-full flex items-center justify-between p-4 bg-white text-left transition-colors duration-150 ${
-        isLast ? '' : 'border-b border-stone-200'
+      className={`group w-full flex items-center justify-between p-4 bg-white dark:bg-neutral-900 text-left transition-colors duration-150 ${
+        isLast ? '' : 'border-b border-stone-200 dark:border-neutral-800'
       } ${isFirst ? 'rounded-t-2xl' : ''} ${isLast ? 'rounded-b-2xl' : ''} ${
-        isDisabled ? 'opacity-70 cursor-not-allowed' : 'hover:bg-stone-50 focus-visible:bg-stone-50'
+        isDisabled
+          ? 'opacity-70 cursor-not-allowed'
+          : 'hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 focus-visible:bg-stone-50 dark:bg-neutral-800/60 dark:focus-visible:bg-neutral-800/60'
       } focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40`}>
       <div
-        className={`w-5 h-5 flex-shrink-0 mr-3 text-stone-700 ${
+        className={`w-5 h-5 flex-shrink-0 mr-3 text-stone-700 dark:text-neutral-200 ${
           isDisabled ? 'opacity-50' : 'opacity-80 group-hover:opacity-100'
         } transition-opacity`}>
         {option.icon}
       </div>
       <div className="flex-1 min-w-0">
-        <div className="font-medium text-sm text-stone-900 leading-snug">{option.name}</div>
-        <p className="text-xs text-stone-500 mt-0.5 leading-relaxed truncate">
+        <div className="font-medium text-sm text-stone-900 dark:text-neutral-100 leading-snug">
+          {option.name}
+        </div>
+        <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5 leading-relaxed truncate">
           {option.description}
         </p>
       </div>
@@ -169,7 +173,7 @@ const ConnectionsPanel = () => {
 
       <div>
         <div className="p-4 space-y-4">
-          <div className="rounded-2xl border border-stone-200 overflow-hidden bg-white">
+          <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 overflow-hidden bg-white dark:bg-neutral-900">
             {connectOptions.map((option, index) => (
               <ConnectionOptionRow
                 key={option.id}
@@ -183,23 +187,25 @@ const ConnectionsPanel = () => {
           </div>
 
           {walletConfigured && walletStatus ? (
-            <div className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+            <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
               <div>
-                <p className="font-medium text-stone-900 text-sm">
+                <p className="font-medium text-stone-900 dark:text-neutral-100 text-sm">
                   {t('connections.walletIdentities')}
                 </p>
-                <p className="text-xs text-stone-500 mt-1">{t('connections.walletDerived')}</p>
+                <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+                  {t('connections.walletDerived')}
+                </p>
               </div>
               <div className="grid gap-2">
                 {walletStatus.accounts.map(account => (
                   <div
                     key={account.chain}
-                    className="rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
+                    className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
                     <div className="flex items-center justify-between gap-3">
-                      <span className="text-xs font-semibold uppercase tracking-wide text-stone-500">
+                      <span className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                         {account.chain}
                       </span>
-                      <span className="text-xs font-mono text-stone-700 truncate">
+                      <span className="text-xs font-mono text-stone-700 dark:text-neutral-200 truncate">
                         {account.address}
                       </span>
                     </div>
@@ -209,10 +215,10 @@ const ConnectionsPanel = () => {
             </div>
           ) : null}
 
-          <div className="p-4 bg-stone-50 rounded-xl border border-stone-200">
+          <div className="p-4 bg-stone-50 dark:bg-neutral-800/60 rounded-xl border border-stone-200 dark:border-neutral-800">
             <div className="flex items-start space-x-3">
               <svg
-                className="w-5 h-5 text-stone-400 mt-0.5 flex-shrink-0"
+                className="w-5 h-5 text-stone-400 dark:text-neutral-500 mt-0.5 flex-shrink-0"
                 fill="currentColor"
                 viewBox="0 0 20 20">
                 <path
@@ -222,10 +228,10 @@ const ConnectionsPanel = () => {
                 />
               </svg>
               <div>
-                <p className="font-medium text-stone-900 text-sm">
+                <p className="font-medium text-stone-900 dark:text-neutral-100 text-sm">
                   {t('connections.privacySecurity')}
                 </p>
-                <p className="text-xs text-stone-500 mt-1 leading-relaxed">
+                <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1 leading-relaxed">
                   {t('connections.privacySecurityDesc')}
                 </p>
               </div>
diff --git a/app/src/components/settings/panels/CronJobsPanel.tsx b/app/src/components/settings/panels/CronJobsPanel.tsx
index 4b2df181e..4749fa079 100644
--- a/app/src/components/settings/panels/CronJobsPanel.tsx
+++ b/app/src/components/settings/panels/CronJobsPanel.tsx
@@ -141,12 +141,14 @@ const CronJobsPanel = () => {
 
       <div className="p-4 space-y-4">
         <section className="space-y-1">
-          <h3 className="text-sm font-semibold text-stone-900">{t('cron.scheduledJobs')}</h3>
-          <p className="text-xs text-stone-400">{t('cron.manageCronJobs')}</p>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('cron.scheduledJobs')}
+          </h3>
+          <p className="text-xs text-stone-400 dark:text-neutral-500">{t('cron.manageCronJobs')}</p>
         </section>
 
         {coreError && (
-          <div className="rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-700">
+          <div className="rounded-lg border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-300">
             {coreError}
           </div>
         )}
diff --git a/app/src/components/settings/panels/DeveloperOptionsPanel.tsx b/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
index 5707becf5..a6074848d 100644
--- a/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
+++ b/app/src/components/settings/panels/DeveloperOptionsPanel.tsx
@@ -245,48 +245,58 @@ const CoreModeBadge = () => {
 
   if (mode.kind === 'unset') {
     return (
-      <div className="px-4 py-3 rounded-lg border border-coral-300 bg-coral-50">
-        <div className="text-sm font-semibold text-coral-900">{t('devOptions.coreModeNotSet')}</div>
-        <div className="text-xs text-coral-800 mt-0.5">{t('devOptions.coreModeNotSetDesc')}</div>
+      <div className="px-4 py-3 rounded-lg border border-coral-300 dark:border-coral-500/40 bg-coral-50 dark:bg-coral-500/10 dark:border-coral-500/30">
+        <div className="text-sm font-semibold text-coral-900 dark:text-coral-300">
+          {t('devOptions.coreModeNotSet')}
+        </div>
+        <div className="text-xs text-coral-800 dark:text-coral-200 mt-0.5">
+          {t('devOptions.coreModeNotSetDesc')}
+        </div>
       </div>
     );
   }
 
   if (mode.kind === 'local') {
     return (
-      <div className="px-4 py-3 rounded-lg border border-primary-300 bg-primary-50">
+      <div className="px-4 py-3 rounded-lg border border-primary-300 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/10 dark:border-primary-500/30">
         <div className="flex items-center gap-2">
           <span className="px-2 py-0.5 rounded-full bg-primary-600 text-white text-[11px] font-medium">
             {t('devOptions.local')}
           </span>
-          <span className="text-sm font-semibold text-primary-900">
+          <span className="text-sm font-semibold text-primary-900 dark:text-primary-200">
             {t('devOptions.embeddedCoreSidecar')}
           </span>
         </div>
-        <div className="text-xs text-primary-800 mt-1">{t('devOptions.sidecarSpawned')}</div>
+        <div className="text-xs text-primary-800 dark:text-primary-200 mt-1">
+          {t('devOptions.sidecarSpawned')}
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="px-4 py-3 rounded-lg border border-sage-300 bg-sage-50">
+    <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-sage-50 dark:bg-sage-500/10 dark:border-sage-500/30">
       <div className="flex items-center gap-2">
         <span className="px-2 py-0.5 rounded-full bg-sage-600 text-white text-[11px] font-medium">
           {t('devOptions.cloud')}
         </span>
-        <span className="text-sm font-semibold text-sage-900">{t('devOptions.remoteCoreRpc')}</span>
+        <span className="text-sm font-semibold text-sage-900 dark:text-sage-200">
+          {t('devOptions.remoteCoreRpc')}
+        </span>
       </div>
       <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs">
-        <dt className="text-sage-700">URL:</dt>
-        <dd className="font-mono text-sage-900 truncate" title={mode.url}>
+        <dt className="text-sage-700 dark:text-sage-300">URL:</dt>
+        <dd className="font-mono text-sage-900 dark:text-sage-200 truncate" title={mode.url}>
           {mode.url}
         </dd>
-        <dt className="text-sage-700">{t('devOptions.token')}:</dt>
-        <dd className="text-sage-900">
+        <dt className="text-sage-700 dark:text-sage-300">{t('devOptions.token')}:</dt>
+        <dd className="text-sage-900 dark:text-sage-200">
           {mode.token ? (
             <span className="font-mono">••••••{mode.token.slice(-4)}</span>
           ) : (
-            <span className="text-coral-600">{t('devOptions.tokenNotSet')}</span>
+            <span className="text-coral-600 dark:text-coral-300">
+              {t('devOptions.tokenNotSet')}
+            </span>
           )}
         </dd>
       </dl>
@@ -315,13 +325,13 @@ const SentryTestRow = () => {
   };
 
   return (
-    <div className="px-4 py-3 rounded-lg border border-amber-300 bg-amber-50">
+    <div className="px-4 py-3 rounded-lg border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 dark:border-amber-500/30">
       <div className="flex items-center justify-between gap-3">
         <div className="min-w-0">
-          <div className="text-sm font-semibold text-amber-900">
+          <div className="text-sm font-semibold text-amber-900 dark:text-amber-300">
             {t('devOptions.triggerSentryTest')}
           </div>
-          <div className="text-xs text-amber-800 mt-0.5">
+          <div className="text-xs text-amber-800 dark:text-amber-200 mt-0.5">
             {t('devOptions.triggerSentryTestDesc')}
           </div>
         </div>
@@ -334,7 +344,7 @@ const SentryTestRow = () => {
       </div>
       <div role="status" aria-live="polite" aria-atomic="true" className="mt-2 text-xs">
         {status.kind === 'sent' && (
-          <span className="text-amber-900">
+          <span className="text-amber-900 dark:text-amber-300">
             {t('devOptions.eventSent')}.{' '}
             {status.eventId ? (
               <span className="font-mono">id: {status.eventId}</span>
@@ -344,7 +354,7 @@ const SentryTestRow = () => {
           </span>
         )}
         {status.kind === 'error' && (
-          <span className="text-coral-600">
+          <span className="text-coral-600 dark:text-coral-300">
             {t('devOptions.failed')}: {status.message}
           </span>
         )}
@@ -379,12 +389,20 @@ const LogsFolderRow = () => {
   if (!isTauri()) return null;
 
   return (
-    <div className="px-4 py-3 rounded-lg border border-slate-200 bg-slate-50">
+    <div className="px-4 py-3 rounded-lg border border-slate-200 dark:border-neutral-800 bg-slate-50 dark:bg-neutral-800/60">
       <div className="flex items-center justify-between gap-3">
         <div className="min-w-0">
-          <div className="text-sm font-semibold text-slate-900">{t('devOptions.appLogs')}</div>
-          <div className="text-xs text-slate-700 mt-0.5">{t('devOptions.appLogsDesc')}</div>
-          {path && <div className="text-[11px] text-slate-500 mt-1 font-mono truncate">{path}</div>}
+          <div className="text-sm font-semibold text-slate-900 dark:text-neutral-100">
+            {t('devOptions.appLogs')}
+          </div>
+          <div className="text-xs text-slate-700 dark:text-neutral-300 mt-0.5">
+            {t('devOptions.appLogsDesc')}
+          </div>
+          {path && (
+            <div className="text-[11px] text-slate-500 dark:text-neutral-400 mt-1 font-mono truncate">
+              {path}
+            </div>
+          )}
         </div>
         <button
           onClick={onClick}
@@ -393,7 +411,10 @@ const LogsFolderRow = () => {
         </button>
       </div>
       {error && (
-        <div role="status" aria-live="polite" className="mt-2 text-xs text-coral-600">
+        <div
+          role="status"
+          aria-live="polite"
+          className="mt-2 text-xs text-coral-600 dark:text-coral-300">
           {error}
         </div>
       )}
diff --git a/app/src/components/settings/panels/LocalModelDebugPanel.tsx b/app/src/components/settings/panels/LocalModelDebugPanel.tsx
index 25a8efcc8..ec721da88 100644
--- a/app/src/components/settings/panels/LocalModelDebugPanel.tsx
+++ b/app/src/components/settings/panels/LocalModelDebugPanel.tsx
@@ -35,17 +35,17 @@ import ModelStatusSection from './local-model/ModelStatusSection';
 const statusTone = (state: string): string => {
   switch (state) {
     case 'ready':
-      return 'text-green-600';
+      return 'text-green-600 dark:text-green-300';
     case 'downloading':
     case 'installing':
     case 'loading':
-      return 'text-primary-600';
+      return 'text-primary-600 dark:text-primary-300';
     case 'degraded':
-      return 'text-amber-700';
+      return 'text-amber-700 dark:text-amber-300';
     case 'disabled':
-      return 'text-stone-500';
+      return 'text-stone-500 dark:text-neutral-400';
     default:
-      return 'text-stone-700';
+      return 'text-stone-700 dark:text-neutral-200';
   }
 };
 
diff --git a/app/src/components/settings/panels/MascotPanel.tsx b/app/src/components/settings/panels/MascotPanel.tsx
index 840155448..d32d24b62 100644
--- a/app/src/components/settings/panels/MascotPanel.tsx
+++ b/app/src/components/settings/panels/MascotPanel.tsx
@@ -120,12 +120,14 @@ const MascotPanel = () => {
 
       <div className="p-4 space-y-4">
         <div>
-          <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-2 px-1">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-2 px-1">
             {t('settings.mascot.colorHeading')}
           </h3>
-          <div className="bg-white rounded-xl border border-stone-200 overflow-hidden">
+          <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 overflow-hidden">
             {available.length === 0 ? (
-              <p className="p-4 text-sm text-stone-500">{t('settings.mascot.noColorVariants')}</p>
+              <p className="p-4 text-sm text-stone-500 dark:text-neutral-400">
+                {t('settings.mascot.noColorVariants')}
+              </p>
             ) : (
               <div
                 className="grid grid-cols-5 gap-3 p-4"
@@ -144,55 +146,67 @@ const MascotPanel = () => {
                       onClick={() => handleSelect(opt.id)}
                       data-testid={`mascot-color-${opt.id}`}
                       className={`flex flex-col items-center gap-2 rounded-lg p-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 ${
-                        selected ? 'bg-stone-100' : 'hover:bg-stone-50'
+                        selected
+                          ? 'bg-stone-100 dark:bg-neutral-800'
+                          : 'hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60'
                       }`}>
                       <span
                         className={`w-10 h-10 rounded-full border-2 transition-shadow ${
-                          selected ? 'border-primary-500 shadow-soft' : 'border-stone-200'
+                          selected
+                            ? 'border-primary-500 shadow-soft'
+                            : 'border-stone-200 dark:border-neutral-800'
                         }`}
                         style={{ backgroundColor: palette.bodyFill }}
                       />
-                      <span className="text-xs text-stone-700">{opt.label}</span>
+                      <span className="text-xs text-stone-700 dark:text-neutral-200">
+                        {opt.label}
+                      </span>
                     </button>
                   );
                 })}
               </div>
             )}
           </div>
-          <p className="text-xs text-stone-500 leading-relaxed px-1 mt-2">
+          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
             {t('settings.mascot.colorDesc')}
           </p>
         </div>
 
         <div>
-          <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-2 px-1">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-2 px-1">
             {t('settings.mascot.characterHeading')}
           </h3>
-          <div className="bg-white rounded-xl border border-stone-200 overflow-hidden">
+          <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 overflow-hidden">
             {backendListError && (
-              <p className="p-4 text-sm text-coral-700">
+              <p className="p-4 text-sm text-coral-700 dark:text-coral-300">
                 OpenHuman library unavailable: {backendListError}
               </p>
             )}
             {!backendListError && backendList === null && (
-              <p className="p-4 text-sm text-stone-500">{t('settings.mascot.loadingLibrary')}</p>
+              <p className="p-4 text-sm text-stone-500 dark:text-neutral-400">
+                {t('settings.mascot.loadingLibrary')}
+              </p>
             )}
             {backendList && backendList.length === 0 && !backendListError && (
-              <p className="p-4 text-sm text-stone-500">{t('settings.mascot.noCharacters')}</p>
+              <p className="p-4 text-sm text-stone-500 dark:text-neutral-400">
+                {t('settings.mascot.noCharacters')}
+              </p>
             )}
             {backendList && backendList.length > 0 && (
-              <ul className="divide-y divide-stone-100">
+              <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
                 <li>
                   <button
                     type="button"
                     onClick={() => handleSelectBackend(null)}
                     aria-pressed={selectedMascotId == null}
-                    className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-stone-50 ${
-                      selectedMascotId == null ? 'bg-stone-50 font-medium' : ''
+                    className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 ${
+                      selectedMascotId == null
+                        ? 'bg-stone-50 dark:bg-neutral-800/60 font-medium'
+                        : ''
                     }`}>
                     <span>{t('settings.mascot.localDefault')}</span>
                     {selectedMascotId == null && (
-                      <span className="text-[10px] uppercase text-primary-600">
+                      <span className="text-[10px] uppercase text-primary-600 dark:text-primary-300">
                         {t('settings.mascot.active')}
                       </span>
                     )}
@@ -207,18 +221,18 @@ const MascotPanel = () => {
                         onClick={() => handleSelectBackend(summary.id)}
                         aria-pressed={active}
                         data-testid={`backend-mascot-${summary.id}`}
-                        className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-stone-50 ${
-                          active ? 'bg-stone-50 font-medium' : ''
+                        className={`flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60 ${
+                          active ? 'bg-stone-50 dark:bg-neutral-800/60 font-medium' : ''
                         }`}>
                         <span className="flex flex-col">
                           <span>{summary.name}</span>
-                          <span className="text-[10px] text-stone-500">
+                          <span className="text-[10px] text-stone-500 dark:text-neutral-400">
                             v{summary.version} · {summary.states.length} states
                             {summary.hasVisemes ? ' · visemes' : ''}
                           </span>
                         </span>
                         {active && (
-                          <span className="text-[10px] uppercase text-primary-600">
+                          <span className="text-[10px] uppercase text-primary-600 dark:text-primary-300">
                             {t('settings.mascot.active')}
                           </span>
                         )}
@@ -231,8 +245,8 @@ const MascotPanel = () => {
           </div>
 
           {activeDetail && (
-            <div className="mt-3 rounded-xl border border-stone-200 bg-stone-50 p-4">
-              <p className="text-[11px] font-medium uppercase tracking-wide text-stone-500 mb-2">
+            <div className="mt-3 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
+              <p className="text-[11px] font-medium uppercase tracking-wide text-stone-500 dark:text-neutral-400 mb-2">
                 Preview · {activeDetail.name}
               </p>
               <div className="flex justify-center">
@@ -242,8 +256,10 @@ const MascotPanel = () => {
               </div>
             </div>
           )}
-          {detailError && <p className="mt-2 text-xs text-coral-700 px-1">{detailError}</p>}
-          <p className="text-xs text-stone-500 leading-relaxed px-1 mt-2">
+          {detailError && (
+            <p className="mt-2 text-xs text-coral-700 dark:text-coral-300 px-1">{detailError}</p>
+          )}
+          <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
             {t('settings.mascot.characterDesc')}
           </p>
         </div>
diff --git a/app/src/components/settings/panels/MemoryDebugPanel.tsx b/app/src/components/settings/panels/MemoryDebugPanel.tsx
index 5dff680a4..08274ee9b 100644
--- a/app/src/components/settings/panels/MemoryDebugPanel.tsx
+++ b/app/src/components/settings/panels/MemoryDebugPanel.tsx
@@ -183,47 +183,53 @@ const MemoryDebugPanel = () => {
       <div className="p-4 space-y-4">
         {/* Documents */}
         <section className="space-y-2">
-          <h3 className="text-sm font-semibold text-stone-900">Documents</h3>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">Documents</h3>
           <div className="flex gap-2">
             <input
               value={documentsNamespaceFilter}
               onChange={e => setDocumentsNamespaceFilter(e.target.value)}
-              className="flex-1 rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+              className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500"
               placeholder="Filter by namespace..."
             />
             <button
               type="button"
               onClick={() => void loadDocuments()}
               disabled={documentsLoading}
-              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50">
               {documentsLoading ? '...' : 'Refresh'}
             </button>
           </div>
           {documentsError && (
-            <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+            <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
               {documentsError}
             </div>
           )}
           {documents.length === 0 && !documentsLoading ? (
-            <p className="text-xs text-stone-400">No documents found.</p>
+            <p className="text-xs text-stone-400 dark:text-neutral-500">No documents found.</p>
           ) : (
             <div className="space-y-1">
               {documents.map(doc => (
                 <div
                   key={`${doc.namespace}:${doc.documentId}`}
-                  className="flex items-start justify-between gap-2 rounded-lg border border-stone-200 bg-stone-50 p-2">
+                  className="flex items-start justify-between gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2">
                   <div className="min-w-0">
-                    <div className="text-xs font-medium text-stone-900 break-all">
+                    <div className="text-xs font-medium text-stone-900 dark:text-neutral-100 break-all">
                       {doc.documentId}
                     </div>
-                    <div className="text-[11px] text-stone-500 break-all">{doc.namespace}</div>
-                    {doc.title && <div className="text-[11px] text-stone-400">{doc.title}</div>}
+                    <div className="text-[11px] text-stone-500 dark:text-neutral-400 break-all">
+                      {doc.namespace}
+                    </div>
+                    {doc.title && (
+                      <div className="text-[11px] text-stone-400 dark:text-neutral-500">
+                        {doc.title}
+                      </div>
+                    )}
                   </div>
                   <button
                     type="button"
                     disabled={Boolean(deleteLoadingId)}
                     onClick={() => void handleDelete(doc)}
-                    className="shrink-0 rounded border border-stone-200 px-2 py-1 text-[10px] text-stone-500 hover:bg-stone-100 disabled:opacity-50">
+                    className="shrink-0 rounded border border-stone-200 dark:border-neutral-800 px-2 py-1 text-[10px] text-stone-500 dark:text-neutral-400 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50">
                     {deleteLoadingId === doc.documentId ? '...' : 'Delete'}
                   </button>
                 </div>
@@ -231,8 +237,10 @@ const MemoryDebugPanel = () => {
             </div>
           )}
           <details className="text-xs">
-            <summary className="cursor-pointer text-stone-400">Raw response</summary>
-            <pre className="mt-1 max-h-32 overflow-auto rounded-lg border border-stone-200 bg-stone-950 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
+            <summary className="cursor-pointer text-stone-400 dark:text-neutral-500">
+              Raw response
+            </summary>
+            <pre className="mt-1 max-h-32 overflow-auto rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-950 dark:bg-neutral-50 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
               {JSON.stringify(documentsRaw, null, 2)}
             </pre>
           </details>
@@ -241,17 +249,19 @@ const MemoryDebugPanel = () => {
         {/* Namespaces */}
         <section className="space-y-2">
           <div className="flex items-center justify-between">
-            <h3 className="text-sm font-semibold text-stone-900">Namespaces</h3>
+            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+              Namespaces
+            </h3>
             <button
               type="button"
               onClick={() => void loadNamespaces()}
               disabled={namespacesLoading}
-              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1 text-[11px] font-medium text-stone-600 hover:bg-stone-100 disabled:opacity-50">
+              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1 text-[11px] font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50">
               {namespacesLoading ? '...' : 'Refresh'}
             </button>
           </div>
           {namespacesError && (
-            <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+            <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
               {namespacesError}
             </div>
           )}
@@ -260,29 +270,31 @@ const MemoryDebugPanel = () => {
               {namespaces.map(ns => (
                 <span
                   key={ns}
-                  className="rounded-full bg-stone-100 px-2 py-0.5 text-[11px] text-stone-600">
+                  className="rounded-full bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-[11px] text-stone-600 dark:text-neutral-300">
                   {ns}
                 </span>
               ))}
             </div>
           ) : (
-            <p className="text-xs text-stone-400">No namespaces found.</p>
+            <p className="text-xs text-stone-400 dark:text-neutral-500">No namespaces found.</p>
           )}
         </section>
 
         {/* Query & Recall */}
         <section className="space-y-2">
-          <h3 className="text-sm font-semibold text-stone-900">Query & Recall</h3>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            Query & Recall
+          </h3>
           <input
             value={namespaceInput}
             onChange={e => setNamespaceInput(e.target.value)}
-            className="w-full rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+            className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500"
             placeholder="Namespace"
           />
           <textarea
             value={queryInput}
             onChange={e => setQueryInput(e.target.value)}
-            className="w-full rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+            className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500"
             rows={2}
             placeholder="Query text..."
           />
@@ -290,47 +302,55 @@ const MemoryDebugPanel = () => {
             <input
               value={maxChunksInput}
               onChange={e => setMaxChunksInput(e.target.value)}
-              className="w-16 rounded-lg border border-stone-200 bg-stone-50 px-2 py-1.5 text-xs text-stone-700"
+              className="w-16 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-2 py-1.5 text-xs text-stone-700 dark:text-neutral-200"
               placeholder="10"
             />
-            <span className="text-[11px] text-stone-400">max chunks</span>
+            <span className="text-[11px] text-stone-400 dark:text-neutral-500">max chunks</span>
             <div className="flex-1" />
             <button
               type="button"
               onClick={() => void handleQuery()}
               disabled={queryLoading || !namespaceInput.trim() || !queryInput.trim()}
-              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50">
               {queryLoading ? '...' : 'Query'}
             </button>
             <button
               type="button"
               onClick={() => void handleRecall()}
               disabled={recallLoading || !namespaceInput.trim()}
-              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50">
               {recallLoading ? '...' : 'Recall'}
             </button>
           </div>
-          {queryError && <div className="text-xs text-coral-600">Query: {queryError}</div>}
-          {recallError && <div className="text-xs text-coral-600">Recall: {recallError}</div>}
+          {queryError && (
+            <div className="text-xs text-coral-600 dark:text-coral-300">Query: {queryError}</div>
+          )}
+          {recallError && (
+            <div className="text-xs text-coral-600 dark:text-coral-300">Recall: {recallError}</div>
+          )}
           {(queryResult || recallResult) && (
             <div className="space-y-2">
               {queryResult && (
                 <div>
-                  <div className="text-[11px] font-medium text-stone-500 mb-1">Query result</div>
+                  <div className="text-[11px] font-medium text-stone-500 dark:text-neutral-400 mb-1">
+                    Query result
+                  </div>
                   <MemoryTextWithEntities
                     text={queryResult.text ?? ''}
                     entities={queryResult.entities}
-                    className="rounded-lg border border-stone-200 bg-stone-50 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
+                    className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
                   />
                 </div>
               )}
               {recallResult && (
                 <div>
-                  <div className="text-[11px] font-medium text-stone-500 mb-1">Recall result</div>
+                  <div className="text-[11px] font-medium text-stone-500 dark:text-neutral-400 mb-1">
+                    Recall result
+                  </div>
                   <MemoryTextWithEntities
                     text={recallResult.text ?? ''}
                     entities={recallResult.entities}
-                    className="rounded-lg border border-stone-200 bg-stone-50 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
+                    className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-[11px] leading-5 min-h-12 whitespace-pre-wrap"
                   />
                 </div>
               )}
@@ -340,8 +360,10 @@ const MemoryDebugPanel = () => {
 
         {/* Clear Namespace */}
         <section className="space-y-2">
-          <h3 className="text-sm font-semibold text-stone-900">Clear Namespace</h3>
-          <p className="text-xs text-stone-400">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            Clear Namespace
+          </h3>
+          <p className="text-xs text-stone-400 dark:text-neutral-500">
             Permanently delete all documents within a namespace.
           </p>
           <div className="flex gap-2">
@@ -349,7 +371,7 @@ const MemoryDebugPanel = () => {
               <select
                 value={clearNamespaceInput}
                 onChange={e => setClearNamespaceInput(e.target.value)}
-                className="flex-1 rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700">
+                className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200">
                 <option value="">Select namespace...</option>
                 {namespaces.map(ns => (
                   <option key={ns} value={ns}>
@@ -361,7 +383,7 @@ const MemoryDebugPanel = () => {
               <input
                 value={clearNamespaceInput}
                 onChange={e => setClearNamespaceInput(e.target.value)}
-                className="flex-1 rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-700 placeholder:text-stone-400"
+                className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500"
                 placeholder="e.g. skill:gmail:user@example.com"
               />
             )}
@@ -369,12 +391,16 @@ const MemoryDebugPanel = () => {
               type="button"
               onClick={() => void handleClearNamespace()}
               disabled={clearLoading || !clearNamespaceInput.trim()}
-              className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-1.5 text-xs font-medium text-coral-600 hover:bg-coral-100 disabled:opacity-50">
+              className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-1.5 text-xs font-medium text-coral-600 dark:text-coral-300 hover:bg-coral-100 dark:bg-coral-500/20 disabled:opacity-50">
               {clearLoading ? '...' : 'Clear'}
             </button>
           </div>
-          {clearSuccess && <div className="text-xs text-sage-600">{clearSuccess}</div>}
-          {clearError && <div className="text-xs text-coral-600">{clearError}</div>}
+          {clearSuccess && (
+            <div className="text-xs text-sage-600 dark:text-sage-300">{clearSuccess}</div>
+          )}
+          {clearError && (
+            <div className="text-xs text-coral-600 dark:text-coral-300">{clearError}</div>
+          )}
         </section>
       </div>
     </div>
diff --git a/app/src/components/settings/panels/MessagingPanel.tsx b/app/src/components/settings/panels/MessagingPanel.tsx
index 01164d9a9..68e53bb51 100644
--- a/app/src/components/settings/panels/MessagingPanel.tsx
+++ b/app/src/components/settings/panels/MessagingPanel.tsx
@@ -26,7 +26,7 @@ function statusDot(status: ChannelConnectionStatus): string {
     case 'error':
       return 'bg-coral-500';
     default:
-      return 'bg-stone-300';
+      return 'bg-stone-300 dark:bg-neutral-700';
   }
 }
 
@@ -46,13 +46,13 @@ function statusLabel(status: ChannelConnectionStatus, t: (key: string) => string
 function statusColor(status: ChannelConnectionStatus): string {
   switch (status) {
     case 'connected':
-      return 'text-sage-600';
+      return 'text-sage-600 dark:text-sage-300';
     case 'connecting':
-      return 'text-amber-600';
+      return 'text-amber-600 dark:text-amber-300';
     case 'error':
-      return 'text-coral-600';
+      return 'text-coral-600 dark:text-coral-300';
     default:
-      return 'text-stone-400';
+      return 'text-stone-400 dark:text-neutral-500';
   }
 }
 
@@ -115,8 +115,10 @@ const MessagingPanel = () => {
 
       <div className="p-4 space-y-4">
         {/* Default channel selector */}
-        <section className="rounded-xl border border-stone-200 bg-white p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">{t('channels.defaultMessaging')}</h3>
+        <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {t('channels.defaultMessaging')}
+          </h3>
           <div className="grid grid-cols-2 gap-2">
             {definitions.map(def => {
               const channelId = def.id as ChannelType;
@@ -130,17 +132,17 @@ const MessagingPanel = () => {
                   disabled={busy[busyKey]}
                   className={`rounded-lg border px-3 py-2 text-sm transition-colors ${
                     selected
-                      ? 'border-primary-500/60 bg-primary-50 text-primary-600'
-                      : 'border-stone-200 bg-stone-50 text-stone-600 hover:border-stone-300'
+                      ? 'border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300'
+                      : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:border-neutral-700 dark:hover:border-neutral-700'
                   }`}>
                   {def.display_name}
                 </button>
               );
             })}
           </div>
-          <p className="text-xs text-stone-400">
+          <p className="text-xs text-stone-400 dark:text-neutral-500">
             {t('channels.activeRoute')}:{' '}
-            <span className="text-primary-600">{recommendedRoute}</span>
+            <span className="text-primary-600 dark:text-primary-300">{recommendedRoute}</span>
           </p>
         </section>
 
@@ -151,18 +153,20 @@ const MessagingPanel = () => {
         )}
 
         {loading && (
-          <div className="rounded-xl border border-stone-200 bg-white p-4 text-sm text-stone-400">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 text-sm text-stone-400 dark:text-neutral-500">
             {t('channels.loadingDefinitions')}
           </div>
         )}
 
         {/* Channel cards — click to open the shared ChannelSetupModal */}
         {!loading && (
-          <section className="rounded-xl border border-stone-200 bg-white p-4 space-y-3">
-            <h3 className="text-sm font-semibold text-stone-900">
+          <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
               {t('channels.channelConnections')}
             </h3>
-            <p className="text-xs text-stone-400">{t('channels.configureAuthModes')}</p>
+            <p className="text-xs text-stone-400 dark:text-neutral-500">
+              {t('channels.configureAuthModes')}
+            </p>
             <div className="space-y-2">
               {configurableChannels.map(def => {
                 const channelId = def.id as ChannelType;
@@ -174,12 +178,12 @@ const MessagingPanel = () => {
                     key={channelId}
                     type="button"
                     onClick={() => setChannelModalDef(def)}
-                    className="w-full rounded-lg border border-stone-200 bg-stone-50 p-3 text-left transition-colors hover:bg-white hover:border-stone-300">
+                    className="w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 text-left transition-colors hover:bg-white dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:border-stone-300 dark:border-neutral-700 dark:hover:border-neutral-700">
                     <div className="flex items-center gap-3">
                       <span className="text-lg flex-shrink-0">{icon}</span>
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2">
-                          <span className="text-sm font-medium text-stone-900">
+                          <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                             {def.display_name}
                           </span>
                           <div
@@ -189,10 +193,12 @@ const MessagingPanel = () => {
                             {statusLabel(status, t)}
                           </span>
                         </div>
-                        <p className="text-xs text-stone-500 mt-0.5">{def.description}</p>
+                        <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+                          {def.description}
+                        </p>
                       </div>
                       <svg
-                        className="w-4 h-4 text-stone-400 flex-shrink-0"
+                        className="w-4 h-4 text-stone-400 dark:text-neutral-500 flex-shrink-0"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
diff --git a/app/src/components/settings/panels/NotificationRoutingPanel.tsx b/app/src/components/settings/panels/NotificationRoutingPanel.tsx
index bb723c29a..93ac74a70 100644
--- a/app/src/components/settings/panels/NotificationRoutingPanel.tsx
+++ b/app/src/components/settings/panels/NotificationRoutingPanel.tsx
@@ -113,19 +113,23 @@ const NotificationRoutingPanel = () => {
 
       <div className="p-4 space-y-4">
         {stats && (
-          <div className="bg-white border border-stone-200 rounded-xl overflow-hidden">
-            <div className="px-4 py-3 border-b border-stone-100">
-              <p className="text-sm font-medium text-stone-900">Pipeline stats</p>
+          <div className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-xl overflow-hidden">
+            <div className="px-4 py-3 border-b border-stone-100 dark:border-neutral-800">
+              <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                Pipeline stats
+              </p>
             </div>
-            <div className="grid grid-cols-3 divide-x divide-stone-100">
+            <div className="grid grid-cols-3 divide-x divide-stone-100 dark:divide-neutral-800">
               {[
                 { label: 'Total', value: stats.total },
                 { label: 'Unread', value: stats.unread },
                 { label: 'Unscored', value: stats.unscored },
               ].map(({ label, value }) => (
                 <div key={label} className="px-4 py-3 text-center">
-                  <p className="text-lg font-semibold text-stone-900">{value}</p>
-                  <p className="text-xs text-stone-500">{label}</p>
+                  <p className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+                    {value}
+                  </p>
+                  <p className="text-xs text-stone-500 dark:text-neutral-400">{label}</p>
                 </div>
               ))}
             </div>
@@ -133,10 +137,10 @@ const NotificationRoutingPanel = () => {
         )}
 
         {/* Info card */}
-        <div className="p-4 bg-blue-50 border border-blue-200 rounded-xl">
+        <div className="p-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-xl">
           <div className="flex items-start space-x-3">
             <svg
-              className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"
+              className="w-5 h-5 text-blue-600 dark:text-blue-300 flex-shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -148,8 +152,10 @@ const NotificationRoutingPanel = () => {
               />
             </svg>
             <div>
-              <p className="font-medium text-blue-800 text-sm">Notification Intelligence</p>
-              <p className="text-blue-700 text-xs mt-1 leading-relaxed">
+              <p className="font-medium text-blue-800 dark:text-blue-200 text-sm">
+                Notification Intelligence
+              </p>
+              <p className="text-blue-700 dark:text-blue-300 text-xs mt-1 leading-relaxed">
                 Every notification from your connected accounts is scored by a local AI model.
                 High-importance notifications are automatically routed to your orchestrator agent so
                 nothing critical slips through.
@@ -159,31 +165,31 @@ const NotificationRoutingPanel = () => {
         </div>
 
         {/* How it works */}
-        <div className="bg-white border border-stone-200 rounded-xl overflow-hidden">
-          <div className="px-4 py-3 border-b border-stone-100">
-            <p className="text-sm font-medium text-stone-900">How it works</p>
+        <div className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-xl overflow-hidden">
+          <div className="px-4 py-3 border-b border-stone-100 dark:border-neutral-800">
+            <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">How it works</p>
           </div>
-          <div className="divide-y divide-stone-100">
+          <div className="divide-y divide-stone-100 dark:divide-neutral-800">
             {[
               {
                 label: 'Drop',
                 desc: 'Noise / spam — stored but not surfaced',
-                color: 'bg-stone-100 text-stone-600',
+                color: 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300',
               },
               {
                 label: 'Acknowledge',
                 desc: 'Low-priority — shown in notification center',
-                color: 'bg-blue-100 text-blue-700',
+                color: 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300',
               },
               {
                 label: 'React',
                 desc: 'Medium-priority — triggers a focused agent response',
-                color: 'bg-amber-100 text-amber-700',
+                color: 'bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300',
               },
               {
                 label: 'Escalate',
                 desc: 'High-priority — forwarded to orchestrator agent',
-                color: 'bg-red-100 text-red-700',
+                color: 'bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-300',
               },
             ].map(row => (
               <div key={row.label} className="flex items-center gap-3 px-4 py-3">
@@ -191,17 +197,19 @@ const NotificationRoutingPanel = () => {
                   className={`flex-shrink-0 px-2 py-0.5 rounded text-[11px] font-semibold ${row.color}`}>
                   {row.label}
                 </span>
-                <span className="text-xs text-stone-600">{row.desc}</span>
+                <span className="text-xs text-stone-600 dark:text-neutral-300">{row.desc}</span>
               </div>
             ))}
           </div>
         </div>
 
-        <div className="bg-white border border-stone-200 rounded-xl overflow-hidden">
-          <div className="px-4 py-3 border-b border-stone-100">
-            <p className="text-sm font-medium text-stone-900">Per-provider routing</p>
+        <div className="bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-xl overflow-hidden">
+          <div className="px-4 py-3 border-b border-stone-100 dark:border-neutral-800">
+            <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+              Per-provider routing
+            </p>
           </div>
-          <div className="divide-y divide-stone-100">
+          <div className="divide-y divide-stone-100 dark:divide-neutral-800">
             {providers.map(provider => {
               const hasLoadError = Boolean(loadErrors[provider]);
               const isLoaded = Boolean(loadedProviders[provider]);
@@ -214,8 +222,10 @@ const NotificationRoutingPanel = () => {
               return (
                 <div key={provider} className="px-4 py-3 space-y-2">
                   <div className="flex items-center justify-between">
-                    <p className="text-sm font-medium text-stone-800 capitalize">{provider}</p>
-                    <label className="text-xs text-stone-600 flex items-center gap-2">
+                    <p className="text-sm font-medium text-stone-800 dark:text-neutral-100 capitalize">
+                      {provider}
+                    </p>
+                    <label className="text-xs text-stone-600 dark:text-neutral-300 flex items-center gap-2">
                       Enabled
                       <input
                         type="checkbox"
@@ -227,7 +237,7 @@ const NotificationRoutingPanel = () => {
                       />
                     </label>
                   </div>
-                  <label className="flex items-center gap-2 text-xs text-stone-600">
+                  <label className="flex items-center gap-2 text-xs text-stone-600 dark:text-neutral-300">
                     Threshold
                     <input
                       className="flex-1"
@@ -245,7 +255,7 @@ const NotificationRoutingPanel = () => {
                     />
                     <span>{s.importance_threshold.toFixed(2)}</span>
                   </label>
-                  <label className="text-xs text-stone-600 flex items-center gap-2">
+                  <label className="text-xs text-stone-600 dark:text-neutral-300 flex items-center gap-2">
                     Route to orchestrator
                     <input
                       type="checkbox"
@@ -257,7 +267,7 @@ const NotificationRoutingPanel = () => {
                     />
                   </label>
                   {hasLoadError ? (
-                    <p className="text-xs text-red-600">
+                    <p className="text-xs text-red-600 dark:text-red-300">
                       Failed to load settings. Reopen this panel to retry.
                     </p>
                   ) : null}
diff --git a/app/src/components/settings/panels/NotificationsPanel.tsx b/app/src/components/settings/panels/NotificationsPanel.tsx
index 15622ffba..bff94d3c2 100644
--- a/app/src/components/settings/panels/NotificationsPanel.tsx
+++ b/app/src/components/settings/panels/NotificationsPanel.tsx
@@ -89,21 +89,21 @@ const NotificationsPanel = () => {
         <div className="p-4 space-y-4">
           {/* Do Not Disturb */}
           <div>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-2 px-1">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-2 px-1">
               {t('settings.notifications.doNotDisturb')}
             </h3>
-            <div className="bg-white rounded-xl border border-stone-200 overflow-hidden">
+            <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 overflow-hidden">
               <div className="flex items-center justify-between p-4">
                 <div className="flex-1 mr-4">
-                  <p className="text-sm font-medium text-stone-900">
+                  <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                     {t('settings.notifications.suppressAll')}
                   </p>
-                  <p className="text-xs text-stone-500 mt-1 leading-relaxed">
+                  <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1 leading-relaxed">
                     {t('settings.notifications.suppressAllDesc')}
                   </p>
                 </div>
                 {dndLoading ? (
-                  <div className="w-11 h-6 rounded-full bg-stone-200 animate-pulse" />
+                  <div className="w-11 h-6 rounded-full bg-stone-200 dark:bg-neutral-800 animate-pulse" />
                 ) : (
                   <button
                     onClick={() => {
@@ -111,13 +111,13 @@ const NotificationsPanel = () => {
                     }}
                     disabled={dndSaving}
                     className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 disabled:opacity-70 ${
-                      dnd ? 'bg-primary-500' : 'bg-stone-400'
+                      dnd ? 'bg-primary-500' : 'bg-stone-400 dark:bg-neutral-600'
                     }`}
                     role="switch"
                     aria-checked={dnd}
                     aria-label={t('settings.notifications.toggleDnd')}>
                     <span
-                      className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                      className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-neutral-900 shadow ring-0 transition duration-200 ease-in-out ${
                         dnd ? 'translate-x-5' : 'translate-x-0'
                       }`}
                     />
@@ -129,30 +129,32 @@ const NotificationsPanel = () => {
 
           {/* Categories */}
           <div>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-2 px-1">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-2 px-1">
               {t('settings.notifications.categories')}
             </h3>
-            <div className="bg-white rounded-xl border border-stone-200 overflow-hidden divide-y divide-stone-100">
+            <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 overflow-hidden divide-y divide-stone-100 dark:divide-neutral-800">
               {CATEGORIES.map(cat => {
                 const enabled = preferences[cat.id];
                 return (
                   <div key={cat.id} className="flex items-center justify-between p-4">
                     <div className="flex-1 mr-4">
-                      <p className="text-sm font-medium text-stone-900">{cat.title}</p>
-                      <p className="text-xs text-stone-500 mt-1 leading-relaxed">
+                      <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                        {cat.title}
+                      </p>
+                      <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1 leading-relaxed">
                         {cat.description}
                       </p>
                     </div>
                     <button
                       onClick={() => handleToggle(cat.id)}
                       className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 ${
-                        enabled ? 'bg-primary-500' : 'bg-stone-400'
+                        enabled ? 'bg-primary-500' : 'bg-stone-400 dark:bg-neutral-600'
                       }`}
                       role="switch"
                       aria-checked={enabled}
                       aria-label={`Toggle ${cat.title} notifications`}>
                       <span
-                        className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                        className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-neutral-900 shadow ring-0 transition duration-200 ease-in-out ${
                           enabled ? 'translate-x-5' : 'translate-x-0'
                         }`}
                       />
@@ -162,7 +164,7 @@ const NotificationsPanel = () => {
               })}
             </div>
 
-            <p className="text-xs text-stone-500 leading-relaxed px-1 mt-2">
+            <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed px-1 mt-2">
               {t('settings.notifications.categoryFooter')}
             </p>
           </div>
diff --git a/app/src/components/settings/panels/PrivacyPanel.tsx b/app/src/components/settings/panels/PrivacyPanel.tsx
index c8e1119ae..ca07edf20 100644
--- a/app/src/components/settings/panels/PrivacyPanel.tsx
+++ b/app/src/components/settings/panels/PrivacyPanel.tsx
@@ -19,11 +19,15 @@ interface AnnotatedCapability extends Capability {
 }
 
 const KIND_BADGE_CLASS: Record<PrivacyDataKind, string> = {
-  raw: 'bg-sage-50 text-sage-700 border-sage-200',
-  derived: 'bg-amber-50 text-amber-700 border-amber-200',
-  credentials: 'bg-stone-100 text-stone-700 border-stone-200',
-  diagnostics: 'bg-primary-50 text-primary-700 border-primary-200',
-  metadata: 'bg-stone-50 text-stone-600 border-stone-200',
+  raw: 'bg-sage-50 dark:bg-sage-500/10 text-sage-700 dark:text-sage-300 border-sage-200 dark:border-sage-500/30',
+  derived:
+    'bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-500/30',
+  credentials:
+    'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 border-stone-200 dark:border-neutral-800',
+  diagnostics:
+    'bg-primary-50 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 border-primary-200 dark:border-primary-500/30',
+  metadata:
+    'bg-stone-50 dark:bg-neutral-800/60 text-stone-600 dark:text-neutral-300 border-stone-200 dark:border-neutral-800',
 };
 
 function kindLabel(kind: PrivacyDataKind, t: (key: string) => string): string {
@@ -105,33 +109,43 @@ const PrivacyPanel = () => {
         <div className="p-4 space-y-4">
           {/* What leaves my computer */}
           <div>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-3 px-1">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-3 px-1">
               {t('privacy.whatLeavesComputer')}
             </h3>
-            <div className="bg-white rounded-xl border border-stone-200 overflow-hidden">
+            <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 overflow-hidden">
               {loadState === 'loading' && (
-                <p className="p-4 text-xs text-stone-500">{t('privacy.loading')}</p>
+                <p className="p-4 text-xs text-stone-500 dark:text-neutral-400">
+                  {t('privacy.loading')}
+                </p>
               )}
               {loadState === 'error' && (
-                <p className="p-4 text-xs text-stone-500" data-testid="privacy-load-error">
+                <p
+                  className="p-4 text-xs text-stone-500 dark:text-neutral-400"
+                  data-testid="privacy-load-error">
                   {t('privacy.loadError')}
                 </p>
               )}
               {loadState === 'ready' && capabilities.length === 0 && (
-                <p className="p-4 text-xs text-stone-500">{t('privacy.noCapabilities')}</p>
+                <p className="p-4 text-xs text-stone-500 dark:text-neutral-400">
+                  {t('privacy.noCapabilities')}
+                </p>
               )}
               {loadState === 'ready' && capabilities.length > 0 && (
-                <ul className="divide-y divide-stone-100" data-testid="privacy-capability-list">
+                <ul
+                  className="divide-y divide-stone-100 dark:divide-neutral-800"
+                  data-testid="privacy-capability-list">
                   {capabilities.map(cap => (
                     <li key={cap.id} className="p-4" data-testid={`privacy-row-${cap.id}`}>
                       <div className="flex items-start justify-between gap-3">
                         <div className="flex-1 min-w-0">
-                          <p className="text-sm font-medium text-stone-900">{cap.name}</p>
-                          <p className="text-xs text-stone-500 mt-1 leading-relaxed">
+                          <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                            {cap.name}
+                          </p>
+                          <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1 leading-relaxed">
                             {cap.description}
                           </p>
                           {cap.privacy.destinations.length > 0 && (
-                            <p className="text-xs text-stone-400 mt-1">
+                            <p className="text-xs text-stone-400 dark:text-neutral-500 mt-1">
                               {t('privacy.sentTo')}: {cap.privacy.destinations.join(', ')}
                             </p>
                           )}
@@ -141,7 +155,7 @@ const PrivacyPanel = () => {
                             className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded border ${KIND_BADGE_CLASS[cap.privacy.data_kind]}`}>
                             {kindLabel(cap.privacy.data_kind, t)}
                           </span>
-                          <span className="text-[10px] text-stone-500">
+                          <span className="text-[10px] text-stone-500 dark:text-neutral-400">
                             {cap.privacy.leaves_device
                               ? t('privacy.leavesDevice')
                               : t('privacy.staysLocal')}
@@ -157,16 +171,16 @@ const PrivacyPanel = () => {
 
           {/* Analytics Section */}
           <div>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-3 px-1">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-3 px-1">
               {t('privacy.anonymizedAnalytics')}
             </h3>
-            <div className="bg-white rounded-xl border border-stone-200 overflow-hidden">
+            <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 overflow-hidden">
               <div className="flex items-center justify-between p-4">
                 <div className="flex-1 mr-4">
-                  <p className="text-sm font-medium text-stone-900">
+                  <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                     {t('privacy.shareAnonymizedData')}
                   </p>
-                  <p className="text-xs text-stone-500 mt-1 leading-relaxed">
+                  <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1 leading-relaxed">
                     {t('privacy.shareAnonymizedDataDesc')}
                   </p>
                 </div>
@@ -175,12 +189,12 @@ const PrivacyPanel = () => {
                   onClick={handleToggleAnalytics}
                   data-testid="privacy-analytics-toggle"
                   className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                    analyticsEnabled ? 'bg-primary-500' : 'bg-stone-600'
+                    analyticsEnabled ? 'bg-primary-500' : 'bg-stone-600 dark:bg-neutral-600'
                   }`}
                   role="switch"
                   aria-checked={analyticsEnabled}>
                   <span
-                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-neutral-900 shadow ring-0 transition duration-200 ease-in-out ${
                       analyticsEnabled ? 'translate-x-5' : 'translate-x-0'
                     }`}
                   />
@@ -191,16 +205,16 @@ const PrivacyPanel = () => {
 
           {/* Meeting Follow-ups Section (#1299) */}
           <div>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-3 px-1">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-400 dark:text-neutral-500 mb-3 px-1">
               {t('privacy.meetingFollowUps')}
             </h3>
-            <div className="bg-white rounded-xl border border-stone-200 overflow-hidden">
+            <div className="bg-white dark:bg-neutral-900 rounded-xl border border-stone-200 dark:border-neutral-800 overflow-hidden">
               <div className="flex items-center justify-between p-4">
                 <div className="flex-1 mr-4">
-                  <p className="text-sm font-medium text-stone-900">
+                  <p className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                     {t('privacy.autoHandoffMeet')}
                   </p>
-                  <p className="text-xs text-stone-500 mt-1 leading-relaxed">
+                  <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1 leading-relaxed">
                     {t('privacy.autoHandoffMeetDesc')}
                   </p>
                 </div>
@@ -209,12 +223,12 @@ const PrivacyPanel = () => {
                   onClick={handleToggleMeetAutoHandoff}
                   aria-label="Auto-handoff Google Meet transcripts to the orchestrator"
                   className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                    meetAutoHandoff ? 'bg-primary-500' : 'bg-stone-600'
+                    meetAutoHandoff ? 'bg-primary-500' : 'bg-stone-600 dark:bg-neutral-600'
                   }`}
                   role="switch"
                   aria-checked={meetAutoHandoff}>
                   <span
-                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-neutral-900 shadow ring-0 transition duration-200 ease-in-out ${
                       meetAutoHandoff ? 'translate-x-5' : 'translate-x-0'
                     }`}
                   />
@@ -224,10 +238,10 @@ const PrivacyPanel = () => {
           </div>
 
           {/* Info Box */}
-          <div className="p-4 bg-stone-50 rounded-xl border border-stone-200">
+          <div className="p-4 bg-stone-50 dark:bg-neutral-800/60 rounded-xl border border-stone-200 dark:border-neutral-800">
             <div className="flex items-start space-x-3">
               <svg
-                className="w-5 h-5 text-stone-400 mt-0.5 flex-shrink-0"
+                className="w-5 h-5 text-stone-400 dark:text-neutral-500 mt-0.5 flex-shrink-0"
                 fill="currentColor"
                 viewBox="0 0 20 20">
                 <path
@@ -237,7 +251,7 @@ const PrivacyPanel = () => {
                 />
               </svg>
               <div>
-                <p className="text-xs text-stone-500 leading-relaxed">
+                <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                   {t('privacy.analyticsDisclaimer')}
                   All analytics and bug reports are fully anonymized. When enabled, we collect crash
                   information and device type (via Sentry), plus anonymous usage analytics such as
diff --git a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
index 86aae3fda..23f10ec7a 100644
--- a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
+++ b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
@@ -223,20 +223,22 @@ const RecoveryPhrasePanel = () => {
                 </svg>
               </div>
               <p className="text-sm font-medium text-sage-500">{t('mnemonic.phraseSaved')}</p>
-              <p className="text-xs text-stone-500">{t('mnemonic.walletReady')}</p>
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
+                {t('mnemonic.walletReady')}
+              </p>
             </div>
           ) : (
             <>
               {mode === 'generate' ? (
                 <>
                   <div className="mb-4 space-y-3">
-                    <p className="text-sm text-stone-600 leading-relaxed">
+                    <p className="text-sm text-stone-600 dark:text-neutral-300 leading-relaxed">
                       {t('mnemonic.writeDownWords')} {MNEMONIC_GENERATE_WORD_COUNT}{' '}
                       {t('mnemonic.wordsInOrder')}
                     </p>
-                    <div className="flex items-start gap-2.5 p-3 rounded-xl bg-amber-50 border border-amber-200/70">
+                    <div className="flex items-start gap-2.5 p-3 rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30">
                       <svg
-                        className="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5"
+                        className="w-4 h-4 text-amber-600 dark:text-amber-300 flex-shrink-0 mt-0.5"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -247,19 +249,19 @@ const RecoveryPhrasePanel = () => {
                           d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
                         />
                       </svg>
-                      <p className="text-xs text-amber-800 leading-relaxed">
+                      <p className="text-xs text-amber-800 dark:text-amber-200 leading-relaxed">
                         {t('mnemonic.cannotRecover')}
                       </p>
                     </div>
                   </div>
 
-                  <div className="bg-stone-50 rounded-2xl p-4 mb-4 border border-stone-200">
+                  <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-2xl p-4 mb-4 border border-stone-200 dark:border-neutral-800">
                     <div className="grid grid-cols-3 gap-2">
                       {words.map((word, index) => (
                         <div
                           key={index}
-                          className="flex items-center gap-2 bg-white rounded-lg px-3 py-2 text-sm border border-stone-200">
-                          <span className="text-stone-500 font-mono text-xs w-5 text-right">
+                          className="flex items-center gap-2 bg-white dark:bg-neutral-900 rounded-lg px-3 py-2 text-sm border border-stone-200 dark:border-neutral-800">
+                          <span className="text-stone-500 dark:text-neutral-400 font-mono text-xs w-5 text-right">
                             {index + 1}.
                           </span>
                           <span className="font-mono font-medium">{word}</span>
@@ -270,7 +272,7 @@ const RecoveryPhrasePanel = () => {
 
                   <button
                     onClick={handleCopy}
-                    className="w-full flex items-center justify-center gap-2 border border-stone-200 hover:border-stone-300 font-medium py-2.5 text-sm rounded-xl text-stone-700 transition-all duration-200 mb-3">
+                    className="w-full flex items-center justify-center gap-2 border border-stone-200 dark:border-neutral-800 hover:border-stone-300 dark:border-neutral-700 dark:hover:border-neutral-700 font-medium py-2.5 text-sm rounded-xl text-stone-700 dark:text-neutral-200 transition-all duration-200 mb-3">
                     {copied ? (
                       <>
                         <svg
@@ -304,7 +306,7 @@ const RecoveryPhrasePanel = () => {
 
                   <button
                     onClick={() => switchMode('import')}
-                    className="w-full text-center text-sm text-primary-400 hover:text-primary-600 transition-colors mb-3">
+                    className="w-full text-center text-sm text-primary-400 hover:text-primary-600 dark:text-primary-300 transition-colors mb-3">
                     {t('mnemonic.alreadyHavePhrase')}
                   </button>
 
@@ -315,19 +317,23 @@ const RecoveryPhrasePanel = () => {
                       onChange={e => setConfirmed(e.target.checked)}
                       className="mt-0.5 w-4 h-4 rounded border-stone-500 text-primary-500 focus:ring-primary-500"
                     />
-                    <span className="text-sm text-stone-700">{t('mnemonic.consentSaved')}</span>
+                    <span className="text-sm text-stone-700 dark:text-neutral-200">
+                      {t('mnemonic.consentSaved')}
+                    </span>
                   </label>
                 </>
               ) : (
                 <>
                   <div className="mb-4">
-                    <p className="text-sm text-stone-600 leading-relaxed">
+                    <p className="text-sm text-stone-600 dark:text-neutral-300 leading-relaxed">
                       {t('mnemonic.enterPhraseToRestore')}
                     </p>
                   </div>
 
                   <div className="flex items-center gap-2 mb-3">
-                    <span className="text-xs text-stone-500">{t('mnemonic.words')}:</span>
+                    <span className="text-xs text-stone-500 dark:text-neutral-400">
+                      {t('mnemonic.words')}:
+                    </span>
                     {BIP39_IMPORT_LENGTHS.map(len => (
                       <button
                         key={len}
@@ -335,19 +341,19 @@ const RecoveryPhrasePanel = () => {
                         onClick={() => handleWordCountChange(len)}
                         className={`px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
                           selectedWordCount === len
-                            ? 'bg-primary-500/20 border-primary-500/40 text-primary-600 border'
-                            : 'border border-stone-200 text-stone-500 hover:border-stone-300'
+                            ? 'bg-primary-500/20 border-primary-500/40 text-primary-600 dark:text-primary-300 border'
+                            : 'border border-stone-200 dark:border-neutral-800 text-stone-500 dark:text-neutral-400 hover:border-stone-300 dark:border-neutral-700'
                         }`}>
                         {len}
                       </button>
                     ))}
                   </div>
 
-                  <div className="bg-stone-50 rounded-2xl p-4 mb-4 border border-stone-200">
+                  <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-2xl p-4 mb-4 border border-stone-200 dark:border-neutral-800">
                     <div className="grid grid-cols-3 gap-2">
                       {importWords.map((word, index) => (
                         <div key={index} className="flex items-center gap-1.5">
-                          <span className="text-stone-500 font-mono text-xs w-5 text-right shrink-0">
+                          <span className="text-stone-500 dark:text-neutral-400 font-mono text-xs w-5 text-right shrink-0">
                             {index + 1}.
                           </span>
                           <input
@@ -361,12 +367,12 @@ const RecoveryPhrasePanel = () => {
                             onKeyDown={e => handleImportKeyDown(index, e)}
                             autoComplete="off"
                             spellCheck={false}
-                            className={`w-full font-mono text-sm font-medium px-2 py-1.5 rounded-lg border bg-white text-stone-900 outline-none transition-colors ${
+                            className={`w-full font-mono text-sm font-medium px-2 py-1.5 rounded-lg border bg-white dark:bg-neutral-900 text-stone-900 dark:text-neutral-100 outline-none transition-colors ${
                               importValid === false && word.trim()
-                                ? 'border-coral-400 focus:border-coral-300'
+                                ? 'border-coral-400 focus:border-coral-300 dark:border-coral-500/40'
                                 : importValid === true
-                                  ? 'border-sage-400 focus:border-sage-300'
-                                  : 'border-stone-200 focus:border-primary-400'
+                                  ? 'border-sage-400 focus:border-sage-300 dark:border-sage-500/40'
+                                  : 'border-stone-200 dark:border-neutral-800 focus:border-primary-400'
                             }`}
                           />
                         </div>
@@ -390,7 +396,7 @@ const RecoveryPhrasePanel = () => {
 
                   <button
                     onClick={() => switchMode('generate')}
-                    className="w-full text-center text-sm text-primary-400 hover:text-primary-600 transition-colors mb-3">
+                    className="w-full text-center text-sm text-primary-400 hover:text-primary-600 dark:text-primary-300 transition-colors mb-3">
                     {t('mnemonic.generateNewPhrase')}
                   </button>
                 </>
@@ -399,7 +405,7 @@ const RecoveryPhrasePanel = () => {
               {error && (
                 <div
                   role="alert"
-                  className="flex items-start gap-2.5 p-3 mb-3 rounded-xl bg-coral-50 border border-coral-200/70">
+                  className="flex items-start gap-2.5 p-3 mb-3 rounded-xl bg-coral-50 dark:bg-coral-500/10 border border-coral-200 dark:border-coral-500/30">
                   <svg
                     className="w-4 h-4 text-coral-500 flex-shrink-0 mt-0.5"
                     fill="none"
@@ -412,7 +418,9 @@ const RecoveryPhrasePanel = () => {
                       d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
                     />
                   </svg>
-                  <p className="text-xs text-coral-700 leading-relaxed">{error}</p>
+                  <p className="text-xs text-coral-700 dark:text-coral-300 leading-relaxed">
+                    {error}
+                  </p>
                 </div>
               )}
 
diff --git a/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx b/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
index 12668c8bb..ca86d6b82 100644
--- a/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
+++ b/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
@@ -19,9 +19,11 @@ const DebugSection = ({
       <button
         type="button"
         onClick={() => setIsOpen(prev => !prev)}
-        className="flex w-full items-center justify-between text-sm font-semibold text-stone-900">
+        className="flex w-full items-center justify-between text-sm font-semibold text-stone-900 dark:text-neutral-100">
         <span>Debug & Diagnostics</span>
-        <span className="text-xs text-stone-400">{isOpen ? 'Collapse' : 'Expand'}</span>
+        <span className="text-xs text-stone-400 dark:text-neutral-500">
+          {isOpen ? 'Collapse' : 'Expand'}
+        </span>
       </button>
       {isOpen && <ScreenIntelligenceDebugPanel state={state} />}
     </section>
@@ -110,10 +112,12 @@ const ScreenAwarenessDebugPanel = () => {
       <div className="max-w-2xl mx-auto w-full p-4 space-y-4">
         {/* Advanced policy settings */}
         <section className="space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">Screen Intelligence Policy</h3>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            Screen Intelligence Policy
+          </h3>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">Baseline FPS</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">Baseline FPS</span>
             <input
               type="number"
               min={0.2}
@@ -121,14 +125,14 @@ const ScreenAwarenessDebugPanel = () => {
               step={0.1}
               value={baselineFps}
               onChange={event => setBaselineFps(event.target.value)}
-              className="w-24 rounded border border-stone-200 bg-white px-2 py-1 text-xs text-stone-700"
+              className="w-24 rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200"
             />
           </label>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
             <div>
-              <span className="text-sm text-stone-700">Use Vision Model</span>
-              <p className="text-xs text-stone-400">
+              <span className="text-sm text-stone-700 dark:text-neutral-200">Use Vision Model</span>
+              <p className="text-xs text-stone-400 dark:text-neutral-500">
                 Send screenshots to a vision LLM for richer context. When off, only OCR text is used
                 with a text LLM — faster and no vision model required.
               </p>
@@ -140,10 +144,10 @@ const ScreenAwarenessDebugPanel = () => {
             />
           </label>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
             <div>
-              <span className="text-sm text-stone-700">Keep Screenshots</span>
-              <p className="text-xs text-stone-400">
+              <span className="text-sm text-stone-700 dark:text-neutral-200">Keep Screenshots</span>
+              <p className="text-xs text-stone-400 dark:text-neutral-500">
                 Save captured screenshots to the workspace instead of deleting after processing
               </p>
             </div>
@@ -155,22 +159,26 @@ const ScreenAwarenessDebugPanel = () => {
           </label>
 
           <div className="space-y-1">
-            <div className="text-xs text-stone-600">Allowlist (one rule per line)</div>
+            <div className="text-xs text-stone-600 dark:text-neutral-300">
+              Allowlist (one rule per line)
+            </div>
             <textarea
               value={allowlistText}
               onChange={event => setAllowlistText(event.target.value)}
               rows={3}
-              className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+              className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
             />
           </div>
 
           <div className="space-y-1">
-            <div className="text-xs text-stone-600">Denylist (one rule per line)</div>
+            <div className="text-xs text-stone-600 dark:text-neutral-300">
+              Denylist (one rule per line)
+            </div>
             <textarea
               value={denylistText}
               onChange={event => setDenylistText(event.target.value)}
               rows={3}
-              className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+              className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
             />
           </div>
 
@@ -178,16 +186,20 @@ const ScreenAwarenessDebugPanel = () => {
             type="button"
             onClick={() => void saveConfig()}
             disabled={isSavingConfig}
-            className="rounded-lg border border-primary-400 bg-primary-50 px-3 py-2 text-sm text-primary-700 disabled:opacity-50">
+            className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
             {isSavingConfig ? 'Saving…' : 'Save Screen Intelligence Settings'}
           </button>
-          {configError && <div className="text-xs text-red-600">{configError}</div>}
+          {configError && (
+            <div className="text-xs text-red-600 dark:text-red-300">{configError}</div>
+          )}
         </section>
 
         {/* Session stats */}
         <section className="space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">Session Stats</h3>
-          <div className="text-sm text-stone-600 space-y-1">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            Session Stats
+          </h3>
+          <div className="text-sm text-stone-600 dark:text-neutral-300 space-y-1">
             <div>Frames (ephemeral): {status?.session.frames_in_memory ?? 0}</div>
             <div>Panic stop: {status?.session.panic_hotkey ?? 'Cmd+Shift+.'}</div>
             <div>Vision: {status?.session.vision_state ?? 'idle'}</div>
@@ -204,30 +216,34 @@ const ScreenAwarenessDebugPanel = () => {
         {/* Vision summaries */}
         <section className="space-y-3">
           <div className="flex items-center justify-between">
-            <h3 className="text-sm font-semibold text-stone-900">Vision Summaries</h3>
+            <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+              Vision Summaries
+            </h3>
             <button
               type="button"
               onClick={() => void refreshVision(10)}
               disabled={isLoadingVision}
-              className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 text-xs text-stone-600 disabled:opacity-50">
+              className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 text-xs text-stone-600 dark:text-neutral-300 disabled:opacity-50">
               {isLoadingVision ? 'Refreshing…' : 'Refresh'}
             </button>
           </div>
 
           {recentVisionSummaries.length === 0 ? (
-            <div className="text-xs text-stone-500">No summaries yet.</div>
+            <div className="text-xs text-stone-500 dark:text-neutral-400">No summaries yet.</div>
           ) : (
             <div className="space-y-2">
               {recentVisionSummaries.map(summary => (
                 <div
                   key={summary.id}
-                  className="rounded-xl border border-stone-200 bg-white p-3 text-xs text-stone-200">
-                  <div className="text-stone-500">
+                  className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 text-xs text-stone-200">
+                  <div className="text-stone-500 dark:text-neutral-400">
                     {new Date(summary.captured_at_ms).toLocaleTimeString()} ·{' '}
                     {summary.app_name ?? 'Unknown App'}
                     {summary.window_title ? ` · ${summary.window_title}` : ''}
                   </div>
-                  <div className="mt-1 text-stone-800">{summary.actionable_notes}</div>
+                  <div className="mt-1 text-stone-800 dark:text-neutral-100">
+                    {summary.actionable_notes}
+                  </div>
                 </div>
               ))}
             </div>
@@ -250,14 +266,14 @@ const ScreenAwarenessDebugPanel = () => {
 
         {/* Platform unsupported notice */}
         {status !== null && !status.platform_supported && (
-          <div className="rounded-xl border border-amber-300 bg-amber-50 p-3 text-sm text-amber-700">
+          <div className="rounded-xl border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
             Screen Intelligence V1 is currently supported on macOS only.
           </div>
         )}
 
         {/* Error notice */}
         {lastError && (
-          <div className="rounded-xl border border-red-300 bg-red-50 p-3 text-sm text-red-600">
+          <div className="rounded-xl border border-red-300 dark:border-red-500/40 bg-red-50 dark:bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-300">
             {lastError}
           </div>
         )}
diff --git a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
index 5a6025fb9..be1f7a88a 100644
--- a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
+++ b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
@@ -136,12 +136,14 @@ const ScreenIntelligencePanel = () => {
         )}
 
         <section className="space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {t('settings.features.screenAwareness')}
           </h3>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">{t('common.enabled')}</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">
+              {t('common.enabled')}
+            </span>
             <input
               type="checkbox"
               checked={enabled}
@@ -149,8 +151,10 @@ const ScreenIntelligencePanel = () => {
             />
           </label>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">{t('settings.screenAwareness.mode')}</span>
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">
+              {t('settings.screenAwareness.mode')}
+            </span>
             <select
               value={policyMode}
               onChange={event =>
@@ -160,7 +164,7 @@ const ScreenIntelligencePanel = () => {
                     : 'all_except_blacklist'
                 )
               }
-              className="rounded border border-stone-200 bg-white px-2 py-1 text-xs text-stone-700">
+              className="rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200">
               <option value="all_except_blacklist">
                 {t('settings.screenAwareness.allExceptBlacklist')}
               </option>
@@ -168,8 +172,8 @@ const ScreenIntelligencePanel = () => {
             </select>
           </label>
 
-          <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <span className="text-sm text-stone-700">
+          <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <span className="text-sm text-stone-700 dark:text-neutral-200">
               {t('settings.screenAwareness.screenMonitoring')}
             </span>
             <input
@@ -188,17 +192,19 @@ const ScreenIntelligencePanel = () => {
             type="button"
             onClick={() => void saveConfig()}
             disabled={isSavingConfig}
-            className="rounded-lg border border-primary-400 bg-primary-50 px-3 py-2 text-sm text-primary-700 disabled:opacity-50">
+            className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
             {isSavingConfig ? 'Saving…' : t('settings.screenAwareness.saveSettings')}
           </button>
-          {configError && <div className="text-xs text-red-600">{configError}</div>}
+          {configError && (
+            <div className="text-xs text-red-600 dark:text-red-300">{configError}</div>
+          )}
         </section>
 
         <section className="space-y-3">
-          <h3 className="text-sm font-semibold text-stone-900">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {t('settings.screenAwareness.session')}
           </h3>
-          <div className="text-sm text-stone-600 space-y-1">
+          <div className="text-sm text-stone-600 dark:text-neutral-300 space-y-1">
             <div>
               {t('settings.screenAwareness.status')}:{' '}
               {status?.session.active
@@ -221,34 +227,34 @@ const ScreenIntelligencePanel = () => {
                 })
               }
               disabled={startDisabled}
-              className="rounded-lg border border-green-400 bg-green-50 px-3 py-2 text-sm text-green-700 disabled:opacity-50">
+              className="rounded-lg border border-green-400 bg-green-50 dark:bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-300 disabled:opacity-50">
               {isStartingSession ? 'Starting…' : t('settings.screenAwareness.startSession')}
             </button>
             <button
               type="button"
               onClick={() => void stopSession('manual_stop')}
               disabled={stopDisabled}
-              className="rounded-lg border border-red-400 bg-red-50 px-3 py-2 text-sm text-red-700 disabled:opacity-50">
+              className="rounded-lg border border-red-400 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300 disabled:opacity-50">
               {isStoppingSession ? 'Stopping…' : t('settings.screenAwareness.stopSession')}
             </button>
             <button
               type="button"
               onClick={() => void flushVision()}
               disabled={isFlushingVision || !status?.session.active}
-              className="rounded-lg border border-primary-400 bg-primary-50 px-3 py-2 text-sm text-primary-700 disabled:opacity-50">
+              className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
               {isFlushingVision ? 'Analyzing…' : t('settings.screenAwareness.analyzeNow')}
             </button>
           </div>
         </section>
 
         {status !== null && !status.platform_supported && (
-          <div className="rounded-xl border border-amber-300 bg-amber-50 p-3 text-sm text-amber-700">
+          <div className="rounded-xl border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 dark:border-amber-500/30 p-3 text-sm text-amber-700 dark:text-amber-300">
             {t('settings.screenAwareness.macosOnly')}
           </div>
         )}
 
         {lastError && (
-          <div className="rounded-xl border border-red-300 bg-red-50 p-3 text-sm text-red-600">
+          <div className="rounded-xl border border-red-300 dark:border-red-500/40 bg-red-50 dark:bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-300">
             {lastError}
           </div>
         )}
diff --git a/app/src/components/settings/panels/TeamInvitesPanel.tsx b/app/src/components/settings/panels/TeamInvitesPanel.tsx
index 109c080c1..e3df24b67 100644
--- a/app/src/components/settings/panels/TeamInvitesPanel.tsx
+++ b/app/src/components/settings/panels/TeamInvitesPanel.tsx
@@ -185,7 +185,10 @@ const TeamInvitesPanel = () => {
           {/* Invites list */}
           {isLoadingInvites && invites.length === 0 ? (
             <div className="flex items-center justify-center py-8">
-              <svg className="w-5 h-5 text-stone-500 animate-spin" fill="none" viewBox="0 0 24 24">
+              <svg
+                className="w-5 h-5 text-stone-500 dark:text-neutral-400 animate-spin"
+                fill="none"
+                viewBox="0 0 24 24">
                 <circle
                   className="opacity-25"
                   cx="12"
@@ -200,7 +203,9 @@ const TeamInvitesPanel = () => {
                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                 />
               </svg>
-              <span className="ml-3 text-sm text-stone-500">Loading invites...</span>
+              <span className="ml-3 text-sm text-stone-500 dark:text-neutral-400">
+                Loading invites...
+              </span>
             </div>
           ) : invites.length > 0 ? (
             <div className="space-y-2">
@@ -213,8 +218,8 @@ const TeamInvitesPanel = () => {
                     key={invite._id}
                     className={`rounded-xl border p-3 ${
                       isInactive
-                        ? 'border-stone-200 bg-stone-50 opacity-60'
-                        : 'border-stone-200 bg-white'
+                        ? 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 opacity-60'
+                        : 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900'
                     }`}>
                     <div className="flex items-center justify-between mb-2">
                       {/* Code with status label */}
@@ -222,8 +227,8 @@ const TeamInvitesPanel = () => {
                         <code
                           className={`text-sm font-mono px-2 py-1 rounded-lg ${
                             isInactive
-                              ? 'text-stone-500 bg-stone-100'
-                              : 'text-stone-900 bg-stone-200'
+                              ? 'text-stone-500 dark:text-neutral-400 bg-stone-100 dark:bg-neutral-800'
+                              : 'text-stone-900 dark:text-neutral-100 bg-stone-200 dark:bg-neutral-800'
                           }`}>
                           {invite.code}
                         </code>
@@ -245,8 +250,8 @@ const TeamInvitesPanel = () => {
                           disabled={status !== 'active'}
                           className={`p-1.5 rounded-lg transition-colors ${
                             status === 'active'
-                              ? 'text-stone-500 hover:text-stone-900 hover:bg-stone-100'
-                              : 'text-stone-600 cursor-not-allowed'
+                              ? 'text-stone-500 dark:text-neutral-400 hover:text-stone-900 dark:hover:text-neutral-100 hover:bg-stone-100 dark:hover:bg-neutral-800'
+                              : 'text-stone-600 dark:text-neutral-300 cursor-not-allowed'
                           }`}
                           aria-label="Copy invite code">
                           {copiedId === invite._id ? (
@@ -282,7 +287,7 @@ const TeamInvitesPanel = () => {
                           <button
                             onClick={() => handleRevoke(invite._id, invite.code)}
                             disabled={revokingId === invite._id}
-                            className="p-1.5 rounded-lg text-stone-500 hover:text-coral-400 hover:bg-coral-500/10 transition-colors disabled:opacity-50"
+                            className="p-1.5 rounded-lg text-stone-500 dark:text-neutral-400 hover:text-coral-400 hover:bg-coral-500/10 transition-colors disabled:opacity-50"
                             aria-label="Revoke invite">
                             <svg
                               className="w-4 h-4"
@@ -300,7 +305,7 @@ const TeamInvitesPanel = () => {
                         )}
                       </div>
                     </div>
-                    <div className="flex items-center gap-3 text-xs text-stone-500">
+                    <div className="flex items-center gap-3 text-xs text-stone-500 dark:text-neutral-400">
                       <span>
                         Uses: {invite.currentUses}
                         {invite.maxUses > 0 ? `/${invite.maxUses}` : ''}
@@ -318,7 +323,7 @@ const TeamInvitesPanel = () => {
           ) : (
             <div className="text-center py-8">
               <svg
-                className="w-10 h-10 mx-auto text-stone-600 mb-3"
+                className="w-10 h-10 mx-auto text-stone-600 dark:text-neutral-300 mb-3"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
@@ -329,8 +334,8 @@ const TeamInvitesPanel = () => {
                   d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                 />
               </svg>
-              <p className="text-sm text-stone-500">No invites yet</p>
-              <p className="text-xs text-stone-600 mt-1">
+              <p className="text-sm text-stone-500 dark:text-neutral-400">No invites yet</p>
+              <p className="text-xs text-stone-600 dark:text-neutral-300 mt-1">
                 Generate an invite code to share with others
               </p>
             </div>
@@ -339,8 +344,10 @@ const TeamInvitesPanel = () => {
           {/* Revoke Invite Confirmation Modal */}
           {inviteToRevoke && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
-              <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-sm font-semibold text-stone-900 mb-4">Revoke Invite Code</h3>
+              <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-stone-200 dark:border-neutral-800">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
+                  Revoke Invite Code
+                </h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -349,10 +356,10 @@ const TeamInvitesPanel = () => {
                 )}
 
                 <div className="space-y-4">
-                  <div className="text-sm text-stone-400">
+                  <div className="text-sm text-stone-400 dark:text-neutral-500">
                     <p>
                       Are you sure you want to revoke the invite code{' '}
-                      <code className="text-stone-900 bg-stone-100 px-1.5 py-0.5 rounded font-mono text-xs">
+                      <code className="text-stone-900 dark:text-neutral-100 bg-stone-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-xs">
                         {inviteToRevoke.code}
                       </code>
                       ?
@@ -366,7 +373,7 @@ const TeamInvitesPanel = () => {
                     <button
                       onClick={() => setInviteToRevoke(null)}
                       disabled={revokingId === inviteToRevoke.id}
-                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-700 transition-colors disabled:opacity-50">
+                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:hover:bg-neutral-700 text-stone-700 dark:text-neutral-200 transition-colors disabled:opacity-50">
                       Cancel
                     </button>
                     <button
diff --git a/app/src/components/settings/panels/TeamManagementPanel.tsx b/app/src/components/settings/panels/TeamManagementPanel.tsx
index eb18aa04a..fa2258d71 100644
--- a/app/src/components/settings/panels/TeamManagementPanel.tsx
+++ b/app/src/components/settings/panels/TeamManagementPanel.tsx
@@ -98,7 +98,7 @@ const TeamManagementPanel = () => {
           breadcrumbs={breadcrumbs}
         />
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm text-stone-500">{t('team.notFound')}</p>
+          <p className="text-sm text-stone-500 dark:text-neutral-400">{t('team.notFound')}</p>
         </div>
       </div>
     );
@@ -114,7 +114,7 @@ const TeamManagementPanel = () => {
           breadcrumbs={breadcrumbs}
         />
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm text-stone-500">{t('team.accessDenied')}</p>
+          <p className="text-sm text-stone-500 dark:text-neutral-400">{t('team.accessDenied')}</p>
         </div>
       </div>
     );
@@ -134,16 +134,18 @@ const TeamManagementPanel = () => {
       <div>
         <div className="p-4 space-y-4">
           {/* Team Info */}
-          <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
             <div className="flex items-center gap-3 mb-3">
-              <div className="w-10 h-10 rounded-lg bg-stone-200 flex items-center justify-center">
-                <span className="text-sm font-semibold text-stone-700">
+              <div className="w-10 h-10 rounded-lg bg-stone-200 dark:bg-neutral-800 flex items-center justify-center">
+                <span className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
                   {team.name.charAt(0).toUpperCase()}
                 </span>
               </div>
               <div>
-                <h3 className="text-sm font-semibold text-stone-900">{team.name}</h3>
-                <p className="text-xs text-stone-500">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                  {team.name}
+                </h3>
+                <p className="text-xs text-stone-500 dark:text-neutral-400">
                   {team.subscription.plan} Plan • Created{' '}
                   {new Date(team.createdAt).toLocaleDateString()}
                 </p>
@@ -153,14 +155,14 @@ const TeamManagementPanel = () => {
 
           {/* Management Options */}
           <div className="space-y-1">
-            <h3 className="text-xs font-medium text-stone-500 uppercase tracking-wider px-1 mb-3">
+            <h3 className="text-xs font-medium text-stone-500 dark:text-neutral-400 uppercase tracking-wider px-1 mb-3">
               Team Management
             </h3>
 
             {/* Members */}
             <button
               onClick={() => navigateToSettings(`team/manage/${teamId}/members`)}
-              className="w-full flex items-center justify-between p-3 rounded-xl border border-stone-200 bg-stone-50 hover:bg-stone-100 transition-all text-left">
+              className="w-full flex items-center justify-between p-3 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-all text-left">
               <div className="flex items-center gap-3">
                 <svg
                   className="w-5 h-5 text-primary-500"
@@ -175,12 +177,16 @@ const TeamManagementPanel = () => {
                   />
                 </svg>
                 <div>
-                  <div className="font-medium text-sm text-stone-900">Members</div>
-                  <p className="text-xs text-stone-500">Manage team members and roles</p>
+                  <div className="font-medium text-sm text-stone-900 dark:text-neutral-100">
+                    Members
+                  </div>
+                  <p className="text-xs text-stone-500 dark:text-neutral-400">
+                    Manage team members and roles
+                  </p>
                 </div>
               </div>
               <svg
-                className="w-4 h-4 text-stone-500"
+                className="w-4 h-4 text-stone-500 dark:text-neutral-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
@@ -196,7 +202,7 @@ const TeamManagementPanel = () => {
             {/* Invites */}
             <button
               onClick={() => navigateToSettings(`team/manage/${teamId}/invites`)}
-              className="w-full flex items-center justify-between p-3 rounded-xl border border-stone-200 bg-stone-50 hover:bg-stone-100 transition-all text-left">
+              className="w-full flex items-center justify-between p-3 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-all text-left">
               <div className="flex items-center gap-3">
                 <svg
                   className="w-5 h-5 text-primary-500"
@@ -211,12 +217,16 @@ const TeamManagementPanel = () => {
                   />
                 </svg>
                 <div>
-                  <div className="font-medium text-sm text-stone-900">Invites</div>
-                  <p className="text-xs text-stone-500">Generate and manage invite codes</p>
+                  <div className="font-medium text-sm text-stone-900 dark:text-neutral-100">
+                    Invites
+                  </div>
+                  <p className="text-xs text-stone-500 dark:text-neutral-400">
+                    Generate and manage invite codes
+                  </p>
                 </div>
               </div>
               <svg
-                className="w-4 h-4 text-stone-500"
+                className="w-4 h-4 text-stone-500 dark:text-neutral-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
@@ -232,7 +242,7 @@ const TeamManagementPanel = () => {
             {/* Edit Team Settings */}
             <button
               onClick={handleEditTeam}
-              className="w-full flex items-center justify-between p-3 rounded-xl border border-stone-200 bg-stone-50 hover:bg-stone-100 transition-all text-left">
+              className="w-full flex items-center justify-between p-3 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-all text-left">
               <div className="flex items-center gap-3">
                 <svg
                   className="w-5 h-5 text-primary-500"
@@ -247,12 +257,16 @@ const TeamManagementPanel = () => {
                   />
                 </svg>
                 <div>
-                  <div className="font-medium text-sm text-stone-900">Team Settings</div>
-                  <p className="text-xs text-stone-500">Edit team name and settings</p>
+                  <div className="font-medium text-sm text-stone-900 dark:text-neutral-100">
+                    Team Settings
+                  </div>
+                  <p className="text-xs text-stone-500 dark:text-neutral-400">
+                    Edit team name and settings
+                  </p>
                 </div>
               </div>
               <svg
-                className="w-4 h-4 text-stone-500"
+                className="w-4 h-4 text-stone-500 dark:text-neutral-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
@@ -285,7 +299,9 @@ const TeamManagementPanel = () => {
                   </svg>
                   <div>
                     <div className="font-medium text-sm text-coral-400">Delete Team</div>
-                    <p className="text-xs text-stone-500">Permanently delete this team</p>
+                    <p className="text-xs text-stone-500 dark:text-neutral-400">
+                      Permanently delete this team
+                    </p>
                   </div>
                 </div>
                 <svg
@@ -307,18 +323,20 @@ const TeamManagementPanel = () => {
           {/* Edit Team Modal */}
           {isEditModalOpen && (
             <div className="fixed inset-0 bg-stone-900/40 flex items-center justify-center z-50 p-4">
-              <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-sm font-semibold text-stone-900 mb-4">Edit Team Settings</h3>
+              <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-stone-200 dark:border-neutral-800">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
+                  Edit Team Settings
+                </h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
-                    <p className="text-xs text-coral-600">{error}</p>
+                    <p className="text-xs text-coral-600 dark:text-coral-300">{error}</p>
                   </div>
                 )}
 
                 <div className="space-y-4">
                   <div>
-                    <label className="block text-sm font-medium text-stone-700 mb-2">
+                    <label className="block text-sm font-medium text-stone-700 dark:text-neutral-200 mb-2">
                       Team Name
                     </label>
                     <input
@@ -326,7 +344,7 @@ const TeamManagementPanel = () => {
                       value={editTeamName}
                       onChange={e => setEditTeamName(e.target.value)}
                       onKeyDown={e => e.key === 'Enter' && handleUpdateTeam()}
-                      className="w-full px-3 py-2 text-sm bg-stone-50 border border-stone-200 rounded-xl text-stone-900 placeholder-stone-400 focus:outline-none focus:border-primary-500/50"
+                      className="w-full px-3 py-2 text-sm bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 rounded-xl text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:outline-none focus:border-primary-500/50"
                       placeholder="Enter team name"
                     />
                   </div>
@@ -335,7 +353,7 @@ const TeamManagementPanel = () => {
                     <button
                       onClick={() => setIsEditModalOpen(false)}
                       disabled={isUpdating}
-                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-700 transition-colors disabled:opacity-50">
+                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 transition-colors disabled:opacity-50">
                       Cancel
                     </button>
                     <button
@@ -353,20 +371,25 @@ const TeamManagementPanel = () => {
           {/* Delete Team Modal */}
           {isDeleteModalOpen && (
             <div className="fixed inset-0 bg-stone-900/40 flex items-center justify-center z-50 p-4">
-              <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-sm font-semibold text-stone-900 mb-4">Delete Team</h3>
+              <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-stone-200 dark:border-neutral-800">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
+                  Delete Team
+                </h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
-                    <p className="text-xs text-coral-600">{error}</p>
+                    <p className="text-xs text-coral-600 dark:text-coral-300">{error}</p>
                   </div>
                 )}
 
                 <div className="space-y-4">
-                  <div className="text-sm text-stone-400">
+                  <div className="text-sm text-stone-400 dark:text-neutral-500">
                     <p>
                       Are you sure you want to delete{' '}
-                      <strong className="text-stone-900">{teamEntry?.team.name}</strong>?
+                      <strong className="text-stone-900 dark:text-neutral-100">
+                        {teamEntry?.team.name}
+                      </strong>
+                      ?
                     </p>
                     <p className="mt-2 text-coral-400">
                       This action cannot be undone. All team data will be permanently removed.
@@ -377,7 +400,7 @@ const TeamManagementPanel = () => {
                     <button
                       onClick={() => setIsDeleteModalOpen(false)}
                       disabled={isDeleting}
-                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-700 transition-colors disabled:opacity-50">
+                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 transition-colors disabled:opacity-50">
                       Cancel
                     </button>
                     <button
diff --git a/app/src/components/settings/panels/TeamMembersPanel.tsx b/app/src/components/settings/panels/TeamMembersPanel.tsx
index b30b589ec..a7acaad0a 100644
--- a/app/src/components/settings/panels/TeamMembersPanel.tsx
+++ b/app/src/components/settings/panels/TeamMembersPanel.tsx
@@ -111,7 +111,8 @@ const TeamMembersPanel = () => {
   const roleBadgeColor: Record<string, string> = {
     ADMIN: 'bg-primary-500/20 text-primary-400 border-primary-500/30',
     BILLING_MANAGER: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
-    MEMBER: 'bg-stone-500/20 text-stone-400 border-stone-500/30',
+    MEMBER:
+      'bg-stone-50 dark:bg-neutral-800/60 text-stone-400 dark:text-neutral-500 border-stone-500/30',
   };
 
   return (
@@ -154,14 +155,17 @@ const TeamMembersPanel = () => {
           )}
 
           {/* Member count */}
-          <p className="text-xs text-stone-500 px-1">
+          <p className="text-xs text-stone-500 dark:text-neutral-400 px-1">
             {members.length} member{members.length !== 1 ? 's' : ''}
           </p>
 
           {/* Full loading state - only when loading and no existing data */}
           {isLoadingMembers && members.length === 0 ? (
             <div className="flex items-center justify-center py-8">
-              <svg className="w-5 h-5 text-stone-500 animate-spin" fill="none" viewBox="0 0 24 24">
+              <svg
+                className="w-5 h-5 text-stone-500 dark:text-neutral-400 animate-spin"
+                fill="none"
+                viewBox="0 0 24 24">
                 <circle
                   className="opacity-25"
                   cx="12"
@@ -176,14 +180,16 @@ const TeamMembersPanel = () => {
                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                 />
               </svg>
-              <span className="ml-3 text-sm text-stone-500">Loading members...</span>
+              <span className="ml-3 text-sm text-stone-500 dark:text-neutral-400">
+                Loading members...
+              </span>
             </div>
           ) : (
             <div className="space-y-2">
               {members.map(member => (
                 <div
                   key={member._id}
-                  className="flex items-center justify-between p-3 rounded-xl border border-stone-200 bg-white">
+                  className="flex items-center justify-between p-3 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
                   <div className="flex items-center gap-3 min-w-0">
                     {/* Avatar */}
                     <div className="w-8 h-8 rounded-full bg-stone-700/60 flex items-center justify-center flex-shrink-0">
@@ -193,15 +199,19 @@ const TeamMembersPanel = () => {
                     </div>
                     <div className="min-w-0">
                       <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-stone-900 truncate">
+                        <span className="text-sm font-medium text-stone-900 dark:text-neutral-100 truncate">
                           {displayName(member)}
                         </span>
                         {isCurrentUser(member) && (
-                          <span className="text-[10px] text-stone-500">(You)</span>
+                          <span className="text-[10px] text-stone-500 dark:text-neutral-400">
+                            (You)
+                          </span>
                         )}
                       </div>
                       {member.user.username && (
-                        <p className="text-xs text-stone-500 truncate">@{member.user.username}</p>
+                        <p className="text-xs text-stone-500 dark:text-neutral-400 truncate">
+                          @{member.user.username}
+                        </p>
                       )}
                     </div>
                   </div>
@@ -213,7 +223,7 @@ const TeamMembersPanel = () => {
                         value={member.role.toUpperCase()}
                         onChange={e => handleChangeRole(member, e.target.value as TeamRole)}
                         disabled={changingRoleId === member._id}
-                        className="px-2 py-1 text-[10px] font-medium rounded-full border bg-white text-stone-700 border-stone-300 focus:outline-none focus:border-primary-500/50 disabled:opacity-50">
+                        className="px-2 py-1 text-[10px] font-medium rounded-full border bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 border-stone-300 dark:border-neutral-700 focus:outline-none focus:border-primary-500/50 disabled:opacity-50">
                         {ROLES.map(r => (
                           <option key={r} value={r}>
                             {r}
@@ -232,7 +242,7 @@ const TeamMembersPanel = () => {
                       <button
                         onClick={() => handleRemoveMember(member)}
                         disabled={removingId === member._id}
-                        className="p-1 rounded-lg text-stone-500 hover:text-coral-400 hover:bg-coral-500/10 transition-colors disabled:opacity-50"
+                        className="p-1 rounded-lg text-stone-500 dark:text-neutral-400 hover:text-coral-400 hover:bg-coral-500/10 transition-colors disabled:opacity-50"
                         aria-label={`Remove ${displayName(member)}`}>
                         <svg
                           className="w-4 h-4"
@@ -254,7 +264,7 @@ const TeamMembersPanel = () => {
 
               {members.length === 0 && !isLoadingMembers && (
                 <div className="text-center py-8">
-                  <p className="text-sm text-stone-500">No members found</p>
+                  <p className="text-sm text-stone-500 dark:text-neutral-400">No members found</p>
                 </div>
               )}
             </div>
@@ -263,8 +273,10 @@ const TeamMembersPanel = () => {
           {/* Remove Member Confirmation Modal */}
           {memberToRemove && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
-              <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-sm font-semibold text-stone-900 mb-4">Remove Team Member</h3>
+              <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-stone-200 dark:border-neutral-800">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
+                  Remove Team Member
+                </h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -273,11 +285,13 @@ const TeamMembersPanel = () => {
                 )}
 
                 <div className="space-y-4">
-                  <div className="text-sm text-stone-400">
+                  <div className="text-sm text-stone-400 dark:text-neutral-500">
                     <p>
                       Are you sure you want to remove{' '}
-                      <strong className="text-stone-900">{displayName(memberToRemove)}</strong> from
-                      the team?
+                      <strong className="text-stone-900 dark:text-neutral-100">
+                        {displayName(memberToRemove)}
+                      </strong>{' '}
+                      from the team?
                     </p>
                     <p className="mt-2 text-coral-400">
                       They will lose access to the team and all team resources.
@@ -288,7 +302,7 @@ const TeamMembersPanel = () => {
                     <button
                       onClick={() => setMemberToRemove(null)}
                       disabled={removingId === memberToRemove._id}
-                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-700 transition-colors disabled:opacity-50">
+                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 transition-colors disabled:opacity-50">
                       Cancel
                     </button>
                     <button
@@ -306,8 +320,10 @@ const TeamMembersPanel = () => {
           {/* Change Role Confirmation Modal */}
           {roleChangeConfirmation && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
-              <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-sm font-semibold text-stone-900 mb-4">Change Member Role</h3>
+              <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-stone-200 dark:border-neutral-800">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
+                  Change Member Role
+                </h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -316,10 +332,10 @@ const TeamMembersPanel = () => {
                 )}
 
                 <div className="space-y-4">
-                  <div className="text-sm text-stone-400">
+                  <div className="text-sm text-stone-400 dark:text-neutral-500">
                     <p>
                       Change{' '}
-                      <strong className="text-stone-900 font-semibold">
+                      <strong className="text-stone-900 dark:text-neutral-100 font-semibold">
                         {displayName(roleChangeConfirmation.member)}
                       </strong>
                       's role from{' '}
@@ -350,7 +366,7 @@ const TeamMembersPanel = () => {
                     <button
                       onClick={() => setRoleChangeConfirmation(null)}
                       disabled={changingRoleId === roleChangeConfirmation.member._id}
-                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-700/50 hover:bg-stone-700 text-stone-300 transition-colors disabled:opacity-50">
+                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-700/50 hover:bg-stone-700 text-stone-300 dark:text-neutral-600 transition-colors disabled:opacity-50">
                       Cancel
                     </button>
                     <button
diff --git a/app/src/components/settings/panels/TeamPanel.tsx b/app/src/components/settings/panels/TeamPanel.tsx
index 49978e3ca..66ca9be18 100644
--- a/app/src/components/settings/panels/TeamPanel.tsx
+++ b/app/src/components/settings/panels/TeamPanel.tsx
@@ -137,7 +137,8 @@ const TeamPanel = () => {
     const colors: Record<string, string> = {
       ADMIN: 'bg-primary-500/20 text-primary-400 border-primary-500/30',
       BILLING_MANAGER: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
-      MEMBER: 'bg-stone-500/20 text-stone-400 border-stone-500/30',
+      MEMBER:
+        'bg-stone-50 dark:bg-neutral-800/60 text-stone-400 dark:text-neutral-500 border-stone-500/30',
     };
 
     return (
@@ -152,7 +153,7 @@ const TeamPanel = () => {
     const colors: Record<string, string> = {
       PRO: 'bg-lavender-500/20 text-lavender-400 border-lavender-500/30',
       BASIC: 'bg-primary-500/20 text-primary-400 border-primary-500/30',
-      FREE: 'bg-stone-500/20 text-stone-400 border-stone-500/30',
+      FREE: 'bg-stone-50 dark:bg-neutral-800/60 text-stone-400 dark:text-neutral-500 border-stone-500/30',
     };
     return (
       <span
@@ -173,18 +174,20 @@ const TeamPanel = () => {
       <div
         className={`flex items-center justify-between p-3 rounded-xl border transition-all ${
           isActive
-            ? 'border-primary-200 bg-primary-50'
-            : 'border-stone-200 bg-white hover:bg-stone-50'
+            ? 'border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10'
+            : 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/60'
         }`}>
         <div className="flex items-center gap-3 min-w-0 flex-1">
-          <div className="w-9 h-9 rounded-lg bg-stone-100 flex items-center justify-center flex-shrink-0">
-            <span className="text-sm font-semibold text-stone-600">
+          <div className="w-9 h-9 rounded-lg bg-stone-100 dark:bg-neutral-800 flex items-center justify-center flex-shrink-0">
+            <span className="text-sm font-semibold text-stone-600 dark:text-neutral-300">
               {team.name.charAt(0).toUpperCase()}
             </span>
           </div>
           <div className="min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className="text-sm font-medium text-stone-900 truncate">{team.name}</span>
+              <span className="text-sm font-medium text-stone-900 dark:text-neutral-100 truncate">
+                {team.name}
+              </span>
               {roleBadge(role, team.createdBy)}
               {planBadge(team.subscription.plan)}
               {isActive && (
@@ -194,7 +197,9 @@ const TeamPanel = () => {
               )}
             </div>
             {team.isPersonal && (
-              <p className="text-xs text-stone-400 mt-0.5">{t('team.personalTeam')}</p>
+              <p className="text-xs text-stone-400 dark:text-neutral-500 mt-0.5">
+                {t('team.personalTeam')}
+              </p>
             )}
           </div>
         </div>
@@ -203,7 +208,7 @@ const TeamPanel = () => {
           {canManage && (
             <button
               onClick={() => navigateToTeamManagement(team._id)}
-              className="px-2.5 py-1 text-xs font-medium rounded-lg bg-primary-50 hover:bg-primary-100 text-primary-600 transition-colors">
+              className="px-2.5 py-1 text-xs font-medium rounded-lg bg-primary-50 dark:bg-primary-500/10 hover:bg-primary-100 dark:bg-primary-500/20 text-primary-600 dark:text-primary-300 transition-colors">
               {t('team.manageTeam')}
             </button>
           )}
@@ -211,7 +216,7 @@ const TeamPanel = () => {
             <button
               onClick={() => handleSwitchTeam(team._id)}
               disabled={isSwitching === team._id}
-              className="px-2.5 py-1 text-xs font-medium rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-600 transition-colors disabled:opacity-50">
+              className="px-2.5 py-1 text-xs font-medium rounded-lg bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 transition-colors disabled:opacity-50">
               {isSwitching === team._id ? t('team.switching') : t('team.switch')}
             </button>
           )}
@@ -219,7 +224,7 @@ const TeamPanel = () => {
             <button
               onClick={() => handleLeaveTeam(entry)}
               disabled={isLeaving === team._id}
-              className="px-2.5 py-1 text-xs font-medium rounded-lg text-amber-700 hover:bg-amber-50 transition-colors disabled:opacity-50">
+              className="px-2.5 py-1 text-xs font-medium rounded-lg text-amber-700 dark:text-amber-300 hover:bg-amber-50 dark:bg-amber-500/10 transition-colors disabled:opacity-50">
               {isLeaving === team._id ? t('team.leaving') : t('team.leave')}
             </button>
           )}
@@ -247,7 +252,10 @@ const TeamPanel = () => {
 
           {isLoading && teams.length === 0 && (
             <div className="flex items-center justify-center py-8">
-              <svg className="w-5 h-5 text-stone-500 animate-spin" fill="none" viewBox="0 0 24 24">
+              <svg
+                className="w-5 h-5 text-stone-500 dark:text-neutral-400 animate-spin"
+                fill="none"
+                viewBox="0 0 24 24">
                 <circle
                   className="opacity-25"
                   cx="12"
@@ -267,7 +275,7 @@ const TeamPanel = () => {
 
           {teams.length > 0 && (
             <div className="space-y-3">
-              <h3 className="text-xs font-medium text-stone-500 uppercase tracking-wider px-1">
+              <h3 className="text-xs font-medium text-stone-500 dark:text-neutral-400 uppercase tracking-wider px-1">
                 {t('team.yourTeams')} ({teams.length})
               </h3>
               <div className="space-y-2">
@@ -278,9 +286,9 @@ const TeamPanel = () => {
             </div>
           )}
 
-          <div className="space-y-4 border-t border-stone-200 pt-4">
+          <div className="space-y-4 border-t border-stone-200 dark:border-neutral-800 pt-4">
             <div className="space-y-2">
-              <h3 className="text-xs font-medium text-stone-500 uppercase tracking-wider px-1">
+              <h3 className="text-xs font-medium text-stone-500 dark:text-neutral-400 uppercase tracking-wider px-1">
                 {t('team.createNewTeam')}
               </h3>
               <div className="flex gap-2">
@@ -290,7 +298,7 @@ const TeamPanel = () => {
                   onChange={e => setNewTeamName(e.target.value)}
                   onKeyDown={e => e.key === 'Enter' && handleCreateTeam()}
                   placeholder={t('team.teamName')}
-                  className="flex-1 px-3 py-2 text-sm bg-white border border-stone-200 rounded-xl text-stone-900 placeholder-stone-400 focus:outline-none focus:border-primary-500/50"
+                  className="flex-1 px-3 py-2 text-sm bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-xl text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:outline-none focus:border-primary-500/50"
                 />
                 <button
                   onClick={handleCreateTeam}
@@ -302,7 +310,7 @@ const TeamPanel = () => {
             </div>
 
             <div className="space-y-2">
-              <h3 className="text-xs font-medium text-stone-500 uppercase tracking-wider px-1">
+              <h3 className="text-xs font-medium text-stone-500 dark:text-neutral-400 uppercase tracking-wider px-1">
                 {t('team.joinExistingTeam')}
               </h3>
               <div className="flex gap-2">
@@ -312,12 +320,12 @@ const TeamPanel = () => {
                   onChange={e => setJoinCode(e.target.value)}
                   onKeyDown={e => e.key === 'Enter' && handleJoinTeam()}
                   placeholder={t('team.inviteCode')}
-                  className="flex-1 px-3 py-2 text-sm bg-white border border-stone-200 rounded-xl text-stone-900 placeholder-stone-400 focus:outline-none focus:border-primary-500/50 font-mono"
+                  className="flex-1 px-3 py-2 text-sm bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 rounded-xl text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:outline-none focus:border-primary-500/50 font-mono"
                 />
                 <button
                   onClick={handleJoinTeam}
                   disabled={isJoining || !joinCode.trim()}
-                  className="px-4 py-2 text-xs font-medium rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                  className="px-4 py-2 text-xs font-medium rounded-xl bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                   {isJoining ? t('team.joining') : t('team.join')}
                 </button>
               </div>
@@ -326,8 +334,10 @@ const TeamPanel = () => {
 
           {teamToLeave && (
             <div className="fixed inset-0 bg-stone-900/50 flex items-center justify-center z-50 p-4">
-              <div className="bg-white rounded-2xl p-6 w-full max-w-md border border-stone-200">
-                <h3 className="text-sm font-semibold text-stone-900 mb-4">{t('team.leaveTeam')}</h3>
+              <div className="bg-white dark:bg-neutral-900 rounded-2xl p-6 w-full max-w-md border border-stone-200 dark:border-neutral-800">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100 mb-4">
+                  {t('team.leaveTeam')}
+                </h3>
 
                 {error && (
                   <div className="rounded-xl bg-coral-500/10 border border-coral-500/20 p-3 mb-4">
@@ -336,10 +346,13 @@ const TeamPanel = () => {
                 )}
 
                 <div className="space-y-4">
-                  <div className="text-sm text-stone-500">
+                  <div className="text-sm text-stone-500 dark:text-neutral-400">
                     <p>
                       {t('team.confirmLeave')}{' '}
-                      <strong className="text-stone-900">{teamToLeave.team.name}</strong>?
+                      <strong className="text-stone-900 dark:text-neutral-100">
+                        {teamToLeave.team.name}
+                      </strong>
+                      ?
                     </p>
                     <p className="mt-2 text-amber-400">{t('team.leaveWarning')}</p>
                   </div>
@@ -348,7 +361,7 @@ const TeamPanel = () => {
                     <button
                       onClick={() => setTeamToLeave(null)}
                       disabled={isLeaving === teamToLeave.team._id}
-                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-600 transition-colors disabled:opacity-50">
+                      className="flex-1 px-4 py-2 text-sm font-medium rounded-xl bg-stone-100 dark:bg-neutral-800 hover:bg-stone-200 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 transition-colors disabled:opacity-50">
                       {t('common.cancel')}
                     </button>
                     <button
diff --git a/app/src/components/settings/panels/ToolsPanel.tsx b/app/src/components/settings/panels/ToolsPanel.tsx
index 8ad083dda..b213557b6 100644
--- a/app/src/components/settings/panels/ToolsPanel.tsx
+++ b/app/src/components/settings/panels/ToolsPanel.tsx
@@ -98,7 +98,9 @@ const ToolsPanel = ({ embedded = false }: ToolsPanelProps = {}) => {
       )}
 
       <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
-        <p className="text-stone-500 text-sm">{t('settings.tools.chooseCapabilities')}</p>
+        <p className="text-stone-500 dark:text-neutral-400 text-sm">
+          {t('settings.tools.chooseCapabilities')}
+        </p>
 
         <div className="max-h-[420px] overflow-y-auto pr-1 space-y-4">
           {TOOL_CATEGORIES.map(category => {
@@ -107,10 +109,12 @@ const ToolsPanel = ({ embedded = false }: ToolsPanelProps = {}) => {
             return (
               <div key={category}>
                 <div className="mb-2">
-                  <h2 className="text-xs font-semibold uppercase tracking-wide text-stone-500">
+                  <h2 className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                     {category}
                   </h2>
-                  <p className="text-xs text-stone-400">{CATEGORY_DESCRIPTIONS[category]}</p>
+                  <p className="text-xs text-stone-400 dark:text-neutral-500">
+                    {CATEGORY_DESCRIPTIONS[category]}
+                  </p>
                 </div>
                 <div className="space-y-1">
                   {tools.map(tool => (
@@ -118,19 +122,21 @@ const ToolsPanel = ({ embedded = false }: ToolsPanelProps = {}) => {
                       key={tool.id}
                       type="button"
                       onClick={() => toggle(tool.id)}
-                      className="w-full flex items-center justify-between p-2.5 rounded-xl border border-stone-200 bg-white hover:border-stone-300 transition-colors text-left">
+                      className="w-full flex items-center justify-between p-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:border-stone-300 dark:border-neutral-700 dark:hover:border-neutral-700 transition-colors text-left">
                       <div className="min-w-0 flex-1">
-                        <span className="text-sm font-medium text-stone-900">
+                        <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
                           {tool.displayName}
                         </span>
-                        <p className="text-xs text-stone-500 mt-0.5">{tool.description}</p>
+                        <p className="text-xs text-stone-500 dark:text-neutral-400 mt-0.5">
+                          {tool.description}
+                        </p>
                       </div>
                       <div
                         className={`ml-3 flex-shrink-0 w-9 h-5 rounded-full transition-colors relative ${
-                          enabled[tool.id] ? 'bg-sage-500' : 'bg-stone-200'
+                          enabled[tool.id] ? 'bg-sage-500' : 'bg-stone-200 dark:bg-neutral-800'
                         }`}>
                         <div
-                          className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
+                          className={`absolute top-0.5 w-4 h-4 rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
                             enabled[tool.id] ? 'translate-x-4' : 'translate-x-0.5'
                           }`}
                         />
@@ -153,7 +159,7 @@ const ToolsPanel = ({ embedded = false }: ToolsPanelProps = {}) => {
           </button>
         )}
         {saveStatus === 'saved' && (
-          <p className="text-xs text-center text-green-600 mt-1">
+          <p className="text-xs text-center text-green-600 dark:text-green-300 mt-1">
             {t('settings.tools.preferencesSaved')}
           </p>
         )}
diff --git a/app/src/components/settings/panels/VoiceDebugPanel.tsx b/app/src/components/settings/panels/VoiceDebugPanel.tsx
index 510b23026..e299a0ea6 100644
--- a/app/src/components/settings/panels/VoiceDebugPanel.tsx
+++ b/app/src/components/settings/panels/VoiceDebugPanel.tsx
@@ -124,39 +124,45 @@ const VoiceDebugPanel = () => {
       <div className="p-4 space-y-4">
         {/* Runtime status section */}
         <section className="space-y-3">
-          <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+          <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
             <div className="flex items-center justify-between">
               <div>
-                <h3 className="text-sm font-semibold text-stone-900">Runtime Status</h3>
-                <p className="text-xs text-stone-500 mt-1">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                  Runtime Status
+                </h3>
+                <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
                   Live diagnostics for the voice server and speech-to-text engine.
                 </p>
               </div>
               <button
                 type="button"
                 onClick={() => void loadData()}
-                className="text-xs text-primary-600 hover:text-primary-700">
+                className="text-xs text-primary-600 dark:text-primary-300 hover:text-primary-700 dark:text-primary-300">
                 Refresh
               </button>
             </div>
 
             <div className="grid grid-cols-2 gap-3 text-sm">
-              <div className="rounded-md border border-stone-200 bg-white p-3">
-                <div className="text-[10px] uppercase tracking-wide text-stone-500">Server</div>
-                <div className="mt-1 font-medium text-stone-900">
+              <div className="rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
+                <div className="text-[10px] uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+                  Server
+                </div>
+                <div className="mt-1 font-medium text-stone-900 dark:text-neutral-100">
                   {serverStatus ? serverStatus.state : isLoading ? 'Loading…' : 'Unavailable'}
                 </div>
               </div>
-              <div className="rounded-md border border-stone-200 bg-white p-3">
-                <div className="text-[10px] uppercase tracking-wide text-stone-500">STT</div>
-                <div className="mt-1 font-medium text-stone-900">
+              <div className="rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
+                <div className="text-[10px] uppercase tracking-wide text-stone-500 dark:text-neutral-400">
+                  STT
+                </div>
+                <div className="mt-1 font-medium text-stone-900 dark:text-neutral-100">
                   {voiceStatus?.stt_available ? 'Ready' : 'Not ready'}
                 </div>
               </div>
             </div>
 
             {serverStatus && (
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-stone-600">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-stone-600 dark:text-neutral-300">
                 <div>Hotkey: {serverStatus.hotkey || 'n/a'}</div>
                 <div>Mode: {serverStatus.activation_mode}</div>
                 <div>Transcriptions: {serverStatus.transcription_count}</div>
@@ -164,7 +170,7 @@ const VoiceDebugPanel = () => {
             )}
 
             {serverStatus?.last_error && (
-              <div className="rounded-md border border-red-200 bg-red-50 p-3 text-xs text-red-600">
+              <div className="rounded-md border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 p-3 text-xs text-red-600 dark:text-red-300">
                 <div className="font-medium mb-1">Server Error</div>
                 {serverStatus.last_error}
               </div>
@@ -174,10 +180,12 @@ const VoiceDebugPanel = () => {
 
         {/* Advanced settings section */}
         <section className="space-y-3">
-          <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-4">
+          <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-4">
             <div>
-              <h3 className="text-sm font-semibold text-stone-900">Advanced Settings</h3>
-              <p className="text-xs text-stone-500 mt-1">
+              <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                Advanced Settings
+              </h3>
+              <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
                 Low-level tuning parameters for recording and silence detection.
               </p>
             </div>
@@ -185,7 +193,7 @@ const VoiceDebugPanel = () => {
             {settings && (
               <>
                 <label className="block space-y-1">
-                  <span className="text-xs font-medium text-stone-600">
+                  <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
                     Minimum Recording Seconds
                   </span>
                   <input
@@ -194,15 +202,15 @@ const VoiceDebugPanel = () => {
                     step="0.1"
                     value={settings.min_duration_secs}
                     onChange={e => updateSetting('min_duration_secs', Number(e.target.value) || 0)}
-                    className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400"
+                    className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400"
                   />
                 </label>
 
                 <label className="block space-y-1">
-                  <span className="text-xs font-medium text-stone-600">
+                  <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
                     Silence Threshold (RMS)
                   </span>
-                  <p className="text-[11px] text-stone-400">
+                  <p className="text-[11px] text-stone-400 dark:text-neutral-500">
                     Recordings with energy below this are treated as silence and skipped. Lower =
                     more sensitive.
                   </p>
@@ -215,19 +223,19 @@ const VoiceDebugPanel = () => {
                     onChange={e =>
                       updateSetting('silence_threshold', Number(e.target.value) || 0.002)
                     }
-                    className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400"
+                    className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400"
                   />
                 </label>
               </>
             )}
 
             {error && (
-              <div className="rounded-md border border-red-200 bg-red-50 p-3 text-xs text-red-600">
+              <div className="rounded-md border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 p-3 text-xs text-red-600 dark:text-red-300">
                 {error}
               </div>
             )}
             {notice && (
-              <div className="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-xs text-emerald-700">
+              <div className="rounded-md border border-emerald-200 dark:border-emerald-500/30 bg-emerald-50 dark:bg-emerald-500/10 p-3 text-xs text-emerald-700 dark:text-emerald-300">
                 {notice}
               </div>
             )}
diff --git a/app/src/components/settings/panels/VoicePanel.tsx b/app/src/components/settings/panels/VoicePanel.tsx
index 08f59f4ab..e5ca0bbdf 100644
--- a/app/src/components/settings/panels/VoicePanel.tsx
+++ b/app/src/components/settings/panels/VoicePanel.tsx
@@ -512,11 +512,13 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
       <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
         <section className="space-y-3">
           <div
-            className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-4"
+            className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-4"
             data-testid="voice-providers-section">
             <div>
-              <h3 className="text-sm font-semibold text-stone-900">Voice Providers</h3>
-              <p className="text-xs text-stone-500 mt-1">
+              <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                Voice Providers
+              </h3>
+              <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
                 Choose where transcription and synthesis run. Use the Install locally buttons to
                 download the binaries and models into your workspace — no manual{' '}
                 <code>WHISPER_BIN</code> or <code>PIPER_BIN</code> setup required.
@@ -524,14 +526,16 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <label className="block space-y-1">
-                <span className="text-xs font-medium text-stone-600">Speech-to-Text Provider</span>
+                <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+                  Speech-to-Text Provider
+                </span>
                 <select
                   aria-label="STT provider"
                   data-testid="stt-provider-select"
                   value={sttProvider || 'cloud'}
                   disabled={isSavingProviders}
                   onChange={e => onSttProviderChange(e.target.value as 'cloud' | 'whisper')}
-                  className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400">
+                  className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                   <option value="cloud">Cloud (Whisper proxy)</option>
                   <option value="whisper" disabled={!whisperReady}>
                     Local Whisper{whisperReady ? '' : ' (install required)'}
@@ -559,10 +563,10 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                     data-testid="whisper-install-state"
                     className={`text-[11px] ${
                       whisperReady
-                        ? 'text-emerald-600'
+                        ? 'text-emerald-600 dark:text-emerald-300'
                         : whisperInstall?.state === 'error'
-                          ? 'text-red-600'
-                          : 'text-stone-500'
+                          ? 'text-red-600 dark:text-red-300'
+                          : 'text-stone-500 dark:text-neutral-400'
                     }`}>
                     {whisperInstall?.state === 'installing' && whisperInstall.stage
                       ? whisperInstall.stage
@@ -576,7 +580,9 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
               </label>
               {sttProvider === 'whisper' && (
                 <label className="block space-y-1">
-                  <span className="text-xs font-medium text-stone-600">Whisper Model</span>
+                  <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+                    Whisper Model
+                  </span>
                   <select
                     aria-label="Whisper model"
                     data-testid="stt-model-select"
@@ -598,7 +604,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                         )
                       );
                     }}
-                    className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400">
+                    className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                     <option value="tiny">Tiny (39 MB, fastest)</option>
                     <option value="base">Base (74 MB)</option>
                     <option value="small">Small (244 MB)</option>
@@ -610,14 +616,16 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                 </label>
               )}
               <label className="block space-y-1">
-                <span className="text-xs font-medium text-stone-600">Text-to-Speech Provider</span>
+                <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+                  Text-to-Speech Provider
+                </span>
                 <select
                   aria-label="TTS provider"
                   data-testid="tts-provider-select"
                   value={ttsProvider || 'cloud'}
                   disabled={isSavingProviders}
                   onChange={e => onTtsProviderChange(e.target.value as 'cloud' | 'piper')}
-                  className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400">
+                  className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                   <option value="cloud">Cloud (ElevenLabs proxy)</option>
                   <option value="piper" disabled={!piperReady}>
                     Local Piper{piperReady ? '' : ' (install required)'}
@@ -645,10 +653,10 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                     data-testid="piper-install-state"
                     className={`text-[11px] ${
                       piperReady
-                        ? 'text-emerald-600'
+                        ? 'text-emerald-600 dark:text-emerald-300'
                         : piperInstall?.state === 'error'
-                          ? 'text-red-600'
-                          : 'text-stone-500'
+                          ? 'text-red-600 dark:text-red-300'
+                          : 'text-stone-500 dark:text-neutral-400'
                     }`}>
                     {piperInstall?.state === 'installing' && piperInstall.stage
                       ? piperInstall.stage
@@ -662,7 +670,9 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
               </label>
               {ttsProvider === 'piper' && (
                 <label className="block space-y-1">
-                  <span className="text-xs font-medium text-stone-600">Piper Voice</span>
+                  <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+                    Piper Voice
+                  </span>
                   <select
                     aria-label="Piper voice"
                     data-testid="tts-voice-select"
@@ -689,7 +699,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                         )
                       );
                     }}
-                    className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400">
+                    className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                     {PIPER_VOICE_PRESETS.map(v => (
                       <option key={v.id} value={v.id}>
                         {v.label}
@@ -716,10 +726,10 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                           );
                         }
                       }}
-                      className="mt-1 w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+                      className="mt-1 w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
                     />
                   )}
-                  <p className="text-[11px] text-stone-500 mt-0.5">
+                  <p className="text-[11px] text-stone-500 dark:text-neutral-400 mt-0.5">
                     Voices come from{' '}
                     <code className="font-mono">huggingface.co/rhasspy/piper-voices</code>.
                     Switching voices may require an Install/Reinstall click to download the new{' '}
@@ -741,10 +751,12 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
             shipped default. */}
         {ttsProvider !== 'piper' && (
           <section className="space-y-3" data-testid="mascot-voice-section">
-            <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-4">
+            <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-4">
               <div>
-                <h3 className="text-sm font-semibold text-stone-900">Mascot Voice</h3>
-                <p className="text-xs text-stone-500 mt-1">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                  Mascot Voice
+                </h3>
+                <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
                   Pick the ElevenLabs voice the mascot uses for spoken replies. Switch among the
                   curated presets, paste any voice id you have access to under{' '}
                   <strong>Other…</strong>, or hit <strong>Reset</strong> to fall back to the shipped
@@ -753,13 +765,15 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
               </div>
 
               <label className="block space-y-1">
-                <span className="text-xs font-medium text-stone-600">Voice preset</span>
+                <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+                  Voice preset
+                </span>
                 <select
                   aria-label="Mascot voice preset"
                   data-testid="mascot-voice-select"
                   value={isCustomMascotVoice ? '__custom__' : effectiveMascotVoiceId}
                   onChange={e => onMascotVoicePresetChange(e.target.value)}
-                  className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400">
+                  className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                   {ELEVENLABS_VOICE_PRESETS.map(v => (
                     <option key={v.id} value={v.id}>
                       {v.label}
@@ -771,7 +785,9 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
 
               {isCustomMascotVoice && (
                 <label className="block space-y-1">
-                  <span className="text-xs font-medium text-stone-600">Custom voice id</span>
+                  <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+                    Custom voice id
+                  </span>
                   <div className="flex gap-2">
                     <input
                       aria-label="Custom ElevenLabs voice id"
@@ -779,7 +795,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                       value={mascotVoiceDraft}
                       placeholder="e.g. 21m00Tcm4TlvDq8ikWAM"
                       onChange={e => setMascotVoiceDraft(e.target.value)}
-                      className="flex-1 rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+                      className="flex-1 rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
                     />
                     <button
                       type="button"
@@ -790,7 +806,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                       Save
                     </button>
                   </div>
-                  <p className="text-[11px] text-stone-500">
+                  <p className="text-[11px] text-stone-500 dark:text-neutral-400">
                     Find voice ids at <code className="font-mono">api.elevenlabs.io/v1/voices</code>{' '}
                     or your ElevenLabs dashboard. Only the id is stored — your API key stays on the
                     backend.
@@ -817,12 +833,12 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                       ? 'Already using the shipped default voice'
                       : 'Restore the shipped default mascot voice'
                   }
-                  className="px-3 py-1.5 text-xs rounded-md border border-stone-300 hover:border-stone-400 disabled:opacity-60 text-stone-700">
+                  className="px-3 py-1.5 text-xs rounded-md border border-stone-300 dark:border-neutral-700 hover:border-stone-400 dark:hover:border-neutral-600 disabled:opacity-60 text-stone-700 dark:text-neutral-200">
                   Reset to default
                 </button>
                 <span
                   data-testid="mascot-voice-current"
-                  className="ml-1 text-[11px] text-stone-500 truncate max-w-[18rem]"
+                  className="ml-1 text-[11px] text-stone-500 dark:text-neutral-400 truncate max-w-[18rem]"
                   title={effectiveMascotVoiceId}>
                   current: <code className="font-mono">{effectiveMascotVoiceId}</code>
                 </span>
@@ -831,7 +847,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
               {mascotVoicePreviewError && (
                 <div
                   data-testid="mascot-voice-preview-error"
-                  className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800">
+                  className="rounded-md border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-3 text-xs text-amber-800 dark:text-amber-200">
                   Voice preview failed: {mascotVoicePreviewError}. Reply speech will fall back to
                   the default voice on the next reply.
                 </div>
@@ -841,27 +857,33 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
         )}
 
         <section className={`space-y-3 ${disabled ? 'opacity-60' : ''}`}>
-          <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-4">
+          <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-4">
             <div>
-              <h3 className="text-sm font-semibold text-stone-900">{t('voice.settings')}</h3>
-              <p className="text-xs text-stone-500 mt-1">{t('voice.settingsDesc')}</p>
+              <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                {t('voice.settings')}
+              </h3>
+              <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+                {t('voice.settingsDesc')}
+              </p>
             </div>
 
             {!disabled && settings && (
               <>
                 <label className="block space-y-1">
-                  <span className="text-xs font-medium text-stone-600">{t('voice.hotkey')}</span>
+                  <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
+                    {t('voice.hotkey')}
+                  </span>
                   <input
                     value={settings.hotkey}
                     onChange={e => updateSetting('hotkey', e.target.value)}
                     placeholder="Fn"
-                    className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+                    className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
                   />
                 </label>
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <label className="block space-y-1">
-                    <span className="text-xs font-medium text-stone-600">
+                    <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
                       {t('voice.activationMode')}
                     </span>
                     <select
@@ -869,43 +891,45 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                       onChange={e =>
                         updateSetting('activation_mode', e.target.value as 'tap' | 'push')
                       }
-                      className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400">
+                      className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                       <option value="push">{t('voice.pushToTalk')}</option>
                       <option value="tap">{t('voice.tapToToggle')}</option>
                     </select>
                   </label>
 
                   <label className="block space-y-1">
-                    <span className="text-xs font-medium text-stone-600">
+                    <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
                       {t('voice.writingStyle')}
                     </span>
                     <select
                       value={settings.skip_cleanup ? 'verbatim' : 'natural'}
                       onChange={e => updateSetting('skip_cleanup', e.target.value === 'verbatim')}
-                      className="w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-1 focus:ring-primary-400">
+                      className="w-full rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:outline-none focus:ring-1 focus:ring-primary-400">
                       <option value="verbatim">{t('voice.verbatimTranscription')}</option>
                       <option value="natural">{t('voice.naturalCleanup')}</option>
                     </select>
                   </label>
                 </div>
 
-                <label className="flex items-center gap-2 text-sm text-stone-700">
+                <label className="flex items-center gap-2 text-sm text-stone-700 dark:text-neutral-200">
                   <input
                     type="checkbox"
                     data-testid="voice-auto-start-toggle"
                     checked={settings.auto_start}
                     onChange={e => updateSetting('auto_start', e.target.checked)}
-                    className="h-4 w-4 rounded border-stone-300 text-primary-600 focus:ring-primary-500"
+                    className="h-4 w-4 rounded border-stone-300 dark:border-neutral-700 text-primary-600 dark:text-primary-300 focus:ring-primary-500"
                   />
                   {t('voice.autoStart')}
                 </label>
 
                 <div className="space-y-2">
                   <div>
-                    <span className="text-xs font-medium text-stone-600">
+                    <span className="text-xs font-medium text-stone-600 dark:text-neutral-300">
                       {t('voice.customDictionary')}
                     </span>
-                    <p className="text-[11px] text-stone-400">{t('voice.customDictionaryDesc')}</p>
+                    <p className="text-[11px] text-stone-400 dark:text-neutral-500">
+                      {t('voice.customDictionaryDesc')}
+                    </p>
                   </div>
                   <div className="flex gap-2">
                     <input
@@ -925,7 +949,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                         }
                       }}
                       placeholder={t('voice.addWord')}
-                      className="flex-1 rounded-md border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+                      className="flex-1 rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1.5 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
                     />
                     <button
                       type="button"
@@ -946,7 +970,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                       {settings.custom_dictionary.map(word => (
                         <span
                           key={word}
-                          className="inline-flex items-center gap-1 rounded-full bg-stone-100 px-2.5 py-0.5 text-xs text-stone-700">
+                          className="inline-flex items-center gap-1 rounded-full bg-stone-100 dark:bg-neutral-800 px-2.5 py-0.5 text-xs text-stone-700 dark:text-neutral-200">
                           {word}
                           <button
                             type="button"
@@ -956,7 +980,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                                 settings.custom_dictionary.filter(w => w !== word)
                               )
                             }
-                            className="ml-0.5 text-stone-400 hover:text-stone-700">
+                            className="ml-0.5 text-stone-400 dark:text-neutral-500 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200">
                             &times;
                           </button>
                         </span>
@@ -968,19 +992,19 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
             )}
 
             {disabled && (
-              <div className="rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
+              <div className="rounded-md border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-4 text-sm text-amber-800 dark:text-amber-200">
                 Voice dictation is disabled until the local STT model is downloaded. Use the{' '}
                 <strong>Voice Providers</strong> section above to install Whisper.
               </div>
             )}
 
             {error && (
-              <div className="rounded-md border border-red-200 bg-red-50 p-3 text-xs text-red-600">
+              <div className="rounded-md border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 p-3 text-xs text-red-600 dark:text-red-300">
                 {error}
               </div>
             )}
             {notice && (
-              <div className="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-xs text-emerald-700">
+              <div className="rounded-md border border-emerald-200 dark:border-emerald-500/30 bg-emerald-50 dark:bg-emerald-500/10 p-3 text-xs text-emerald-700 dark:text-emerald-300">
                 {notice}
               </div>
             )}
@@ -1005,7 +1029,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
                 type="button"
                 onClick={() => void stopServer()}
                 disabled={!isRunning || isStopping}
-                className="px-3 py-1.5 text-xs rounded-md border border-stone-300 hover:border-stone-400 disabled:opacity-60 text-stone-700">
+                className="px-3 py-1.5 text-xs rounded-md border border-stone-300 dark:border-neutral-700 hover:border-stone-400 dark:hover:border-neutral-600 disabled:opacity-60 text-stone-700 dark:text-neutral-200">
                 {isStopping ? t('common.loading') : t('voice.stopVoiceServer')}
               </button>
             </div>
@@ -1015,7 +1039,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
         <button
           type="button"
           onClick={() => navigateToSettings('voice-debug')}
-          className="flex items-center gap-1.5 text-xs text-stone-400 hover:text-stone-600 transition-colors">
+          className="flex items-center gap-1.5 text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 dark:hover:text-neutral-300 transition-colors">
           {t('settings.advanced')}
           <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
diff --git a/app/src/components/settings/panels/WebhooksDebugPanel.tsx b/app/src/components/settings/panels/WebhooksDebugPanel.tsx
index 855234592..9613e45fc 100644
--- a/app/src/components/settings/panels/WebhooksDebugPanel.tsx
+++ b/app/src/components/settings/panels/WebhooksDebugPanel.tsx
@@ -155,62 +155,70 @@ const WebhooksDebugPanel = () => {
             type="button"
             onClick={() => void loadData()}
             disabled={loading}
-            className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50">
             {loading ? 'Loading...' : 'Refresh'}
           </button>
           <button
             type="button"
             onClick={() => void handleClearLogs()}
             disabled={clearing || logs.length === 0}
-            className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-1.5 font-medium text-stone-700 hover:bg-stone-100 disabled:opacity-50">
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5 font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50">
             {clearing ? 'Clearing...' : 'Clear Logs'}
           </button>
-          <span className="text-stone-500">
+          <span className="text-stone-500 dark:text-neutral-400">
             {registrations.length} registered &middot; {logs.length} captured &middot;{' '}
-            <span className={isLive ? 'text-sage-600' : 'text-stone-400'}>
+            <span
+              className={
+                isLive ? 'text-sage-600 dark:text-sage-300' : 'text-stone-400 dark:text-neutral-500'
+              }>
               {isLive ? 'live' : 'disconnected'}
             </span>
           </span>
         </div>
 
         {error && (
-          <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+          <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
             {error}
           </div>
         )}
 
         {lastEvent && (
-          <div className="text-xs text-stone-500">
-            Last event: <span className="font-medium text-stone-700">{lastEvent.event_type}</span>{' '}
+          <div className="text-xs text-stone-500 dark:text-neutral-400">
+            Last event:{' '}
+            <span className="font-medium text-stone-700 dark:text-neutral-200">
+              {lastEvent.event_type}
+            </span>{' '}
             at {formatDateTime(lastEvent.timestamp)}
           </div>
         )}
 
         {/* Registrations */}
         <section className="space-y-2">
-          <h3 className="text-sm font-semibold text-stone-900">Registered Webhooks</h3>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            Registered Webhooks
+          </h3>
           {registrations.length === 0 ? (
-            <p className="text-xs text-stone-400">No active registrations.</p>
+            <p className="text-xs text-stone-400 dark:text-neutral-500">No active registrations.</p>
           ) : (
             <div className="space-y-2">
               {registrations.map(registration => (
                 <div
                   key={registration.tunnel_uuid}
-                  className="rounded-xl border border-stone-200 bg-stone-50 p-3">
+                  className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3">
                   <div className="flex flex-wrap items-center justify-between gap-2">
-                    <span className="text-xs font-semibold text-stone-900">
+                    <span className="text-xs font-semibold text-stone-900 dark:text-neutral-100">
                       {registration.tunnel_name || registration.tunnel_uuid}
                     </span>
                     <div className="flex gap-1 text-[10px]">
-                      <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                      <span className="rounded-full bg-stone-200 dark:bg-neutral-800 px-2 py-0.5 text-stone-600 dark:text-neutral-300">
                         {registration.target_kind}
                       </span>
-                      <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                      <span className="rounded-full bg-stone-200 dark:bg-neutral-800 px-2 py-0.5 text-stone-600 dark:text-neutral-300">
                         {registration.skill_id}
                       </span>
                     </div>
                   </div>
-                  <div className="mt-1 text-[11px] text-stone-500 font-mono break-all">
+                  <div className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400 font-mono break-all">
                     {backendUrl
                       ? tunnelsApi.ingressUrl(backendUrl, registration.tunnel_uuid)
                       : 'Resolving backend URL…'}
@@ -223,9 +231,13 @@ const WebhooksDebugPanel = () => {
 
         {/* Captured Requests */}
         <section className="space-y-2">
-          <h3 className="text-sm font-semibold text-stone-900">Captured Requests</h3>
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            Captured Requests
+          </h3>
           {logs.length === 0 ? (
-            <p className="text-xs text-stone-400">No webhook requests captured yet.</p>
+            <p className="text-xs text-stone-400 dark:text-neutral-500">
+              No webhook requests captured yet.
+            </p>
           ) : (
             <div className="space-y-2">
               {logs.map(entry => (
@@ -235,16 +247,18 @@ const WebhooksDebugPanel = () => {
                   onClick={() => setSelectedCorrelationId(entry.correlation_id)}
                   className={`w-full rounded-xl border p-3 text-left transition-colors ${
                     selectedLog?.correlation_id === entry.correlation_id
-                      ? 'border-primary-300 bg-primary-50'
-                      : 'border-stone-200 bg-stone-50 hover:bg-stone-100'
+                      ? 'border-primary-300 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/10'
+                      : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-800'
                   }`}>
                   <div className="flex items-center justify-between gap-2">
-                    <span className="text-xs font-semibold text-stone-900">
+                    <span className="text-xs font-semibold text-stone-900 dark:text-neutral-100">
                       {entry.method} {entry.path}
                     </span>
-                    <span className="text-[10px] text-stone-500">{entry.status_code ?? '...'}</span>
+                    <span className="text-[10px] text-stone-500 dark:text-neutral-400">
+                      {entry.status_code ?? '...'}
+                    </span>
                   </div>
-                  <div className="mt-1 text-[11px] text-stone-500">
+                  <div className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
                     {entry.tunnel_name} {entry.skill_id ? `· ${entry.skill_id}` : '· unrouted'} ·{' '}
                     {formatDateTime(entry.updated_at)}
                   </div>
@@ -252,30 +266,30 @@ const WebhooksDebugPanel = () => {
               ))}
 
               {selectedLog && (
-                <div className="rounded-xl border border-stone-200 bg-stone-50 p-3 space-y-3">
+                <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 space-y-3">
                   <div>
-                    <div className="text-xs font-semibold text-stone-900">
+                    <div className="text-xs font-semibold text-stone-900 dark:text-neutral-100">
                       {selectedLog.method} {selectedLog.path}
                     </div>
-                    <div className="text-[10px] text-stone-400 font-mono">
+                    <div className="text-[10px] text-stone-400 dark:text-neutral-500 font-mono">
                       {selectedLog.correlation_id}
                     </div>
                   </div>
 
                   <div className="flex flex-wrap gap-1 text-[10px]">
-                    <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                    <span className="rounded-full bg-stone-200 dark:bg-neutral-800 px-2 py-0.5 text-stone-600 dark:text-neutral-300">
                       {selectedLog.stage}
                     </span>
-                    <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                    <span className="rounded-full bg-stone-200 dark:bg-neutral-800 px-2 py-0.5 text-stone-600 dark:text-neutral-300">
                       {selectedLog.status_code ?? 'pending'}
                     </span>
-                    <span className="rounded-full bg-stone-200 px-2 py-0.5 text-stone-600">
+                    <span className="rounded-full bg-stone-200 dark:bg-neutral-800 px-2 py-0.5 text-stone-600 dark:text-neutral-300">
                       {selectedLog.skill_id || 'unrouted'}
                     </span>
                   </div>
 
                   {selectedLog.error_message && (
-                    <div className="rounded-lg border border-coral-200 bg-coral-50 px-3 py-2 text-xs text-coral-700">
+                    <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
                       {selectedLog.error_message}
                     </div>
                   )}
@@ -316,10 +330,10 @@ const WebhooksDebugPanel = () => {
 function PayloadBlock({ title, value }: { title: string; value: string }) {
   return (
     <details className="text-xs">
-      <summary className="cursor-pointer font-semibold text-stone-500 uppercase tracking-wide text-[10px]">
+      <summary className="cursor-pointer font-semibold text-stone-500 dark:text-neutral-400 uppercase tracking-wide text-[10px]">
         {title}
       </summary>
-      <pre className="mt-1 max-h-40 overflow-auto rounded-lg border border-stone-200 bg-stone-950 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
+      <pre className="mt-1 max-h-40 overflow-auto rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-950 dark:bg-neutral-50 p-2 text-[11px] text-stone-100 whitespace-pre-wrap break-words">
         {value}
       </pre>
     </details>
diff --git a/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx b/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
index c7eb3ee85..e9fe54d87 100644
--- a/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
+++ b/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
@@ -39,11 +39,11 @@ const AppFilterSection = ({
   const { t } = useT();
   return (
     <>
-      <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+      <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.autocomplete.appFilter.runtime')}
         </h3>
-        <div className="text-sm text-stone-700 space-y-1">
+        <div className="text-sm text-stone-700 dark:text-neutral-200 space-y-1">
           <div>Platform supported: {status?.platform_supported ? 'yes' : 'no'}</div>
           <div>Enabled: {status?.enabled ? 'yes' : 'no'}</div>
           <div>Running: {status?.running ? 'yes' : 'no'}</div>
@@ -59,7 +59,7 @@ const AppFilterSection = ({
             type="button"
             onClick={onRefreshStatus}
             disabled={isLoading}
-            className="rounded-lg border border-stone-300 bg-stone-100 px-3 py-2 text-sm text-stone-700 disabled:opacity-50">
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 px-3 py-2 text-sm text-stone-700 dark:text-neutral-200 disabled:opacity-50">
             {isLoading
               ? t('settings.autocomplete.appFilter.refreshing')
               : t('settings.autocomplete.appFilter.refreshStatus')}
@@ -68,80 +68,80 @@ const AppFilterSection = ({
             type="button"
             onClick={onStart}
             disabled={!status?.platform_supported || Boolean(status?.running)}
-            className="rounded-lg border border-green-500/60 bg-green-50 px-3 py-2 text-sm text-green-700 disabled:opacity-50">
+            className="rounded-lg border border-green-500/60 bg-green-50 dark:bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-300 disabled:opacity-50">
             {t('autocomplete.start')}
           </button>
           <button
             type="button"
             onClick={onStop}
             disabled={!status?.running}
-            className="rounded-lg border border-red-500/60 bg-red-50 px-3 py-2 text-sm text-red-600 disabled:opacity-50">
+            className="rounded-lg border border-red-500/60 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300 disabled:opacity-50">
             {t('autocomplete.stop')}
           </button>
         </div>
       </section>
 
-      <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+      <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.autocomplete.appFilter.test')}
         </h3>
         <div className="space-y-1">
-          <div className="text-xs text-stone-600">
+          <div className="text-xs text-stone-600 dark:text-neutral-300">
             {t('settings.autocomplete.appFilter.contextOverride')}
           </div>
           <textarea
             value={contextOverride}
             onChange={event => onSetContextOverride(event.target.value)}
             rows={3}
-            className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+            className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
           />
         </div>
         <div className="flex gap-2">
           <button
             type="button"
             onClick={onTestCurrent}
-            className="rounded-lg border border-primary-500/60 bg-primary-50 px-3 py-2 text-sm text-primary-600">
+            className="rounded-lg border border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-600 dark:text-primary-300">
             {t('settings.autocomplete.appFilter.getSuggestion')}
           </button>
           <button
             type="button"
             onClick={onAcceptSuggestion}
-            className="rounded-lg border border-emerald-500/60 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+            className="rounded-lg border border-emerald-500/60 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300">
             {t('settings.autocomplete.appFilter.acceptSuggestion')}
           </button>
           <button
             type="button"
             onClick={onDebugFocus}
-            className="rounded-lg border border-amber-500/60 bg-amber-50 px-3 py-2 text-sm text-amber-700">
+            className="rounded-lg border border-amber-500/60 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300">
             {t('settings.autocomplete.appFilter.debugFocus')}
           </button>
         </div>
         {focusDebug && (
-          <pre className="max-h-48 overflow-auto rounded-xl border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700">
+          <pre className="max-h-48 overflow-auto rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200">
             {focusDebug}
           </pre>
         )}
       </section>
 
-      <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+      <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-stone-900">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {t('settings.autocomplete.appFilter.liveLogs')}
           </h3>
           <button
             type="button"
             onClick={onClearLogs}
-            className="rounded-lg border border-stone-300 bg-stone-100 px-3 py-1.5 text-xs text-stone-700">
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200">
             {t('common.clear')}
           </button>
         </div>
-        <pre className="max-h-56 overflow-auto rounded-xl border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700">
+        <pre className="max-h-56 overflow-auto rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200">
           {logs.length > 0 ? logs.join('\n') : t('settings.autocomplete.appFilter.noLogs')}
         </pre>
       </section>
 
-      {message && <div className="text-xs text-green-700">{message}</div>}
-      {error && <div className="text-xs text-red-600">{error}</div>}
+      {message && <div className="text-xs text-green-700 dark:text-green-300">{message}</div>}
+      {error && <div className="text-xs text-red-600 dark:text-red-300">{error}</div>}
     </>
   );
 };
diff --git a/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx b/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
index 7e08952d3..99e36bf9d 100644
--- a/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
+++ b/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
@@ -57,10 +57,12 @@ const CompletionStyleSection = ({
   const { t } = useT();
   return (
     <>
-      <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">{t('autocomplete.settings')}</h3>
-        <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <span className="text-sm text-stone-700">
+      <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          {t('autocomplete.settings')}
+        </h3>
+        <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <span className="text-sm text-stone-700 dark:text-neutral-200">
             {t('settings.autocomplete.completionStyle.enabled')}
           </span>
           <input
@@ -69,16 +71,18 @@ const CompletionStyleSection = ({
             onChange={event => onSetEnabled(event.target.checked)}
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <span className="text-sm text-stone-700">{t('autocomplete.acceptWithTab')}</span>
+        <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <span className="text-sm text-stone-700 dark:text-neutral-200">
+            {t('autocomplete.acceptWithTab')}
+          </span>
           <input
             type="checkbox"
             checked={acceptWithTab}
             onChange={event => onSetAcceptWithTab(event.target.checked)}
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <span className="text-sm text-stone-700">
+        <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <span className="text-sm text-stone-700 dark:text-neutral-200">
             {t('settings.autocomplete.completionStyle.debounce')}
           </span>
           <input
@@ -88,11 +92,11 @@ const CompletionStyleSection = ({
             step={10}
             value={debounceMs}
             onChange={event => onSetDebounceMs(event.target.value)}
-            className="w-28 rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+            className="w-28 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200"
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <span className="text-sm text-stone-700">
+        <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <span className="text-sm text-stone-700 dark:text-neutral-200">
             {t('settings.autocomplete.completionStyle.maxChars')}
           </span>
           <input
@@ -102,11 +106,11 @@ const CompletionStyleSection = ({
             step={8}
             value={maxChars}
             onChange={event => onSetMaxChars(event.target.value)}
-            className="w-28 rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+            className="w-28 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200"
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <span className="text-sm text-stone-700">
+        <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <span className="text-sm text-stone-700 dark:text-neutral-200">
             {t('settings.autocomplete.completionStyle.overlayTtl')}
           </span>
           <input
@@ -116,15 +120,17 @@ const CompletionStyleSection = ({
             step={100}
             value={overlayTtlMs}
             onChange={event => onSetOverlayTtlMs(event.target.value)}
-            className="w-28 rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700"
+            className="w-28 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200"
           />
         </label>
-        <label className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <span className="text-sm text-stone-700">{t('autocomplete.stylePreset')}</span>
+        <label className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <span className="text-sm text-stone-700 dark:text-neutral-200">
+            {t('autocomplete.stylePreset')}
+          </span>
           <select
             value={stylePreset}
             onChange={event => onSetStylePreset(event.target.value)}
-            className="rounded border border-stone-300 bg-white px-2 py-1 text-xs text-stone-700">
+            className="rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200">
             <option value="balanced">Balanced</option>
             <option value="concise">Concise</option>
             <option value="formal">Formal</option>
@@ -133,61 +139,63 @@ const CompletionStyleSection = ({
           </select>
         </label>
         <div className="space-y-1">
-          <div className="text-xs text-stone-600">
+          <div className="text-xs text-stone-600 dark:text-neutral-300">
             {t('settings.autocomplete.completionStyle.styleInstructions')}
           </div>
           <textarea
             value={styleInstructions}
             onChange={event => onSetStyleInstructions(event.target.value)}
             rows={3}
-            className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+            className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
           />
         </div>
         <div className="space-y-1">
-          <div className="text-xs text-stone-600">
+          <div className="text-xs text-stone-600 dark:text-neutral-300">
             {t('settings.autocomplete.completionStyle.styleExamples')}
           </div>
           <textarea
             value={styleExamplesText}
             onChange={event => onSetStyleExamplesText(event.target.value)}
             rows={3}
-            className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+            className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
           />
         </div>
         <div className="space-y-1">
-          <div className="text-xs text-stone-600">{t('autocomplete.disabledApps')}</div>
+          <div className="text-xs text-stone-600 dark:text-neutral-300">
+            {t('autocomplete.disabledApps')}
+          </div>
           <textarea
             value={disabledAppsText}
             onChange={event => onSetDisabledAppsText(event.target.value)}
             rows={3}
-            className="w-full rounded border border-stone-200 bg-stone-50 p-2 text-xs text-stone-700"
+            className="w-full rounded border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 text-xs text-stone-700 dark:text-neutral-200"
           />
         </div>
         <button
           type="button"
           onClick={onSaveConfig}
           disabled={isSaving}
-          className="rounded-lg border border-primary-500/60 bg-primary-50 px-3 py-2 text-sm text-primary-600 disabled:opacity-50">
+          className="rounded-lg border border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-600 dark:text-primary-300 disabled:opacity-50">
           {isSaving ? t('autocomplete.saving') : t('autocomplete.saveSettings')}
         </button>
       </section>
 
-      <section className="rounded-2xl border border-stone-200 bg-white p-4 space-y-3">
+      <section className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-stone-900">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {t('settings.autocomplete.completionStyle.personalizationHistory')}
           </h3>
           <button
             type="button"
             onClick={onClearHistory}
             disabled={isClearingHistory || historyEntries.length === 0}
-            className="rounded-lg border border-red-500/60 bg-red-50 px-3 py-1.5 text-xs text-red-600 disabled:opacity-40">
+            className="rounded-lg border border-red-500/60 bg-red-50 dark:bg-red-500/10 px-3 py-1.5 text-xs text-red-600 dark:text-red-300 disabled:opacity-40">
             {isClearingHistory
               ? t('settings.autocomplete.completionStyle.clearing')
               : t('settings.autocomplete.completionStyle.clearHistory')}
           </button>
         </div>
-        <p className="text-xs text-stone-500">
+        <p className="text-xs text-stone-500 dark:text-neutral-400">
           {isHistoryLoading
             ? t('common.loading')
             : historyEntries.length === 0
@@ -195,23 +203,25 @@ const CompletionStyleSection = ({
               : `${String(historyEntries.length)} ${historyEntries.length === 1 ? t('settings.autocomplete.completionStyle.acceptedCompletion') : t('settings.autocomplete.completionStyle.acceptedCompletions')}`}
         </p>
         {historyEntries.length > 0 && (
-          <div className="max-h-48 overflow-y-auto rounded-xl border border-stone-200 bg-stone-50 p-2 space-y-1">
+          <div className="max-h-48 overflow-y-auto rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-2 space-y-1">
             {historyEntries.map((entry, idx) => (
               <div
                 key={`${String(entry.timestamp_ms)}-${String(idx)}`}
-                className="flex flex-col gap-0.5 rounded-lg bg-white px-2 py-1.5 text-xs border border-stone-100">
-                <div className="flex items-center gap-2 text-stone-500">
+                className="flex flex-col gap-0.5 rounded-lg bg-white dark:bg-neutral-900 px-2 py-1.5 text-xs border border-stone-100 dark:border-neutral-800">
+                <div className="flex items-center gap-2 text-stone-500 dark:text-neutral-400">
                   <span className="shrink-0">{new Date(entry.timestamp_ms).toLocaleString()}</span>
                   {entry.app_name && (
-                    <span className="rounded bg-stone-100 px-1 text-stone-600">
+                    <span className="rounded bg-stone-100 dark:bg-neutral-800 px-1 text-stone-600 dark:text-neutral-300">
                       {entry.app_name}
                     </span>
                   )}
                 </div>
-                <div className="flex items-baseline gap-1 text-stone-700 truncate">
-                  <span className="shrink-0 text-stone-400">…</span>
-                  <span className="truncate text-stone-500">{entry.context.slice(-40)}</span>
-                  <span className="shrink-0 text-stone-400">→</span>
+                <div className="flex items-baseline gap-1 text-stone-700 dark:text-neutral-200 truncate">
+                  <span className="shrink-0 text-stone-400 dark:text-neutral-500">…</span>
+                  <span className="truncate text-stone-500 dark:text-neutral-400">
+                    {entry.context.slice(-40)}
+                  </span>
+                  <span className="shrink-0 text-stone-400 dark:text-neutral-500">→</span>
                   <span className="font-medium text-primary-500 truncate">{entry.suggestion}</span>
                 </div>
               </div>
diff --git a/app/src/components/settings/panels/billing/AutoRechargeSection.tsx b/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
index bb65ac079..00cb8d6f8 100644
--- a/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
+++ b/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
@@ -72,14 +72,14 @@ const AutoRechargeSection = ({
 }: AutoRechargeSectionProps) => {
   const { t } = useT();
   return (
-    <div className="rounded-2xl border border-stone-200 bg-white overflow-hidden">
+    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden">
       {/* Header row */}
       <div className="flex items-center justify-between p-3">
         <div>
-          <p className="text-md font-semibold text-stone-900">
+          <p className="text-md font-semibold text-stone-900 dark:text-neutral-100">
             {t('settings.billing.autoRecharge.title')}
           </p>
-          <p className="text-[11px] text-stone-400 mt-0.5">
+          <p className="text-[11px] text-stone-400 dark:text-neutral-500 mt-0.5">
             {t('settings.billing.autoRecharge.subtitle')}
           </p>
         </div>
@@ -96,7 +96,7 @@ const AutoRechargeSection = ({
               arSaving ? 'opacity-50 cursor-not-allowed' : ''
             } ${arSettings?.enabled ? 'bg-primary-500' : 'bg-stone-600'}`}>
             <span
-              className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
+              className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
                 arSettings?.enabled ? 'translate-x-5' : 'translate-x-0'
               }`}
             />
@@ -125,11 +125,11 @@ const AutoRechargeSection = ({
 
       {/* Settings — only shown when enabled */}
       {!arLoading && arSettings?.enabled && (
-        <div className="border-t border-stone-200 px-3 pt-3 pb-2 space-y-3">
+        <div className="border-t border-stone-200 dark:border-neutral-800 px-3 pt-3 pb-2 space-y-3">
           {/* Status row */}
           <div className="flex items-center gap-3 flex-wrap">
             {arSettings.inFlight && (
-              <span className="flex items-center gap-1 text-[10px] text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2 py-0.5">
+              <span className="flex items-center gap-1 text-[10px] text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 rounded-full px-2 py-0.5">
                 <svg className="w-2.5 h-2.5 animate-spin" fill="none" viewBox="0 0 24 24">
                   <circle
                     className="opacity-25"
@@ -149,13 +149,13 @@ const AutoRechargeSection = ({
               </span>
             )}
             {arSettings.spentThisWeekUsd > 0 && (
-              <span className="text-[10px] text-stone-400">
+              <span className="text-[10px] text-stone-400 dark:text-neutral-500">
                 ${arSettings.spentThisWeekUsd.toFixed(2)} of ${arSettings.weeklyLimitUsd} used this
                 week
               </span>
             )}
             {arSettings.lastRechargeAt && (
-              <span className="text-[10px] text-stone-500">
+              <span className="text-[10px] text-stone-500 dark:text-neutral-400">
                 {t('settings.billing.autoRecharge.lastRecharged')}{' '}
                 {new Date(arSettings.lastRechargeAt).toLocaleDateString('en-US', {
                   month: 'short',
@@ -188,7 +188,7 @@ const AutoRechargeSection = ({
 
           {/* Trigger threshold */}
           <div>
-            <p className="text-[11px] text-stone-400 mb-1.5">
+            <p className="text-[11px] text-stone-400 dark:text-neutral-500 mb-1.5">
               {t('settings.billing.autoRecharge.rechargeWhen')}
             </p>
             <div className="flex gap-1.5 flex-wrap">
@@ -199,7 +199,7 @@ const AutoRechargeSection = ({
                   className={`px-2.5 py-1 text-xs rounded-lg border transition-colors ${
                     arThreshold === v
                       ? 'bg-primary-500/20 text-primary-400 border-primary-500/40'
-                      : 'bg-stone-100 text-stone-500 border-stone-200 hover:text-stone-700'
+                      : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 border-stone-200 dark:border-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200'
                   }`}>
                   ${v}
                 </button>
@@ -209,7 +209,7 @@ const AutoRechargeSection = ({
 
           {/* Recharge amount */}
           <div>
-            <p className="text-[11px] text-stone-400 mb-1.5">
+            <p className="text-[11px] text-stone-400 dark:text-neutral-500 mb-1.5">
               {t('settings.billing.autoRecharge.addAmount')}
             </p>
             <div className="flex gap-1.5 flex-wrap">
@@ -220,7 +220,7 @@ const AutoRechargeSection = ({
                   className={`px-2.5 py-1 text-xs rounded-lg border transition-colors ${
                     arAmount === v
                       ? 'bg-primary-500/20 text-primary-400 border-primary-500/40'
-                      : 'bg-stone-100 text-stone-500 border-stone-200 hover:text-stone-700'
+                      : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 border-stone-200 dark:border-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200'
                   }`}>
                   ${v}
                 </button>
@@ -230,7 +230,7 @@ const AutoRechargeSection = ({
 
           {/* Weekly limit */}
           <div>
-            <p className="text-[11px] text-stone-400 mb-1.5">
+            <p className="text-[11px] text-stone-400 dark:text-neutral-500 mb-1.5">
               {t('settings.billing.autoRecharge.weeklyLimit')}
             </p>
             <div className="flex gap-1.5 flex-wrap">
@@ -241,7 +241,7 @@ const AutoRechargeSection = ({
                   className={`px-2.5 py-1 text-xs rounded-lg border transition-colors ${
                     arWeeklyLimit === v
                       ? 'bg-primary-500/20 text-primary-400 border-primary-500/40'
-                      : 'bg-stone-100 text-stone-500 border-stone-200 hover:text-stone-700'
+                      : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 border-stone-200 dark:border-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200'
                   }`}>
                   ${v}
                 </button>
@@ -263,7 +263,7 @@ const AutoRechargeSection = ({
               disabled={arSaving || arAmount <= arThreshold}
               className={`w-full py-1.5 text-xs font-medium rounded-lg transition-colors ${
                 arSaving || arAmount <= arThreshold
-                  ? 'bg-stone-700/40 text-stone-500 cursor-not-allowed'
+                  ? 'bg-stone-700/40 text-stone-500 dark:text-neutral-400 cursor-not-allowed'
                   : 'bg-primary-500 hover:bg-primary-600 text-white'
               }`}>
               {arSaving
@@ -275,9 +275,9 @@ const AutoRechargeSection = ({
       )}
 
       {/* Payment methods */}
-      <div className="border-t border-stone-200 px-3 py-2.5">
+      <div className="border-t border-stone-200 dark:border-neutral-800 px-3 py-2.5">
         <div className="flex items-center justify-between mb-2">
-          <p className="text-[11px] font-medium text-stone-600">
+          <p className="text-[11px] font-medium text-stone-600 dark:text-neutral-300">
             {t('settings.billing.autoRecharge.paymentMethods')}
           </p>
           <button
@@ -294,9 +294,9 @@ const AutoRechargeSection = ({
             ))}
           </div>
         ) : cards.length === 0 ? (
-          <div className="flex items-center gap-2 rounded-lg bg-stone-50 border border-stone-200 p-2.5">
+          <div className="flex items-center gap-2 rounded-lg bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-2.5">
             <svg
-              className="w-4 h-4 text-stone-500 flex-shrink-0"
+              className="w-4 h-4 text-stone-500 dark:text-neutral-400 flex-shrink-0"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
@@ -307,7 +307,7 @@ const AutoRechargeSection = ({
                 d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
               />
             </svg>
-            <p className="text-[11px] text-stone-500">
+            <p className="text-[11px] text-stone-500 dark:text-neutral-400">
               {t('settings.billing.autoRecharge.noCards')}
             </p>
           </div>
@@ -321,10 +321,10 @@ const AutoRechargeSection = ({
               return (
                 <div
                   key={card.id}
-                  className="flex items-center gap-2 rounded-lg bg-stone-50 border border-stone-200 px-2.5 py-2">
+                  className="flex items-center gap-2 rounded-lg bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 px-2.5 py-2">
                   {/* Card icon */}
                   <svg
-                    className="w-4 h-4 text-stone-400 flex-shrink-0"
+                    className="w-4 h-4 text-stone-400 dark:text-neutral-500 flex-shrink-0"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
@@ -339,7 +339,7 @@ const AutoRechargeSection = ({
                   {/* Card info */}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1.5 flex-wrap">
-                      <span className="text-xs text-stone-900 font-medium">
+                      <span className="text-xs text-stone-900 dark:text-neutral-100 font-medium">
                         {cardBrandLabel(card.brand)} ••••{card.last4}
                       </span>
                       {card.isDefault && (
@@ -348,7 +348,7 @@ const AutoRechargeSection = ({
                         </span>
                       )}
                     </div>
-                    <p className="text-[10px] text-stone-500 mt-0.5">
+                    <p className="text-[10px] text-stone-500 dark:text-neutral-400 mt-0.5">
                       Expires {String(card.expMonth).padStart(2, '0')}/
                       {String(card.expYear).slice(-2)}
                     </p>
@@ -360,7 +360,7 @@ const AutoRechargeSection = ({
                       <button
                         onClick={() => onSetDefault(card.id)}
                         disabled={!!settingDefaultId || !!deletingCardId}
-                        className="text-[10px] text-stone-500 hover:text-stone-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed px-1.5 py-1">
+                        className="text-[10px] text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed px-1.5 py-1">
                         {isSettingDefault ? '…' : t('settings.billing.autoRecharge.setDefault')}
                       </button>
                     )}
@@ -375,7 +375,7 @@ const AutoRechargeSection = ({
                         </button>
                         <button
                           onClick={() => setConfirmDeleteId(null)}
-                          className="text-[10px] text-stone-500 hover:text-stone-400 transition-colors px-1 py-1">
+                          className="text-[10px] text-stone-500 dark:text-neutral-400 hover:text-stone-400 dark:text-neutral-500 transition-colors px-1 py-1">
                           {t('common.cancel')}
                         </button>
                       </div>
@@ -383,7 +383,7 @@ const AutoRechargeSection = ({
                       <button
                         onClick={() => setConfirmDeleteId(card.id)}
                         disabled={isDeleting || !!settingDefaultId}
-                        className="text-[10px] text-stone-500 hover:text-coral-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed px-1.5 py-1">
+                        className="text-[10px] text-stone-500 dark:text-neutral-400 hover:text-coral-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed px-1.5 py-1">
                         {t('common.remove')}
                       </button>
                     )}
diff --git a/app/src/components/settings/panels/billing/BillingHistoryTab.tsx b/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
index ba564964e..4d8800a38 100644
--- a/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
+++ b/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
@@ -15,24 +15,26 @@ export default function BillingHistoryTab({
   const { t } = useT();
   return (
     <section className="space-y-4">
-      <div className="flex flex-col gap-2 rounded-2xl bg-white p-4 border border-stone-200">
-        <h3 className="font-headline text-2xl font-bold tracking-tight text-stone-950">
+      <div className="flex flex-col gap-2 rounded-2xl bg-white dark:bg-neutral-900 p-4 border border-stone-200 dark:border-neutral-800">
+        <h3 className="font-headline text-2xl font-bold tracking-tight text-stone-950 dark:text-neutral-50">
           {t('settings.billing.history.title')}
         </h3>
-        <p className="mt-1 text-sm text-stone-500">{t('settings.billing.history.desc')}</p>
+        <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
+          {t('settings.billing.history.desc')}
+        </p>
         <div className="flex items-center justify-between gap-3">
           {hasActive && (
             <button
               onClick={onManageSubscription}
-              className="text-sm font-semibold text-primary-600 transition-colors hover:text-primary-700">
+              className="text-sm font-semibold text-primary-600 dark:text-primary-300 transition-colors hover:text-primary-700 dark:text-primary-300">
               {t('settings.billing.history.openPortal')}
             </button>
           )}
         </div>
       </div>
-      <div className="overflow-hidden rounded-[28px] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
+      <div className="overflow-hidden rounded-[28px] bg-white dark:bg-neutral-900 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
         {transactionRows.length > 0 ? (
-          <div className="divide-y divide-stone-100">
+          <div className="divide-y divide-stone-100 dark:divide-neutral-800">
             {transactionRows.map(transaction => {
               const isEarn = transaction.type === 'EARN';
               return (
@@ -40,8 +42,10 @@ export default function BillingHistoryTab({
                   key={transaction.id}
                   className="grid gap-3 px-5 py-4 text-sm sm:grid-cols-[1.3fr_0.8fr_0.7fr_0.8fr] sm:items-center">
                   <div>
-                    <p className="font-semibold text-stone-950">{transaction.action}</p>
-                    <p className="mt-1 text-xs text-stone-500">
+                    <p className="font-semibold text-stone-950 dark:text-neutral-50">
+                      {transaction.action}
+                    </p>
+                    <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
                       {new Date(transaction.createdAt).toLocaleDateString(undefined, {
                         month: 'short',
                         day: 'numeric',
@@ -49,12 +53,13 @@ export default function BillingHistoryTab({
                       })}
                     </p>
                   </div>
-                  <div className="text-stone-500">{transaction.type}</div>
-                  <div className={`font-semibold ${isEarn ? 'text-sage-600' : 'text-stone-950'}`}>
+                  <div className="text-stone-500 dark:text-neutral-400">{transaction.type}</div>
+                  <div
+                    className={`font-semibold ${isEarn ? 'text-sage-600 dark:text-sage-300' : 'text-stone-950 dark:text-neutral-50'}`}>
                     {isEarn ? '+' : '-'}${Math.abs(transaction.amountUsd).toFixed(2)}
                   </div>
                   <div className="sm:text-right">
-                    <span className="rounded-full bg-stone-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-stone-500">
+                    <span className="rounded-full bg-stone-100 dark:bg-neutral-800 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-stone-500 dark:text-neutral-400">
                       {t('settings.billing.history.posted')}
                     </span>
                   </div>
@@ -63,7 +68,7 @@ export default function BillingHistoryTab({
             })}
           </div>
         ) : (
-          <div className="px-5 py-8 text-sm text-stone-500">
+          <div className="px-5 py-8 text-sm text-stone-500 dark:text-neutral-400">
             {t('settings.billing.history.empty')}
           </div>
         )}
diff --git a/app/src/components/settings/panels/billing/InferenceBudget.tsx b/app/src/components/settings/panels/billing/InferenceBudget.tsx
index ddbc1e169..0944ac2c9 100644
--- a/app/src/components/settings/panels/billing/InferenceBudget.tsx
+++ b/app/src/components/settings/panels/billing/InferenceBudget.tsx
@@ -9,16 +9,18 @@ interface InferenceBudgetProps {
 const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps) => {
   const { t } = useT();
   return (
-    <div className="rounded-2xl border border-stone-200 bg-white p-3">
+    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
       <div className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.billing.inferenceBudget.title')}
         </h3>
         {isLoadingCredits && (
-          <span className="text-[10px] text-stone-500">{t('common.loading')}</span>
+          <span className="text-[10px] text-stone-500 dark:text-neutral-400">
+            {t('common.loading')}
+          </span>
         )}
         {teamUsage && !isLoadingCredits && (
-          <span className="text-xs text-stone-400">
+          <span className="text-xs text-stone-400 dark:text-neutral-500">
             {teamUsage.cycleBudgetUsd > 0
               ? t('settings.billing.inferenceBudget.remaining')
                   .replace('{remaining}', (teamUsage.remainingUsd ?? 0).toFixed(2))
@@ -30,7 +32,7 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
       {teamUsage ? (
         teamUsage.cycleBudgetUsd > 0 ? (
           <>
-            <div className="h-1.5 bg-stone-200 rounded-full overflow-hidden mb-2">
+            <div className="h-1.5 bg-stone-200 dark:bg-neutral-800 rounded-full overflow-hidden mb-2">
               <div
                 className={`h-full rounded-full transition-all duration-300 ${
                   teamUsage.remainingUsd <= 0
@@ -49,13 +51,13 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
             </div>
             <div className="mt-1 flex items-center justify-between">
               {((teamUsage.cycleLimit5hr ?? 0) > 0 || (teamUsage.fiveHourCapUsd ?? 0) > 0) && (
-                <span className="text-[11px] text-stone-500">
+                <span className="text-[11px] text-stone-500 dark:text-neutral-400">
                   {t('settings.billing.inferenceBudget.tenHourCap')
                     .replace('{used}', (teamUsage.cycleLimit5hr ?? 0).toFixed(2))
                     .replace('{cap}', (teamUsage.fiveHourCapUsd ?? 0).toFixed(2))}
                 </span>
               )}
-              <span className="text-[11px] text-stone-500 ml-auto">
+              <span className="text-[11px] text-stone-500 dark:text-neutral-400 ml-auto">
                 {t('settings.billing.inferenceBudget.cycleEnds').replace(
                   '{date}',
                   new Date(teamUsage.cycleEndsAt).toLocaleDateString('en-US')
@@ -69,16 +71,18 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
             )}
           </>
         ) : (
-          <div className="rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-            <p className="text-[11px] text-stone-600">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+            <p className="text-[11px] text-stone-600 dark:text-neutral-300">
               {t('settings.billing.inferenceBudget.noBudgetDesc')}
             </p>
           </div>
         )
       ) : isLoadingCredits ? (
-        <div className="h-1.5 w-full rounded-full bg-stone-200 animate-pulse" />
+        <div className="h-1.5 w-full rounded-full bg-stone-200 dark:bg-neutral-800 animate-pulse" />
       ) : (
-        <p className="text-xs text-stone-500">{t('settings.billing.inferenceBudget.loadError')}</p>
+        <p className="text-xs text-stone-500 dark:text-neutral-400">
+          {t('settings.billing.inferenceBudget.loadError')}
+        </p>
       )}
     </div>
   );
diff --git a/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx b/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx
index 69874ad0c..6704dd009 100644
--- a/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx
+++ b/app/src/components/settings/panels/billing/PayAsYouGoCard.tsx
@@ -31,36 +31,36 @@ const PayAsYouGoCard = ({
 
   return (
     <>
-      <div className="rounded-lg bg-white p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
-        <h3 className="font-headline text-xl font-bold tracking-tight text-stone-950">
+      <div className="rounded-lg bg-white dark:bg-neutral-900 p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
+        <h3 className="font-headline text-xl font-bold tracking-tight text-stone-950 dark:text-neutral-50">
           {t('settings.billing.payAsYouGo.creditBalanceTitle')}
         </h3>
-        <p className="mt-1 text-sm text-stone-500">
+        <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
           {t('settings.billing.payAsYouGo.creditBalanceDesc')}
         </p>
         {creditBalance ? (
           <div className="grid mt-4 gap-3 sm:grid-cols-3">
             <div>
-              <p className="text-sm font-semibold text-stone-400">
+              <p className="text-sm font-semibold text-stone-400 dark:text-neutral-500">
                 {t('settings.billing.payAsYouGo.available')}
               </p>
-              <p className="mt-2 text-2xl font-bold tracking-tight text-stone-600">
+              <p className="mt-2 text-2xl font-bold tracking-tight text-stone-600 dark:text-neutral-300">
                 ${availableCredits.toFixed(2)}
               </p>
             </div>
             <div>
-              <p className="text-sm font-semibold text-stone-400">
+              <p className="text-sm font-semibold text-stone-400 dark:text-neutral-500">
                 {t('settings.billing.payAsYouGo.promotionalCredits')}
               </p>
-              <p className="mt-2 text-xl font-bold tracking-tight text-stone-600">
+              <p className="mt-2 text-xl font-bold tracking-tight text-stone-600 dark:text-neutral-300">
                 ${promoCredits.toFixed(2)}
               </p>
             </div>
             <div>
-              <p className="text-sm font-semibold text-stone-400">
+              <p className="text-sm font-semibold text-stone-400 dark:text-neutral-500">
                 {t('settings.billing.payAsYouGo.topUpBalance')}
               </p>
-              <p className="mt-2 text-xl font-bold tracking-tight text-stone-600">
+              <p className="mt-2 text-xl font-bold tracking-tight text-stone-600 dark:text-neutral-300">
                 ${teamTopupCredits.toFixed(2)}
               </p>
             </div>
@@ -68,20 +68,23 @@ const PayAsYouGoCard = ({
         ) : isLoadingCredits ? (
           <div className="mt-5 grid gap-3 sm:grid-cols-3">
             {[0, 1, 2].map(index => (
-              <div key={index} className="h-24 rounded-2xl bg-stone-100 animate-pulse" />
+              <div
+                key={index}
+                className="h-24 rounded-2xl bg-stone-100 dark:bg-neutral-800 animate-pulse"
+              />
             ))}
           </div>
         ) : (
-          <p className="mt-5 text-sm text-stone-500">
+          <p className="mt-5 text-sm text-stone-500 dark:text-neutral-400">
             {t('settings.billing.payAsYouGo.unableToLoad')}
           </p>
         )}
       </div>
-      <div className="rounded-lg bg-white p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
-        <h3 className="font-headline text-xl font-bold tracking-tight text-stone-950">
+      <div className="rounded-lg bg-white dark:bg-neutral-900 p-6 shadow-[0_24px_70px_rgba(15,23,42,0.06)] ring-1 ring-stone-950/5">
+        <h3 className="font-headline text-xl font-bold tracking-tight text-stone-950 dark:text-neutral-50">
           {t('settings.billing.payAsYouGo.chooseTopUpTitle')}
         </h3>
-        <p className="mt-1 text-sm text-stone-500">
+        <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
           {t('settings.billing.payAsYouGo.chooseTopUpDesc')}
         </p>
 
@@ -91,27 +94,29 @@ const PayAsYouGoCard = ({
               key={amount}
               onClick={() => onTopUp(amount)}
               disabled={isToppingUp}
-              className="group rounded-2xl border border-primary-200/50 bg-primary-50/50 px-4 py-5 text-center transition-all hover:border-primary-200 disabled:cursor-not-allowed disabled:opacity-50">
-              <div className="text-2xl font-bold tracking-tight text-primary-600">
+              className="group rounded-2xl border border-primary-200 dark:border-primary-500/30 bg-primary-50/50 px-4 py-5 text-center transition-all hover:border-primary-200 dark:border-primary-500/30 disabled:cursor-not-allowed disabled:opacity-50">
+              <div className="text-2xl font-bold tracking-tight text-primary-600 dark:text-primary-300">
                 {isToppingUp ? t('settings.billing.payAsYouGo.opening') : `$${amount.toFixed(2)}`}
               </div>
-              <div className="mt-1 text-[11px] font-semibold text-stone-400">
+              <div className="mt-1 text-[11px] font-semibold text-stone-400 dark:text-neutral-500">
                 {t('settings.billing.payAsYouGo.topUpCredits')}
               </div>
             </button>
           ))}
         </div>
 
-        <div className="mt-4 rounded-2xl border border-stone-200 bg-stone-50 p-4">
+        <div className="mt-4 rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
           <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto]">
             <div>
               <label
                 htmlFor="billing-custom-top-up"
-                className="text-[11px] font-semibold uppercase tracking-[0.24em] text-stone-400">
+                className="text-[11px] font-semibold uppercase tracking-[0.24em] text-stone-400 dark:text-neutral-500">
                 {t('settings.billing.payAsYouGo.customAmount')}
               </label>
-              <div className="mt-2 flex items-center rounded-2xl bg-white px-4 ring-1 ring-stone-200 focus-within:ring-2 focus-within:ring-primary-500/20">
-                <span className="text-sm font-semibold text-stone-500">$</span>
+              <div className="mt-2 flex items-center rounded-2xl bg-white dark:bg-neutral-900 px-4 ring-1 ring-stone-200 focus-within:ring-2 focus-within:ring-primary-500/20">
+                <span className="text-sm font-semibold text-stone-500 dark:text-neutral-400">
+                  $
+                </span>
                 <input
                   id="billing-custom-top-up"
                   type="number"
@@ -124,17 +129,17 @@ const PayAsYouGoCard = ({
                     if (e.key === 'Enter') handleCustomTopUp();
                   }}
                   placeholder={t('settings.billing.payAsYouGo.enterAmount')}
-                  className="w-full border-0 bg-transparent px-3 py-3 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-0"
+                  className="w-full border-0 bg-transparent px-3 py-3 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-0"
                 />
               </div>
-              <p className="mt-2 text-xs text-stone-500">
+              <p className="mt-2 text-xs text-stone-500 dark:text-neutral-400">
                 {t('settings.billing.payAsYouGo.chooseTopUpDesc')}
               </p>
             </div>
             <button
               onClick={handleCustomTopUp}
               disabled={!customTopUpAmountValid || isToppingUp}
-              className="rounded-2xl bg-stone-950 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50 lg:self-end">
+              className="rounded-2xl bg-stone-950 dark:bg-neutral-50 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50 lg:self-end">
               {isToppingUp
                 ? t('settings.billing.payAsYouGo.opening')
                 : t('settings.billing.payAsYouGo.chargeCustomAmount')}
diff --git a/app/src/components/settings/panels/billing/SubscriptionPlans.tsx b/app/src/components/settings/panels/billing/SubscriptionPlans.tsx
index 409a6f241..f6bed1c0d 100644
--- a/app/src/components/settings/panels/billing/SubscriptionPlans.tsx
+++ b/app/src/components/settings/panels/billing/SubscriptionPlans.tsx
@@ -28,32 +28,32 @@ const SubscriptionPlans = ({
   const { t } = useT();
   return (
     <>
-      <div className="flex flex-col gap-2 rounded-2xl bg-white p-4 border border-stone-200">
-        <h3 className="font-headline text-2xl font-bold tracking-tight text-stone-950">
+      <div className="flex flex-col gap-2 rounded-2xl bg-white dark:bg-neutral-900 p-4 border border-stone-200 dark:border-neutral-800">
+        <h3 className="font-headline text-2xl font-bold tracking-tight text-stone-950 dark:text-neutral-50">
           {t('settings.billing.subscription.chooseTitle')}
         </h3>
-        <p className="mt-1 text-sm text-stone-500">
+        <p className="mt-1 text-sm text-stone-500 dark:text-neutral-400">
           {t('settings.billing.subscription.chooseSubtitle')}
         </p>
 
         <div className="flex items-center justify-between mt-4">
           <div>
-            <p className="text-sm font-semibold text-stone-950">
+            <p className="text-sm font-semibold text-stone-950 dark:text-neutral-50">
               {t('settings.billing.subscription.cryptoQuestion')}
             </p>
-            <p className="mt-0.5 text-xs text-stone-500">
+            <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
               {t('settings.billing.subscription.cryptoDesc')}
             </p>
           </div>
           <button
             onClick={() => setPaymentMethod(paymentMethod === 'card' ? 'crypto' : 'card')}
             className={`relative h-6 w-11 rounded-full transition-colors ${
-              paymentMethod === 'crypto' ? 'bg-primary-600' : 'bg-stone-300'
+              paymentMethod === 'crypto' ? 'bg-primary-600' : 'bg-stone-300 dark:bg-neutral-700'
             }`}
             role="switch"
             aria-checked={paymentMethod === 'crypto'}>
             <span
-              className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
+              className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white dark:bg-neutral-900 shadow transition-transform ${
                 paymentMethod === 'crypto' ? 'translate-x-5' : 'translate-x-0'
               }`}
             />
@@ -63,7 +63,7 @@ const SubscriptionPlans = ({
 
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div className="mx-auto inline-flex w-fit rounded-full bg-white p-1 shadow-sm ring-1 ring-stone-950/5 lg:mx-0">
+          <div className="mx-auto inline-flex w-fit rounded-full bg-white dark:bg-neutral-900 p-1 shadow-sm ring-1 ring-stone-950/5 lg:mx-0">
             <button
               onClick={() => {
                 if (paymentMethod !== 'crypto') setBillingInterval('monthly');
@@ -72,7 +72,7 @@ const SubscriptionPlans = ({
               className={`rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
                 billingInterval === 'monthly'
                   ? 'bg-primary-600 text-white'
-                  : 'text-stone-500 hover:text-stone-900'
+                  : 'text-stone-500 dark:text-neutral-400 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100'
               } ${paymentMethod === 'crypto' ? 'cursor-not-allowed opacity-40' : ''}`}>
               {t('settings.billing.subscription.monthly')}
             </button>
@@ -81,7 +81,7 @@ const SubscriptionPlans = ({
               className={`rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
                 billingInterval === 'annual'
                   ? 'bg-primary-600 text-white'
-                  : 'text-stone-500 hover:text-stone-900'
+                  : 'text-stone-500 dark:text-neutral-400 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100'
               }`}>
               {t('settings.billing.subscription.annual')}
             </button>
@@ -103,7 +103,7 @@ const SubscriptionPlans = ({
                   d="M5 13l4 4L19 7"
                 />
               </svg>
-              <p className="text-sm font-medium text-sage-700">
+              <p className="text-sm font-medium text-sage-700 dark:text-sage-300">
                 {t('settings.billing.subscription.paymentConfirmed')}
               </p>
             </div>
@@ -128,7 +128,7 @@ const SubscriptionPlans = ({
                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                 />
               </svg>
-              <p className="text-sm text-amber-700">
+              <p className="text-sm text-amber-700 dark:text-amber-300">
                 {t('settings.billing.subscription.waitingPayment')}
               </p>
             </div>
@@ -148,10 +148,10 @@ const SubscriptionPlans = ({
                 key={plan.tier}
                 className={`relative flex flex-col gap-5 rounded-[24px] px-5 py-5 transition-all sm:flex-row sm:items-center sm:justify-between ${
                   isPopular
-                    ? 'bg-primary-50 ring-2 ring-primary-500 shadow-sm'
+                    ? 'bg-primary-50 dark:bg-primary-500/10 ring-2 ring-primary-500 shadow-sm'
                     : isCurrent
-                      ? 'bg-white ring-1 ring-primary-200 shadow-sm'
-                      : 'bg-white ring-1 ring-stone-950/5 shadow-sm'
+                      ? 'bg-white dark:bg-neutral-900 ring-1 ring-primary-200 shadow-sm'
+                      : 'bg-white dark:bg-neutral-900 ring-1 ring-stone-950/5 shadow-sm'
                 }`}>
                 <div className="flex items-start gap-4">
                   <div
@@ -159,8 +159,8 @@ const SubscriptionPlans = ({
                       plan.recommended
                         ? 'bg-primary-600 text-white'
                         : isCurrent
-                          ? 'bg-primary-100 text-primary-700'
-                          : 'bg-stone-100 text-stone-700'
+                          ? 'bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300'
+                          : 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200'
                     }`}>
                     {plan.tier === 'PRO' ? (
                       <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
@@ -197,7 +197,7 @@ const SubscriptionPlans = ({
 
                   <div>
                     <div className="flex flex-wrap items-center gap-2">
-                      <h4 className="font-headline text-xl font-bold tracking-tight text-stone-950">
+                      <h4 className="font-headline text-xl font-bold tracking-tight text-stone-950 dark:text-neutral-50">
                         {plan.name}
                       </h4>
                       {isPopular && (
@@ -206,7 +206,7 @@ const SubscriptionPlans = ({
                         </span>
                       )}
                       {isCurrent && !plan.recommended && (
-                        <span className="rounded-full bg-stone-950 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.24em] text-white">
+                        <span className="rounded-full bg-stone-950 dark:bg-neutral-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.24em] text-white">
                           {t('settings.billing.subscription.current')}
                         </span>
                       )}
@@ -215,7 +215,7 @@ const SubscriptionPlans = ({
                       {plan.features.slice(0, 4).map(feature => (
                         <span
                           key={feature.text}
-                          className="rounded-full bg-stone-100/50 border border-primary-200/50 px-3 py-1 text-xs font-medium text-stone-600">
+                          className="rounded-full bg-stone-100/50 border border-primary-200 dark:border-primary-500/30 px-3 py-1 text-xs font-medium text-stone-600 dark:text-neutral-300">
                           {feature.text}
                         </span>
                       ))}
@@ -225,16 +225,16 @@ const SubscriptionPlans = ({
 
                 <div className="flex items-end justify-between gap-2 sm:min-w-[148px] sm:flex-col sm:items-end">
                   <div className="text-right">
-                    <p className="text-2xl font-bold tracking-tight text-stone-950">
+                    <p className="text-2xl font-bold tracking-tight text-stone-950 dark:text-neutral-50">
                       {displayPrice(plan, billingInterval)}
                       {plan.tier !== 'FREE' && (
-                        <span className="text-sm font-medium text-stone-400">
+                        <span className="text-sm font-medium text-stone-400 dark:text-neutral-500">
                           {t('settings.billing.subscription.perMonth')}
                         </span>
                       )}
                     </p>
                     {plan.tier !== 'FREE' && billingInterval === 'annual' && (
-                      <p className="mt-1 text-xs text-stone-500">
+                      <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
                         {t('settings.billing.subscription.billedAnnually').replace(
                           '{price}',
                           String(plan.annualPrice)
@@ -242,7 +242,7 @@ const SubscriptionPlans = ({
                       </p>
                     )}
                     {savings && (
-                      <p className="mt-1 text-xs font-semibold uppercase text-primary-600">
+                      <p className="mt-1 text-xs font-semibold uppercase text-primary-600 dark:text-primary-300">
                         {t('settings.billing.subscription.save').replace('{pct}', String(savings))}
                       </p>
                     )}
@@ -258,8 +258,8 @@ const SubscriptionPlans = ({
                       disabled={isPurchasing}
                       className={`rounded-full px-4 py-2 text-xs font-semibold transition-colors ${
                         isPurchasing
-                          ? 'cursor-not-allowed bg-stone-200 text-stone-400'
-                          : 'bg-stone-950 text-white hover:bg-primary-600'
+                          ? 'cursor-not-allowed bg-stone-200 dark:bg-neutral-800 text-stone-400 dark:text-neutral-500'
+                          : 'bg-stone-950 dark:bg-neutral-50 text-white hover:bg-primary-600'
                       }`}>
                       {isThisPurchasing
                         ? t('settings.billing.subscription.waiting')
diff --git a/app/src/components/settings/panels/cron/CoreJobList.tsx b/app/src/components/settings/panels/cron/CoreJobList.tsx
index 5448642e1..14f1a71ab 100644
--- a/app/src/components/settings/panels/cron/CoreJobList.tsx
+++ b/app/src/components/settings/panels/cron/CoreJobList.tsx
@@ -24,18 +24,26 @@ const CoreJobList = ({
 }: CoreJobListProps) => {
   const { t } = useT();
   return (
-    <section className="rounded-xl border border-stone-200 bg-white">
-      <div className="p-4 border-b border-stone-200">
-        <h3 className="text-sm font-semibold text-stone-900">{t('settings.cron.jobs.title')}</h3>
-        <p className="text-xs text-stone-500 mt-1">{t('settings.cron.jobs.desc')}</p>
+    <section className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+      <div className="p-4 border-b border-stone-200 dark:border-neutral-800">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          {t('settings.cron.jobs.title')}
+        </h3>
+        <p className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
+          {t('settings.cron.jobs.desc')}
+        </p>
       </div>
 
       {loading && (
-        <div className="p-4 text-sm text-stone-400">{t('settings.cron.jobs.loading')}</div>
+        <div className="p-4 text-sm text-stone-400 dark:text-neutral-500">
+          {t('settings.cron.jobs.loading')}
+        </div>
       )}
 
       {!loading && coreJobs.length === 0 && (
-        <div className="p-4 text-sm text-stone-400">{t('settings.cron.jobs.empty')}</div>
+        <div className="p-4 text-sm text-stone-400 dark:text-neutral-500">
+          {t('settings.cron.jobs.empty')}
+        </div>
       )}
 
       {!loading &&
@@ -44,26 +52,28 @@ const CoreJobList = ({
           return (
             <div
               key={job.id}
-              className={`p-4 ${index === 0 ? '' : 'border-t border-stone-200'} space-y-3`}>
+              className={`p-4 ${index === 0 ? '' : 'border-t border-stone-200 dark:border-neutral-800'} space-y-3`}>
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <div className="text-sm font-semibold text-stone-900">{job.name || job.id}</div>
-                  <div className="text-[11px] text-stone-400">{job.id}</div>
+                  <div className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                    {job.name || job.id}
+                  </div>
+                  <div className="text-[11px] text-stone-400 dark:text-neutral-500">{job.id}</div>
                 </div>
                 <span
                   className={`px-2 py-1 text-[11px] font-semibold uppercase border rounded-full ${
                     job.enabled
-                      ? 'bg-sage-50 text-sage-700 border-sage-200'
-                      : 'bg-stone-100 text-stone-600 border-stone-200'
+                      ? 'bg-sage-50 dark:bg-sage-500/10 text-sage-700 dark:text-sage-300 border-sage-200 dark:border-sage-500/30'
+                      : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 border-stone-200 dark:border-neutral-800'
                   }`}>
                   {job.enabled ? t('common.enabled') : t('settings.cron.jobs.paused')}
                 </span>
               </div>
 
-              <div className="text-xs text-stone-600 space-y-1">
+              <div className="text-xs text-stone-600 dark:text-neutral-300 space-y-1">
                 <div>
                   {t('settings.cron.jobs.schedule')}{' '}
-                  <span className="font-medium text-stone-700">
+                  <span className="font-medium text-stone-700 dark:text-neutral-200">
                     {job.schedule.kind === 'cron'
                       ? job.schedule.expr
                       : job.schedule.kind === 'every'
@@ -73,14 +83,16 @@ const CoreJobList = ({
                 </div>
                 <div>
                   {t('settings.cron.jobs.nextRun')}{' '}
-                  <span className="font-medium text-stone-700">
+                  <span className="font-medium text-stone-700 dark:text-neutral-200">
                     {new Date(job.next_run).toLocaleString()}
                   </span>
                 </div>
                 {job.last_status && (
                   <div>
                     {t('settings.cron.jobs.lastStatus')}{' '}
-                    <span className="font-medium text-stone-700">{job.last_status}</span>
+                    <span className="font-medium text-stone-700 dark:text-neutral-200">
+                      {job.last_status}
+                    </span>
                   </div>
                 )}
               </div>
@@ -127,14 +139,16 @@ const CoreJobList = ({
               </div>
 
               {runs.length > 0 && (
-                <div className="rounded-lg border border-stone-200 bg-stone-50 p-3 space-y-1">
-                  <div className="text-[11px] uppercase tracking-wide text-stone-400">
+                <div className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-3 space-y-1">
+                  <div className="text-[11px] uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                     {t('settings.cron.jobs.recentRuns')}
                   </div>
                   {runs.map(run => (
-                    <div key={run.id} className="text-xs text-stone-600">
-                      <span className="font-medium text-stone-700">{run.status}</span> at{' '}
-                      {new Date(run.finished_at).toLocaleString()}
+                    <div key={run.id} className="text-xs text-stone-600 dark:text-neutral-300">
+                      <span className="font-medium text-stone-700 dark:text-neutral-200">
+                        {run.status}
+                      </span>{' '}
+                      at {new Date(run.finished_at).toLocaleString()}
                     </div>
                   ))}
                 </div>
diff --git a/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx b/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
index 3c75c0a16..77c4059a1 100644
--- a/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
+++ b/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
@@ -77,38 +77,38 @@ const DeviceCapabilitySection = ({
 
   return (
     <section className="space-y-3">
-      <h3 className="text-sm font-semibold text-stone-900">
+      <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
         {t('settings.localModel.deviceCapability.modelTier')}
       </h3>
 
       {presetsLoading && !presetsData && (
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 text-sm text-stone-500 animate-pulse">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 text-sm text-stone-500 dark:text-neutral-400 animate-pulse">
           {t('settings.localModel.deviceCapability.loadingDeviceInfo')}
         </div>
       )}
       {!presetsLoading && !presetsData && presetError && (
-        <div className="bg-red-50 rounded-lg border border-red-300 p-4 text-sm text-red-600">
+        <div className="bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-300 dark:border-red-500/40 p-4 text-sm text-red-600 dark:text-red-300">
           {t('settings.localModel.deviceCapability.couldNotLoadPresets')} {presetError}
         </div>
       )}
 
       {presetsData?.device && (
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-3">
           <div className="grid grid-cols-3 gap-3 text-xs">
             <div>
-              <div className="text-stone-500 uppercase tracking-wide">
+              <div className="text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
                 {t('settings.localModel.deviceCapability.ram')}
               </div>
-              <div className="text-stone-800 mt-0.5 font-medium">
+              <div className="text-stone-800 dark:text-neutral-100 mt-0.5 font-medium">
                 {formatRamGb(presetsData.device.total_ram_bytes)}
               </div>
             </div>
             <div>
-              <div className="text-stone-500 uppercase tracking-wide">
+              <div className="text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
                 {t('settings.localModel.deviceCapability.cpu')}
               </div>
               <div
-                className="text-stone-800 mt-0.5 font-medium truncate"
+                className="text-stone-800 dark:text-neutral-100 mt-0.5 font-medium truncate"
                 title={presetsData.device.cpu_brand}>
                 {t('settings.localModel.deviceCapability.cores').replace(
                   '{count}',
@@ -117,11 +117,11 @@ const DeviceCapabilitySection = ({
               </div>
             </div>
             <div>
-              <div className="text-stone-500 uppercase tracking-wide">
+              <div className="text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
                 {t('settings.localModel.deviceCapability.gpu')}
               </div>
               <div
-                className="text-stone-800 mt-0.5 font-medium truncate"
+                className="text-stone-800 dark:text-neutral-100 mt-0.5 font-medium truncate"
                 title={presetsData.device.gpu_description ?? undefined}>
                 {presetsData.device.has_gpu
                   ? (presetsData.device.gpu_description ??
@@ -137,10 +137,10 @@ const DeviceCapabilitySection = ({
         <div
           className={`rounded-lg border p-3 space-y-2 ${
             installFailed
-              ? 'border-red-300 bg-red-50'
+              ? 'border-red-300 dark:border-red-500/40 bg-red-50 dark:bg-red-500/10'
               : installInProgress
-                ? 'border-blue-300 bg-blue-50'
-                : 'border-amber-300 bg-amber-50'
+                ? 'border-blue-300 dark:border-blue-500/40 bg-blue-50 dark:bg-blue-500/10'
+                : 'border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10'
           }`}>
           {installInProgress ? (
             <>
@@ -153,10 +153,10 @@ const DeviceCapabilitySection = ({
                     : '…'}
                 </div>
               </div>
-              <div className="text-xs text-blue-800">
+              <div className="text-xs text-blue-800 dark:text-blue-200">
                 {installWarning ?? t('settings.localModel.deviceCapability.downloadingSetupDesc')}
               </div>
-              <div className="h-1.5 rounded-full bg-blue-200 overflow-hidden">
+              <div className="h-1.5 rounded-full bg-blue-200 dark:bg-blue-500/30 overflow-hidden">
                 <div className="h-full w-1/3 bg-blue-500 animate-pulse" />
               </div>
             </>
@@ -165,11 +165,11 @@ const DeviceCapabilitySection = ({
               <div className="text-sm font-semibold text-red-900">
                 {t('settings.localModel.deviceCapability.installFailed')}
               </div>
-              <div className="text-xs text-red-800">
+              <div className="text-xs text-red-800 dark:text-red-200">
                 {installWarning ?? t('settings.localModel.deviceCapability.installFailedDesc')}
               </div>
               {installError && (
-                <pre className="max-h-40 overflow-auto rounded bg-red-100 border border-red-200 p-2 text-[10px] text-red-700 leading-tight whitespace-pre-wrap break-words">
+                <pre className="max-h-40 overflow-auto rounded bg-red-100 dark:bg-red-500/20 border border-red-200 dark:border-red-500/30 p-2 text-[10px] text-red-700 dark:text-red-300 leading-tight whitespace-pre-wrap break-words">
                   {installError}
                 </pre>
               )}
@@ -189,14 +189,14 @@ const DeviceCapabilitySection = ({
                   href="https://ollama.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="px-3 py-1.5 text-xs rounded-md border border-red-300 hover:border-red-400 text-red-800">
+                  className="px-3 py-1.5 text-xs rounded-md border border-red-300 dark:border-red-500/40 hover:border-red-400 text-red-800 dark:text-red-200">
                   {t('settings.localModel.status.installManually')}
                 </a>
               </div>
             </>
           ) : (
             <>
-              <div className="text-xs text-amber-800">
+              <div className="text-xs text-amber-800 dark:text-amber-200">
                 <span className="font-semibold text-amber-900">
                   {t('settings.localModel.deviceCapability.installFirst')}
                 </span>{' '}
@@ -207,7 +207,7 @@ const DeviceCapabilitySection = ({
                   href="https://ollama.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="px-3 py-1.5 text-xs rounded-md border border-amber-300 hover:border-amber-400 text-amber-800">
+                  className="px-3 py-1.5 text-xs rounded-md border border-amber-300 dark:border-amber-500/40 hover:border-amber-400 text-amber-800 dark:text-amber-200">
                   {t('settings.localModel.status.ollamaDocs')}
                 </a>
               </div>
@@ -225,28 +225,28 @@ const DeviceCapabilitySection = ({
             disabled={applying !== null}
             className={`w-full text-left rounded-lg border p-3 transition-colors ${
               isDisabledActive
-                ? 'border-primary-400 bg-primary-50'
-                : 'border-stone-200 bg-stone-50 hover:bg-stone-100'
+                ? 'border-primary-400 bg-primary-50 dark:bg-primary-500/10'
+                : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800'
             } ${applying !== null ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <span className="text-sm font-semibold text-stone-900">
+                <span className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
                   {t('settings.localModel.deviceCapability.disabled')}
                 </span>
                 {isDisabledActive && (
-                  <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-primary-50 text-primary-600 uppercase tracking-wide">
+                  <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300 uppercase tracking-wide">
                     {t('settings.localModel.deviceCapability.active')}
                   </span>
                 )}
                 {(presetsData.recommend_disabled || !ollamaAvailable) && !isDisabledActive && (
-                  <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-amber-50 text-amber-700 uppercase tracking-wide">
+                  <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 uppercase tracking-wide">
                     {t('settings.localModel.deviceCapability.recommended')}
                   </span>
                 )}
               </div>
-              <span className="text-xs text-stone-500">0 GB</span>
+              <span className="text-xs text-stone-500 dark:text-neutral-400">0 GB</span>
             </div>
-            <div className="text-xs text-stone-500 mt-1">
+            <div className="text-xs text-stone-500 dark:text-neutral-400 mt-1">
               {t('settings.localModel.deviceCapability.disabledDesc')}
             </div>
           </button>
@@ -266,40 +266,44 @@ const DeviceCapabilitySection = ({
                 }
                 className={`w-full text-left rounded-lg border p-3 transition-colors ${
                   isCurrent
-                    ? 'border-primary-400 bg-primary-50'
-                    : 'border-stone-200 bg-stone-50 hover:bg-stone-100'
+                    ? 'border-primary-400 bg-primary-50 dark:bg-primary-500/10'
+                    : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800'
                 } ${
                   locked
-                    ? 'opacity-50 cursor-not-allowed hover:bg-stone-50'
+                    ? 'opacity-50 cursor-not-allowed hover:bg-stone-50 dark:hover:bg-neutral-800/60 dark:bg-neutral-800/60'
                     : applying !== null && !isApplying
                       ? 'opacity-60 cursor-not-allowed'
                       : 'cursor-pointer'
                 }`}>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-semibold text-stone-900">{preset.label}</span>
+                    <span className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
+                      {preset.label}
+                    </span>
                     {isCurrent && (
-                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-primary-50 text-primary-600 uppercase tracking-wide">
+                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300 uppercase tracking-wide">
                         {t('settings.localModel.deviceCapability.active')}
                       </span>
                     )}
                     {isApplying && (
-                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-stone-100 text-stone-500 uppercase tracking-wide">
+                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
                         {t('settings.localModel.deviceCapability.applying')}
                       </span>
                     )}
                     {locked && (
-                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-amber-50 text-amber-700 uppercase tracking-wide">
+                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300 uppercase tracking-wide">
                         {t('settings.localModel.deviceCapability.needsOllama')}
                       </span>
                     )}
                   </div>
-                  <span className="text-xs text-stone-500">
+                  <span className="text-xs text-stone-500 dark:text-neutral-400">
                     ~{Number(preset.approx_download_gb).toFixed(1)} GB
                   </span>
                 </div>
-                <div className="text-xs text-stone-400 mt-1">{preset.description}</div>
-                <div className="text-[10px] text-stone-500 mt-1">
+                <div className="text-xs text-stone-400 dark:text-neutral-500 mt-1">
+                  {preset.description}
+                </div>
+                <div className="text-[10px] text-stone-500 dark:text-neutral-400 mt-1">
                   Chat: {preset.chat_model_id} &middot; Vision:{' '}
                   {preset.vision_mode === 'disabled'
                     ? 'disabled'
@@ -311,19 +315,19 @@ const DeviceCapabilitySection = ({
           })}
 
           {presetsData.current_tier === 'custom' && !isDisabledActive && (
-            <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-700">
+            <div className="rounded-lg border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-3 text-xs text-amber-700 dark:text-amber-300">
               {t('settings.localModel.deviceCapability.customModelIds')}
             </div>
           )}
         </div>
       )}
 
-      {applyError && <div className="text-xs text-red-600">{applyError}</div>}
+      {applyError && <div className="text-xs text-red-600 dark:text-red-300">{applyError}</div>}
       {presetError && !(!presetsLoading && !presetsData) && (
-        <div className="text-xs text-red-600">{presetError}</div>
+        <div className="text-xs text-red-600 dark:text-red-300">{presetError}</div>
       )}
       {(applySuccess ?? presetSuccess) && (
-        <div className="text-xs text-green-700">
+        <div className="text-xs text-green-700 dark:text-green-300">
           {(applySuccess ?? presetSuccess)?.applied_tier === DISABLED_TIER_ID
             ? t('settings.localModel.deviceCapability.localAiDisabled')
             : t('settings.localModel.deviceCapability.appliedTier')
diff --git a/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx b/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx
index e39e2b5f1..8f0db3c34 100644
--- a/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx
+++ b/app/src/components/settings/panels/local-model/ModelDownloadSection.tsx
@@ -106,11 +106,11 @@ const ModelDownloadSection = ({
   return (
     <>
       <section className="space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.localModel.download.capabilityAssets')}
         </h3>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
-          <div className="text-xs text-stone-500">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
+          <div className="text-xs text-stone-500 dark:text-neutral-400">
             {t('settings.localModel.download.quantizationPref')} {assets?.quantization ?? 'q4'}
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
@@ -121,24 +121,32 @@ const ModelDownloadSection = ({
               { label: 'STT', key: 'stt' as const, item: assets?.stt },
               { label: 'TTS', key: 'tts' as const, item: assets?.tts },
             ].map(({ label, key, item }) => (
-              <div key={String(label)} className="rounded-md border border-stone-200 p-2">
-                <div className="text-stone-500 text-xs uppercase tracking-wide">{label}</div>
-                <div className="text-stone-800 mt-1 break-all">{item?.id ?? 'n/a'}</div>
+              <div
+                key={String(label)}
+                className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+                <div className="text-stone-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
+                  {label}
+                </div>
+                <div className="text-stone-800 dark:text-neutral-100 mt-1 break-all">
+                  {item?.id ?? 'n/a'}
+                </div>
                 <div className={`text-xs mt-1 ${statusTone(item?.state ?? 'idle')}`}>
                   {statusLabel(item?.state ?? 'idle')}
                 </div>
                 {item?.path && (
-                  <div className="text-[10px] text-stone-500 mt-1 break-all">{item.path}</div>
+                  <div className="text-[10px] text-stone-500 dark:text-neutral-400 mt-1 break-all">
+                    {item.path}
+                  </div>
                 )}
                 {item?.provider === 'ollama' || item?.provider === 'lm_studio' ? (
-                  <div className="mt-2 text-[10px] text-stone-500">
+                  <div className="mt-2 text-[10px] text-stone-500 dark:text-neutral-400">
                     {t('settings.localModel.download.manageExternal')}
                   </div>
                 ) : (
                   <button
                     onClick={() => onTriggerAssetDownload(key)}
                     disabled={!runtimeEnabled || assetDownloadBusy[key]}
-                    className="mt-2 px-2 py-1 text-[10px] rounded border border-stone-200 hover:border-stone-300 disabled:opacity-60 text-stone-600">
+                    className="mt-2 px-2 py-1 text-[10px] rounded border border-stone-200 dark:border-neutral-800 hover:border-stone-300 dark:border-neutral-700 disabled:opacity-60 text-stone-600 dark:text-neutral-300">
                     {assetDownloadBusy[key]
                       ? t('settings.localModel.download.downloading')
                       : t('common.download')}
@@ -151,18 +159,18 @@ const ModelDownloadSection = ({
       </section>
 
       <section className="space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.localModel.download.testSummarization')}
         </h3>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           <textarea
             value={summaryInput}
             onChange={e => onSetSummaryInput(e.target.value)}
             placeholder={t('settings.localModel.download.summarizePlaceholder')}
-            className="w-full min-h-28 rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            className="w-full min-h-28 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
           />
           <div className="flex items-center justify-between">
-            <div className="text-xs text-stone-500">
+            <div className="text-xs text-stone-500 dark:text-neutral-400">
               Calls `openhuman.inference_summarize` via Rust core
             </div>
             <button
@@ -175,7 +183,7 @@ const ModelDownloadSection = ({
             </button>
           </div>
           {summaryOutput && (
-            <pre className="whitespace-pre-wrap rounded-md bg-stone-50 border border-stone-200 p-3 text-xs text-stone-700">
+            <pre className="whitespace-pre-wrap rounded-md bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-3 text-xs text-stone-700 dark:text-neutral-200">
               {summaryOutput}
             </pre>
           )}
@@ -183,23 +191,23 @@ const ModelDownloadSection = ({
       </section>
 
       <section className="space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.localModel.download.testCustomPrompt')}
         </h3>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           <textarea
             value={promptInput}
             onChange={e => onSetPromptInput(e.target.value)}
             placeholder={t('settings.localModel.download.promptPlaceholder')}
-            className="w-full min-h-28 rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            className="w-full min-h-28 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
           />
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <label className="flex items-center gap-2 text-xs text-stone-700">
+            <label className="flex items-center gap-2 text-xs text-stone-700 dark:text-neutral-200">
               <input
                 type="checkbox"
                 checked={promptNoThink}
                 onChange={e => onSetPromptNoThink(e.target.checked)}
-                className="h-3.5 w-3.5 rounded border-stone-300 bg-white text-primary-500 focus:ring-primary-500"
+                className="h-3.5 w-3.5 rounded border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-primary-500 focus:ring-primary-500"
               />
               {t('settings.localModel.download.noThinkMode')}
             </label>
@@ -213,18 +221,18 @@ const ModelDownloadSection = ({
             </button>
           </div>
           {isPromptLoading && (
-            <div className="flex items-center gap-2 text-xs text-primary-600">
+            <div className="flex items-center gap-2 text-xs text-primary-600 dark:text-primary-300">
               <div className="h-3 w-3 rounded-full border-2 border-blue-400 border-t-transparent animate-spin" />
               {t('settings.localModel.download.runningPrompt')}
             </div>
           )}
           {promptError && (
-            <div className="rounded-md bg-red-50 border border-red-300 p-3 text-xs text-red-600">
+            <div className="rounded-md bg-red-50 dark:bg-red-500/10 border border-red-300 dark:border-red-500/40 p-3 text-xs text-red-600 dark:text-red-300">
               {promptError}
             </div>
           )}
           {promptOutput && (
-            <pre className="whitespace-pre-wrap rounded-md bg-stone-50 border border-stone-200 p-3 text-xs text-stone-700 max-h-64 overflow-auto">
+            <pre className="whitespace-pre-wrap rounded-md bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-3 text-xs text-stone-700 dark:text-neutral-200 max-h-64 overflow-auto">
               {promptOutput}
             </pre>
           )}
@@ -232,21 +240,21 @@ const ModelDownloadSection = ({
       </section>
 
       <section className="space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.localModel.download.testVisionPrompt')}
         </h3>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           <textarea
             value={visionPromptInput}
             onChange={e => onSetVisionPromptInput(e.target.value)}
             placeholder={t('settings.localModel.download.visionPromptPlaceholder')}
-            className="w-full min-h-20 rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+            className="w-full min-h-20 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
           />
           <textarea
             value={visionImageInput}
             onChange={e => onSetVisionImageInput(e.target.value)}
             placeholder={t('settings.localModel.download.visionImagePlaceholder')}
-            className="w-full min-h-20 rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+            className="w-full min-h-20 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
           />
           <button
             onClick={onRunVisionTest}
@@ -262,7 +270,7 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runVisionTest')}
           </button>
           {visionOutput && (
-            <pre className="whitespace-pre-wrap rounded-md bg-stone-50 border border-stone-200 p-3 text-xs text-stone-700">
+            <pre className="whitespace-pre-wrap rounded-md bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-3 text-xs text-stone-700 dark:text-neutral-200">
               {visionOutput}
             </pre>
           )}
@@ -270,15 +278,15 @@ const ModelDownloadSection = ({
       </section>
 
       <section className="space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.localModel.download.testEmbeddings')}
         </h3>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           <textarea
             value={embeddingInput}
             onChange={e => onSetEmbeddingInput(e.target.value)}
             placeholder={t('settings.localModel.download.embeddingPlaceholder')}
-            className="w-full min-h-20 rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+            className="w-full min-h-20 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
           />
           <button
             onClick={onRunEmbeddingTest}
@@ -289,7 +297,7 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runEmbeddingTest')}
           </button>
           {embeddingOutput && (
-            <div className="rounded-md bg-stone-50 border border-stone-200 p-3 text-xs text-stone-700 space-y-1">
+            <div className="rounded-md bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-3 text-xs text-stone-700 dark:text-neutral-200 space-y-1">
               <div>Model: {embeddingOutput.model_id}</div>
               <div>Dimensions: {embeddingOutput.dimensions}</div>
               <div>Vectors: {embeddingOutput.vectors.length}</div>
@@ -299,15 +307,15 @@ const ModelDownloadSection = ({
       </section>
 
       <section className="space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.localModel.download.testVoiceInput')}
         </h3>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           <input
             value={audioPathInput}
             onChange={e => onSetAudioPathInput(e.target.value)}
             placeholder={t('settings.localModel.download.audioPathPlaceholder')}
-            className="w-full rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+            className="w-full rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
           />
           <button
             onClick={onRunTranscribeTest}
@@ -318,10 +326,10 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runTranscriptionTest')}
           </button>
           {transcribeOutput && (
-            <div className="rounded-md bg-stone-50 border border-stone-200 p-3 text-xs text-stone-700 space-y-2">
+            <div className="rounded-md bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-3 text-xs text-stone-700 dark:text-neutral-200 space-y-2">
               <div>Model: {transcribeOutput.model_id}</div>
               <div>
-                <span className="text-stone-400">Transcript:</span>
+                <span className="text-stone-400 dark:text-neutral-500">Transcript:</span>
                 <pre className="whitespace-pre-wrap mt-1">{transcribeOutput.text}</pre>
               </div>
             </div>
@@ -330,21 +338,21 @@ const ModelDownloadSection = ({
       </section>
 
       <section className="space-y-3">
-        <h3 className="text-sm font-semibold text-stone-900">
+        <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
           {t('settings.localModel.download.testVoiceOutput')}
         </h3>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           <textarea
             value={ttsInput}
             onChange={e => onSetTtsInput(e.target.value)}
             placeholder={t('settings.localModel.download.ttsPlaceholder')}
-            className="w-full min-h-20 rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+            className="w-full min-h-20 rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
           />
           <input
             value={ttsOutputPath}
             onChange={e => onSetTtsOutputPath(e.target.value)}
             placeholder={t('settings.localModel.download.ttsOutputPlaceholder')}
-            className="w-full rounded-md bg-white border border-stone-200 px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-1 focus:ring-primary-400"
+            className="w-full rounded-md bg-white dark:bg-neutral-900 border border-stone-200 dark:border-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-primary-400"
           />
           <button
             onClick={onRunTtsTest}
@@ -355,7 +363,7 @@ const ModelDownloadSection = ({
               : t('settings.localModel.download.runTtsTest')}
           </button>
           {ttsOutput && (
-            <div className="rounded-md bg-stone-50 border border-stone-200 p-3 text-xs text-stone-700 space-y-1">
+            <div className="rounded-md bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-3 text-xs text-stone-700 dark:text-neutral-200 space-y-1">
               <div>Voice: {ttsOutput.voice_id}</div>
               <div className="break-all">Output: {ttsOutput.output_path}</div>
             </div>
diff --git a/app/src/components/settings/panels/local-model/ModelStatusSection.tsx b/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
index 6786485e6..a057daaf6 100644
--- a/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
+++ b/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
@@ -90,10 +90,10 @@ const ModelStatusSection = ({
 
   if (showInstallOllamaCta) {
     return (
-      <section className="rounded-lg border border-amber-300 bg-amber-50 p-4 space-y-3">
+      <section className="rounded-lg border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 p-4 space-y-3">
         <div className="flex items-start gap-3">
           <svg
-            className="h-5 w-5 flex-shrink-0 text-amber-600 mt-0.5"
+            className="h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-300 mt-0.5"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
@@ -108,7 +108,7 @@ const ModelStatusSection = ({
             <div className="text-sm font-semibold text-amber-900">
               {t('settings.localModel.status.ollamaNotInstalled')}
             </div>
-            <div className="text-xs text-amber-800">
+            <div className="text-xs text-amber-800 dark:text-amber-200">
               {t('settings.localModel.status.ollamaNotInstalledDesc')}
             </div>
           </div>
@@ -118,23 +118,23 @@ const ModelStatusSection = ({
             href="https://ollama.com"
             target="_blank"
             rel="noopener noreferrer"
-            className="px-3 py-1.5 text-xs rounded-md border border-amber-300 hover:border-amber-400 text-amber-800">
+            className="px-3 py-1.5 text-xs rounded-md border border-amber-300 dark:border-amber-500/40 hover:border-amber-400 text-amber-800 dark:text-amber-200">
             {t('settings.localModel.status.ollamaDocs')}
           </a>
         </div>
 
         {isInstallError && status?.error_detail && (
-          <div className="space-y-1 pt-2 border-t border-amber-200">
+          <div className="space-y-1 pt-2 border-t border-amber-200 dark:border-amber-500/30">
             <button
               type="button"
               onClick={onToggleErrorDetail}
-              className="text-xs text-red-700 hover:text-red-600 underline">
+              className="text-xs text-red-700 dark:text-red-300 hover:text-red-600 dark:text-red-300 underline">
               {showErrorDetail
                 ? t('settings.localModel.status.hideErrorDetails')
                 : t('settings.localModel.status.showInstallErrorDetails')}
             </button>
             {showErrorDetail && (
-              <pre className="max-h-40 overflow-auto rounded bg-red-50 border border-red-200 p-2 text-[10px] text-red-700 leading-tight whitespace-pre-wrap break-words">
+              <pre className="max-h-40 overflow-auto rounded bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 p-2 text-[10px] text-red-700 dark:text-red-300 leading-tight whitespace-pre-wrap break-words">
                 {status.error_detail}
               </pre>
             )}
@@ -148,19 +148,19 @@ const ModelStatusSection = ({
     <>
       <section className="space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-stone-900">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {t('settings.localModel.status.runtimeStatus')}
           </h3>
           <button
             onClick={onRefreshStatus}
-            className="text-sm text-primary-500 hover:text-primary-600 transition-colors">
+            className="text-sm text-primary-500 hover:text-primary-600 dark:text-primary-300 transition-colors">
             {t('common.refresh')}
           </button>
         </div>
 
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           <div className="flex items-center justify-between text-sm">
-            <span className="text-stone-500">{t('settings.ai.state')}</span>
+            <span className="text-stone-500 dark:text-neutral-400">{t('settings.ai.state')}</span>
             <span className={`font-medium ${statusTone(status?.state ?? 'idle')}`}>
               {status
                 ? statusLabel(downloads?.state ?? status.state)
@@ -168,7 +168,7 @@ const ModelStatusSection = ({
             </span>
           </div>
 
-          <div className="h-2 rounded-full bg-stone-200 overflow-hidden">
+          <div className="h-2 rounded-full bg-stone-200 dark:bg-neutral-800 overflow-hidden">
             <div
               className={`h-full bg-gradient-to-r from-blue-500 to-cyan-400 transition-all duration-500 ${
                 isIndeterminateDownload ? 'animate-pulse' : ''
@@ -177,7 +177,7 @@ const ModelStatusSection = ({
             />
           </div>
 
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-stone-500">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-stone-500 dark:text-neutral-400">
             <span>
               {t('settings.localModel.status.progress')}{' '}
               {isInstalling
@@ -186,8 +186,12 @@ const ModelStatusSection = ({
                   ? t('settings.localModel.status.downloadingUnknown')
                   : `${Math.round(progress * 100)}%`}
             </span>
-            {downloadedText && <span className="text-stone-600">{downloadedText}</span>}
-            {speedText && <span className="text-primary-600">{speedText}</span>}
+            {downloadedText && (
+              <span className="text-stone-600 dark:text-neutral-300">{downloadedText}</span>
+            )}
+            {speedText && (
+              <span className="text-primary-600 dark:text-primary-300">{speedText}</span>
+            )}
             {etaText && (
               <span className="text-primary-500">
                 {t('settings.localModel.status.eta')} {etaText}
@@ -196,42 +200,48 @@ const ModelStatusSection = ({
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
-            <div className="rounded-md border border-stone-200 p-2">
-              <div className="text-stone-500 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+              <div className="text-stone-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.provider')}
               </div>
-              <div className="text-stone-800 mt-1">{status?.provider ?? 'n/a'}</div>
+              <div className="text-stone-800 dark:text-neutral-100 mt-1">
+                {status?.provider ?? 'n/a'}
+              </div>
             </div>
-            <div className="rounded-md border border-stone-200 p-2">
-              <div className="text-stone-500 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+              <div className="text-stone-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.model')}
               </div>
-              <div className="text-stone-800 mt-1">{status?.model_id ?? 'n/a'}</div>
+              <div className="text-stone-800 dark:text-neutral-100 mt-1">
+                {status?.model_id ?? 'n/a'}
+              </div>
             </div>
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
-            <div className="rounded-md border border-stone-200 p-2">
-              <div className="text-stone-500 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+              <div className="text-stone-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.backend')}
               </div>
-              <div className="text-stone-800 mt-1">{status?.active_backend ?? 'cpu'}</div>
+              <div className="text-stone-800 dark:text-neutral-100 mt-1">
+                {status?.active_backend ?? 'cpu'}
+              </div>
             </div>
-            <div className="rounded-md border border-stone-200 p-2">
-              <div className="text-stone-500 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+              <div className="text-stone-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.lastLatency')}
               </div>
-              <div className="text-stone-800 mt-1">
+              <div className="text-stone-800 dark:text-neutral-100 mt-1">
                 {typeof status?.last_latency_ms === 'number'
                   ? `${status.last_latency_ms} ms`
                   : 'n/a'}
               </div>
             </div>
-            <div className="rounded-md border border-stone-200 p-2">
-              <div className="text-stone-500 text-xs uppercase tracking-wide">
+            <div className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+              <div className="text-stone-500 dark:text-neutral-400 text-xs uppercase tracking-wide">
                 {t('settings.localModel.status.generationTps')}
               </div>
-              <div className="text-stone-800 mt-1">
+              <div className="text-stone-800 dark:text-neutral-100 mt-1">
                 {typeof status?.gen_toks_per_sec === 'number'
                   ? `${status.gen_toks_per_sec.toFixed(1)} tok/s`
                   : 'n/a'}
@@ -240,38 +250,44 @@ const ModelStatusSection = ({
           </div>
 
           {status?.model_path && (
-            <div className="text-xs text-stone-500 break-all">
+            <div className="text-xs text-stone-500 dark:text-neutral-400 break-all">
               {t('settings.localModel.status.artifact')} {status.model_path}
             </div>
           )}
 
           {status?.backend_reason && (
-            <div className="text-xs text-primary-600">{status.backend_reason}</div>
+            <div className="text-xs text-primary-600 dark:text-primary-300">
+              {status.backend_reason}
+            </div>
+          )}
+          {status?.warning && (
+            <div className="text-xs text-amber-700 dark:text-amber-300">{status.warning}</div>
+          )}
+          {statusError && (
+            <div className="text-xs text-red-600 dark:text-red-300">{statusError}</div>
           )}
-          {status?.warning && <div className="text-xs text-amber-700">{status.warning}</div>}
-          {statusError && <div className="text-xs text-red-600">{statusError}</div>}
 
           {status?.error_detail && (
             <div className="space-y-1">
               <button
                 onClick={onToggleErrorDetail}
-                className="text-xs text-red-600 hover:text-red-500 underline">
+                className="text-xs text-red-600 dark:text-red-300 hover:text-red-500 underline">
                 {showErrorDetail
                   ? t('settings.localModel.status.hideErrorDetails')
                   : t('settings.localModel.status.showErrorDetails')}
               </button>
               {showErrorDetail && (
-                <pre className="max-h-40 overflow-auto rounded bg-red-50 border border-red-200 p-2 text-[10px] text-red-600 leading-tight whitespace-pre-wrap break-words">
+                <pre className="max-h-40 overflow-auto rounded bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 p-2 text-[10px] text-red-600 dark:text-red-300 leading-tight whitespace-pre-wrap break-words">
                   {status.error_detail}
                 </pre>
               )}
-              <p className="text-xs text-stone-500">
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
                 {t('settings.localModel.status.installManuallyFrom')}{' '}
                 <a
                   href="https://ollama.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-primary-500 hover:text-primary-600 underline">
+                  className="text-primary-500 hover:text-primary-600 dark:text-primary-300 underline">
                   ollama.com
                 </a>{' '}
                 {t('settings.localModel.status.thenRetry')}
@@ -283,7 +299,7 @@ const ModelStatusSection = ({
 
       <section className="space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-stone-900">
+          <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {t('settings.localModel.status.ollamaDiagnostics')}
           </h3>
           <button
@@ -295,20 +311,20 @@ const ModelStatusSection = ({
               : t('settings.localModel.status.runDiagnostics')}
           </button>
         </div>
-        <div className="bg-stone-50 rounded-lg border border-stone-200 p-4 space-y-3">
+        <div className="bg-stone-50 dark:bg-neutral-800/60 rounded-lg border border-stone-200 dark:border-neutral-800 p-4 space-y-3">
           {!diagnostics && !diagnosticsError && (
-            <p className="text-xs text-stone-500">
+            <p className="text-xs text-stone-500 dark:text-neutral-400">
               {t('settings.localModel.status.diagnosticsHint')}
             </p>
           )}
           {isDiagnosticsLoading && (
-            <div className="flex items-center gap-2 text-xs text-primary-600">
+            <div className="flex items-center gap-2 text-xs text-primary-600 dark:text-primary-300">
               <div className="h-3 w-3 rounded-full border-2 border-blue-400 border-t-transparent animate-spin" />
               {t('settings.localModel.status.checkingOllama')}
             </div>
           )}
           {diagnosticsError && (
-            <div className="rounded-md bg-red-50 border border-red-300 p-3 text-xs text-red-600">
+            <div className="rounded-md bg-red-50 dark:bg-red-500/10 border border-red-300 dark:border-red-500/40 p-3 text-xs text-red-600 dark:text-red-300">
               {diagnosticsError}
             </div>
           )}
@@ -318,7 +334,12 @@ const ModelStatusSection = ({
                 <span
                   className={`inline-block h-2.5 w-2.5 rounded-full ${diagnostics.ok ? 'bg-green-400' : 'bg-red-400'}`}
                 />
-                <span className={diagnostics.ok ? 'text-green-600' : 'text-red-600'}>
+                <span
+                  className={
+                    diagnostics.ok
+                      ? 'text-green-600 dark:text-green-300'
+                      : 'text-red-600 dark:text-red-300'
+                  }>
                   {diagnostics.ok
                     ? t('settings.localModel.status.allChecksPassed')
                     : t('settings.localModel.status.issuesFound').replace(
@@ -329,30 +350,30 @@ const ModelStatusSection = ({
               </div>
 
               <div className="grid grid-cols-2 gap-2 text-xs">
-                <div className="rounded-md border border-stone-200 p-2">
-                  <div className="text-stone-400 uppercase tracking-wide text-[10px]">
+                <div className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+                  <div className="text-stone-400 dark:text-neutral-500 uppercase tracking-wide text-[10px]">
                     {t('settings.localModel.status.server')}
                   </div>
                   <div
-                    className={`mt-1 font-medium ${diagnostics.ollama_running ? 'text-green-600' : 'text-red-600'}`}>
+                    className={`mt-1 font-medium ${diagnostics.ollama_running ? 'text-green-600 dark:text-green-300' : 'text-red-600 dark:text-red-300'}`}>
                     {diagnostics.ollama_running
                       ? t('settings.localModel.status.running')
                       : t('settings.localModel.status.notRunning')}
                   </div>
                   {diagnostics.ollama_base_url && (
                     <div
-                      className="mt-0.5 text-stone-400 truncate text-[10px]"
+                      className="mt-0.5 text-stone-400 dark:text-neutral-500 truncate text-[10px]"
                       title={diagnostics.ollama_base_url}>
                       {diagnostics.ollama_base_url}
                     </div>
                   )}
                 </div>
-                <div className="rounded-md border border-stone-200 p-2">
-                  <div className="text-stone-400 uppercase tracking-wide text-[10px]">
+                <div className="rounded-md border border-stone-200 dark:border-neutral-800 p-2">
+                  <div className="text-stone-400 dark:text-neutral-500 uppercase tracking-wide text-[10px]">
                     {t('settings.localModel.status.binary')}
                   </div>
                   <div
-                    className="mt-1 text-stone-600 truncate"
+                    className="mt-1 text-stone-600 dark:text-neutral-300 truncate"
                     title={
                       diagnostics.ollama_binary_path ??
                       (diagnostics.ollama_running ? 'External process' : 'Not found')
@@ -368,7 +389,7 @@ const ModelStatusSection = ({
 
               {diagnostics.installed_models.length > 0 && (
                 <div>
-                  <div className="text-stone-400 uppercase tracking-wide text-[10px] mb-1">
+                  <div className="text-stone-400 dark:text-neutral-500 uppercase tracking-wide text-[10px] mb-1">
                     {t('settings.localModel.status.installedModels')} (
                     {diagnostics.installed_models.length})
                   </div>
@@ -376,9 +397,11 @@ const ModelStatusSection = ({
                     {diagnostics.installed_models.map(m => (
                       <div
                         key={m.name}
-                        className="flex items-center justify-between rounded border border-stone-200 px-2 py-1.5 text-xs">
-                        <span className="text-stone-800 font-medium">{m.name}</span>
-                        <span className="text-stone-400">
+                        className="flex items-center justify-between rounded border border-stone-200 dark:border-neutral-800 px-2 py-1.5 text-xs">
+                        <span className="text-stone-800 dark:text-neutral-100 font-medium">
+                          {m.name}
+                        </span>
+                        <span className="text-stone-400 dark:text-neutral-500">
                           {typeof m.size === 'number' ? formatBytes(m.size) : ''}
                         </span>
                       </div>
@@ -388,38 +411,46 @@ const ModelStatusSection = ({
               )}
 
               <div>
-                <div className="text-stone-400 uppercase tracking-wide text-[10px] mb-1">
+                <div className="text-stone-400 dark:text-neutral-500 uppercase tracking-wide text-[10px] mb-1">
                   {t('settings.localModel.status.expectedModels')}
                 </div>
                 <div className="space-y-1 text-xs">
                   <div className="flex items-center gap-2">
                     <span
                       className={
-                        diagnostics.expected.chat_found ? 'text-green-600' : 'text-red-600'
+                        diagnostics.expected.chat_found
+                          ? 'text-green-600 dark:text-green-300'
+                          : 'text-red-600 dark:text-red-300'
                       }>
                       {diagnostics.expected.chat_found ? '✓' : '✗'}
                     </span>
-                    <span className="text-stone-700">Chat: {diagnostics.expected.chat_model}</span>
+                    <span className="text-stone-700 dark:text-neutral-200">
+                      Chat: {diagnostics.expected.chat_model}
+                    </span>
                   </div>
                   <div className="flex items-center gap-2">
                     <span
                       className={
-                        diagnostics.expected.embedding_found ? 'text-green-600' : 'text-red-600'
+                        diagnostics.expected.embedding_found
+                          ? 'text-green-600 dark:text-green-300'
+                          : 'text-red-600 dark:text-red-300'
                       }>
                       {diagnostics.expected.embedding_found ? '✓' : '✗'}
                     </span>
-                    <span className="text-stone-700">
+                    <span className="text-stone-700 dark:text-neutral-200">
                       Embedding: {diagnostics.expected.embedding_model}
                     </span>
                   </div>
                   <div className="flex items-center gap-2">
                     <span
                       className={
-                        diagnostics.expected.vision_found ? 'text-green-600' : 'text-amber-700'
+                        diagnostics.expected.vision_found
+                          ? 'text-green-600 dark:text-green-300'
+                          : 'text-amber-700 dark:text-amber-300'
                       }>
                       {diagnostics.expected.vision_found ? '✓' : '–'}
                     </span>
-                    <span className="text-stone-700">
+                    <span className="text-stone-700 dark:text-neutral-200">
                       Vision: {diagnostics.expected.vision_model}
                     </span>
                   </div>
@@ -428,10 +459,10 @@ const ModelStatusSection = ({
 
               {diagnostics.issues.length > 0 && (
                 <div>
-                  <div className="text-red-600 uppercase tracking-wide text-[10px] mb-1">
+                  <div className="text-red-600 dark:text-red-300 uppercase tracking-wide text-[10px] mb-1">
                     {t('settings.localModel.status.issues')}
                   </div>
-                  <ul className="space-y-1 text-xs text-red-600">
+                  <ul className="space-y-1 text-xs text-red-600 dark:text-red-300">
                     {diagnostics.issues.map((issue, i) => (
                       <li key={i} className="flex gap-1.5">
                         <span className="shrink-0">&bull;</span>
@@ -442,7 +473,7 @@ const ModelStatusSection = ({
                 </div>
               )}
 
-              <div className="text-xs text-stone-500">
+              <div className="text-xs text-stone-500 dark:text-neutral-400">
                 {t('settings.localModel.status.manageOllamaExternal')}
               </div>
             </>
diff --git a/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx b/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
index 5fbdc0814..67ed98cf6 100644
--- a/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
+++ b/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
@@ -9,14 +9,14 @@ interface PermissionsBadgeProps {
 const PermissionBadge = ({ label, value }: PermissionsBadgeProps) => {
   const colorClass =
     value === 'granted'
-      ? 'bg-green-50 text-green-700 border-green-200'
+      ? 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-300 border-green-200 dark:border-green-500/30'
       : value === 'denied'
-        ? 'bg-red-50 text-red-700 border-red-200'
-        : 'bg-stone-100 text-stone-600 border-stone-200';
+        ? 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-300 border-red-200 dark:border-red-500/30'
+        : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 border-stone-200 dark:border-neutral-800';
 
   return (
-    <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-white p-3">
-      <span className="text-sm text-stone-700">{label}</span>
+    <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
+      <span className="text-sm text-stone-700 dark:text-neutral-200">{label}</span>
       <span className={`rounded-md border px-2 py-1 text-xs uppercase tracking-wide ${colorClass}`}>
         {value}
       </span>
@@ -56,7 +56,7 @@ const PermissionsSection = ({
   const { t } = useT();
   return (
     <section className="space-y-3">
-      <h3 className="text-sm font-semibold text-stone-900">
+      <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
         {t('settings.screenIntel.permissions.title')}
       </h3>
       <PermissionBadge
@@ -73,12 +73,12 @@ const PermissionsSection = ({
       />
 
       {anyPermissionDenied && (
-        <div className="rounded-xl border border-amber-300 bg-amber-50 p-3 text-sm text-amber-700 space-y-1">
+        <div className="rounded-xl border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300 space-y-1">
           <p>{t('settings.screenIntel.permissions.grantHint')}</p>
           {permissionCheckProcessPath ? (
             <p className="opacity-75 text-xs">
               {t('settings.screenIntel.permissions.macosAppliesPrivacy')}{' '}
-              <span className="font-mono break-all text-stone-600">
+              <span className="font-mono break-all text-stone-600 dark:text-neutral-300">
                 {permissionCheckProcessPath}
               </span>
             </p>
@@ -87,7 +87,7 @@ const PermissionsSection = ({
       )}
 
       {lastRestartSummary ? (
-        <div className="rounded-xl border border-green-300 bg-green-50 p-3 text-sm text-green-700">
+        <div className="rounded-xl border border-green-300 dark:border-green-500/40 bg-green-50 dark:bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-300">
           {lastRestartSummary}
         </div>
       ) : null}
@@ -96,7 +96,7 @@ const PermissionsSection = ({
         type="button"
         onClick={() => void requestPermission('screen_recording')}
         disabled={isRequestingPermissions || isRestartingCore}
-        className="mt-1 rounded-lg border border-primary-400 bg-primary-50 px-3 py-2 text-sm text-primary-700 disabled:opacity-50">
+        className="mt-1 rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
         {isRequestingPermissions
           ? t('settings.screenIntel.permissions.requesting')
           : t('settings.screenIntel.permissions.requestScreenRecording')}
@@ -105,7 +105,7 @@ const PermissionsSection = ({
         type="button"
         onClick={() => void requestPermission('accessibility')}
         disabled={isRequestingPermissions || isRestartingCore}
-        className="rounded-lg border border-primary-400 bg-primary-50 px-3 py-2 text-sm text-primary-700 disabled:opacity-50">
+        className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
         {isRequestingPermissions
           ? t('settings.screenIntel.permissions.requesting')
           : t('settings.screenIntel.permissions.requestAccessibility')}
@@ -114,7 +114,7 @@ const PermissionsSection = ({
         type="button"
         onClick={() => void requestPermission('input_monitoring')}
         disabled={isRequestingPermissions || isRestartingCore}
-        className="rounded-lg border border-primary-400 bg-primary-50 px-3 py-2 text-sm text-primary-700 disabled:opacity-50">
+        className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
         {isRequestingPermissions
           ? t('settings.screenIntel.permissions.requesting')
           : t('settings.screenIntel.permissions.openInputMonitoring')}
@@ -124,7 +124,7 @@ const PermissionsSection = ({
           type="button"
           onClick={() => void refreshPermissionsWithRestart()}
           disabled={isRestartingCore || isLoading}
-          className="rounded-lg border border-amber-400 bg-amber-50 px-3 py-2 text-sm text-amber-700 disabled:opacity-50">
+          className="rounded-lg border border-amber-400 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300 disabled:opacity-50">
           {isRestartingCore
             ? t('settings.screenIntel.permissions.restartingCore')
             : t('settings.screenIntel.permissions.restartRefresh')}
@@ -134,7 +134,7 @@ const PermissionsSection = ({
           type="button"
           onClick={() => void refreshStatus()}
           disabled={isLoading || isRestartingCore}
-          className="rounded-lg border border-stone-200 bg-stone-50 px-3 py-2 text-sm text-stone-700 disabled:opacity-50">
+          className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-sm text-stone-700 dark:text-neutral-200 disabled:opacity-50">
           {isLoading
             ? t('settings.screenIntel.permissions.refreshing')
             : t('settings.screenIntel.permissions.refreshStatus')}
diff --git a/app/src/components/skills/AutocompleteSetupModal.tsx b/app/src/components/skills/AutocompleteSetupModal.tsx
index b99a06d73..6aca92c9b 100644
--- a/app/src/components/skills/AutocompleteSetupModal.tsx
+++ b/app/src/components/skills/AutocompleteSetupModal.tsx
@@ -73,9 +73,9 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="ac-setup-title"
-        className="w-full max-w-md mx-4 rounded-2xl bg-white shadow-xl overflow-hidden animate-fade-up">
+        className="w-full max-w-md mx-4 rounded-2xl bg-white dark:bg-neutral-900 shadow-xl overflow-hidden animate-fade-up">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-stone-100 px-5 py-4">
+        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
           <div className="flex items-center gap-3">
             <div className="w-9 h-9 rounded-xl bg-primary-50 flex items-center justify-center text-primary-600">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -88,8 +88,8 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
               </svg>
             </div>
             <div>
-              <h2 id="ac-setup-title" className="text-sm font-semibold text-stone-900">{t('skills.setup.autocomplete.title')}</h2>
-              <p className="text-xs text-stone-500">
+              <h2 id="ac-setup-title" className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{t('skills.setup.autocomplete.title')}</h2>
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
                 {step === 'enable' && t('skills.setup.autocomplete.stepEnable')}
                 {step === 'success' && t('skills.setup.autocomplete.stepSuccess')}
               </p>
@@ -98,7 +98,7 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
           <button
             type="button"
             onClick={onClose}
-            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors">
+            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -110,7 +110,7 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
           {/* ─── Enable step ─── */}
           {step === 'enable' && (
             <div className="space-y-4">
-              <p className="text-xs text-stone-500 leading-relaxed">
+              <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                 {t('skills.setup.autocomplete.description')}
               </p>
 
@@ -121,17 +121,17 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
               )}
 
               <div className="space-y-2">
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.autocomplete.stylePreset')}</span>
-                  <span className="text-xs text-stone-500">{t('skills.setup.autocomplete.stylePresetValue')}</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.autocomplete.stylePreset')}</span>
+                  <span className="text-xs text-stone-500 dark:text-neutral-400">{t('skills.setup.autocomplete.stylePresetValue')}</span>
                 </div>
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.autocomplete.acceptKey')}</span>
-                  <span className="text-xs font-mono text-stone-500">Tab</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.autocomplete.acceptKey')}</span>
+                  <span className="text-xs font-mono text-stone-500 dark:text-neutral-400">Tab</span>
                 </div>
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.autocomplete.debounce')}</span>
-                  <span className="text-xs text-stone-500">{status?.debounce_ms ?? 120}ms</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.autocomplete.debounce')}</span>
+                  <span className="text-xs text-stone-500 dark:text-neutral-400">{status?.debounce_ms ?? 120}ms</span>
                 </div>
               </div>
 
@@ -161,8 +161,8 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
               </div>
 
               <div>
-                <h3 className="text-sm font-semibold text-stone-900">{t('skills.setup.autocomplete.activeTitle')}</h3>
-                <p className="mt-1 text-xs text-stone-500 leading-relaxed">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{t('skills.setup.autocomplete.activeTitle')}</h3>
+                <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                   {t('skills.setup.autocomplete.activeDesc')}
                 </p>
               </div>
@@ -177,7 +177,7 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
                 <button
                   type="button"
                   onClick={onClose}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-100 transition-colors">
+                  className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
                   {t('common.finish')}
                 </button>
               </div>
diff --git a/app/src/components/skills/CreateSkillModal.tsx b/app/src/components/skills/CreateSkillModal.tsx
index bb35f1872..fd53b06bf 100644
--- a/app/src/components/skills/CreateSkillModal.tsx
+++ b/app/src/components/skills/CreateSkillModal.tsx
@@ -187,17 +187,17 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="create-skill-title"
-        className="relative w-full max-w-[520px] rounded-2xl bg-white shadow-2xl animate-fade-in">
+        className="relative w-full max-w-[520px] rounded-2xl bg-white dark:bg-neutral-900 shadow-2xl animate-fade-in">
         <form onSubmit={handleSubmit}>
           {/* Header */}
-          <div className="flex items-start justify-between gap-3 border-b border-stone-100 px-5 py-4">
+          <div className="flex items-start justify-between gap-3 border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
             <div className="min-w-0 flex-1">
               <h2
                 id="create-skill-title"
-                className="text-base font-semibold text-stone-900 font-sans">
+                className="text-base font-semibold text-stone-900 dark:text-neutral-100 font-sans">
                 {t('skills.create.title')}
               </h2>
-              <p className="mt-0.5 text-xs text-stone-500">
+              <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
                 {t('skills.create.subtitle')}
               </p>
             </div>
@@ -211,7 +211,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
               }}
               disabled={submitting}
               aria-label="Close"
-              className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
+              className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-600 dark:hover:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
               <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -229,7 +229,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
             <div>
               <label
                 htmlFor="create-skill-name"
-                className="block text-xs font-medium text-stone-600">
+                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                 {t('skills.create.name')}<span className="text-coral-500"> *</span>
               </label>
               <input
@@ -240,12 +240,12 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                 onChange={e => setName(e.target.value)}
                 required
                 maxLength={128}
-                className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
                 placeholder={t('skills.create.namePlaceholder')}
               />
-              <p className="mt-1 text-[11px] text-stone-500">
+              <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
                 {t('skills.create.slugLabel')}{' '}
-                <code className="rounded bg-stone-100 px-1 py-[1px] font-mono text-stone-700">
+                <code className="rounded bg-stone-100 dark:bg-neutral-800 px-1 py-[1px] font-mono text-stone-700 dark:text-neutral-200">
                   {slug || '—'}
                 </code>
               </p>
@@ -255,7 +255,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
             <div>
               <label
                 htmlFor="create-skill-description"
-                className="block text-xs font-medium text-stone-600">
+                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                 {t('skills.create.description')}<span className="text-coral-500"> *</span>
               </label>
               <textarea
@@ -265,14 +265,14 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                 required
                 rows={3}
                 maxLength={500}
-                className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
                 placeholder={t('skills.create.descriptionPlaceholder')}
               />
             </div>
 
             {/* Scope */}
             <fieldset>
-              <legend className="block text-xs font-medium text-stone-600">{t('skills.create.scope')}</legend>
+              <legend className="block text-xs font-medium text-stone-600 dark:text-neutral-300">{t('skills.create.scope')}</legend>
               <div className="mt-1 flex gap-2">
                 {(['user', 'project'] as const).map(s => {
                   const selected = scope === s;
@@ -282,7 +282,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                       className={`flex flex-1 cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors ${
                         selected
                           ? 'border-primary-500 bg-primary-50 text-primary-900'
-                          : 'border-stone-200 bg-white text-stone-700 hover:border-stone-300'
+                          : 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 hover:border-stone-300 dark:border-neutral-700'
                       }`}>
                       <input
                         type="radio"
@@ -297,7 +297,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                   );
                 })}
               </div>
-              <p className="mt-1 text-[11px] text-stone-500">
+              <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
                 {scope === 'user'
                   ? t('skills.create.scopeUserHint')
                   : t('skills.create.scopeProjectHint')}
@@ -309,7 +309,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
               <div>
                 <label
                   htmlFor="create-skill-license"
-                  className="block text-xs font-medium text-stone-600">
+                  className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                   {t('skills.create.license')}
                 </label>
                 <input
@@ -318,14 +318,14 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                   value={license}
                   onChange={e => setLicense(e.target.value)}
                   maxLength={64}
-                  className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                  className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
                   placeholder="MIT"
                 />
               </div>
               <div>
                 <label
                   htmlFor="create-skill-author"
-                  className="block text-xs font-medium text-stone-600">
+                  className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                   {t('skills.create.author')}
                 </label>
                 <input
@@ -334,7 +334,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                   value={author}
                   onChange={e => setAuthor(e.target.value)}
                   maxLength={128}
-                  className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                  className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
                   placeholder={t('skills.create.authorPlaceholder')}
                 />
               </div>
@@ -344,9 +344,9 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
             <div>
               <label
                 htmlFor="create-skill-tags"
-                className="block text-xs font-medium text-stone-600">
+                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                 {t('skills.create.tags')}
-                <span className="ml-1 font-normal text-stone-400">{t('skills.create.commaSeparated')}</span>
+                <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">{t('skills.create.commaSeparated')}</span>
               </label>
               <input
                 id="create-skill-tags"
@@ -354,7 +354,7 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                 value={tagsCsv}
                 onChange={e => setTagsCsv(e.target.value)}
                 maxLength={256}
-                className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
                 placeholder="trading, research"
               />
             </div>
@@ -363,9 +363,9 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
             <div>
               <label
                 htmlFor="create-skill-tools"
-                className="block text-xs font-medium text-stone-600">
+                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                 {t('skills.create.allowedTools')}
-                <span className="ml-1 font-normal text-stone-400">{t('skills.create.commaSeparated')}</span>
+                <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">{t('skills.create.commaSeparated')}</span>
               </label>
               <input
                 id="create-skill-tools"
@@ -373,10 +373,10 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
                 value={allowedToolsCsv}
                 onChange={e => setAllowedToolsCsv(e.target.value)}
                 maxLength={512}
-                className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm font-mono text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm font-mono text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
                 placeholder="node_exec, fetch"
               />
-              <p className="mt-1 text-[11px] text-stone-500">
+              <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
                 Rendered into the SKILL.md frontmatter as{' '}
                 <code className="font-mono">allowed-tools:</code>.
               </p>
@@ -394,12 +394,12 @@ export default function CreateSkillModal({ onClose, onCreated }: Props) {
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-stone-100 px-5 py-3">
+          <div className="flex items-center justify-end gap-2 border-t border-stone-100 dark:border-neutral-800 px-5 py-3">
             <button
               type="button"
               onClick={onClose}
               disabled={submitting}
-              className="rounded-lg px-4 py-2 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
+              className="rounded-lg px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
               {t('common.cancel')}
             </button>
             <button
diff --git a/app/src/components/skills/InstallSkillDialog.tsx b/app/src/components/skills/InstallSkillDialog.tsx
index ad22c2e65..30b52dc03 100644
--- a/app/src/components/skills/InstallSkillDialog.tsx
+++ b/app/src/components/skills/InstallSkillDialog.tsx
@@ -245,17 +245,17 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="install-skill-title"
-        className="relative w-full max-w-[560px] animate-fade-in rounded-2xl bg-white shadow-2xl">
+        className="relative w-full max-w-[560px] animate-fade-in rounded-2xl bg-white dark:bg-neutral-900 shadow-2xl">
         <form onSubmit={handleSubmit}>
           {/* Header */}
-          <div className="flex items-start justify-between gap-3 border-b border-stone-100 px-5 py-4">
+          <div className="flex items-start justify-between gap-3 border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
             <div className="min-w-0 flex-1">
               <h2
                 id="install-skill-title"
-                className="font-sans text-base font-semibold text-stone-900">
+                className="font-sans text-base font-semibold text-stone-900 dark:text-neutral-100">
                 {t('skills.install.title')}
               </h2>
-              <p className="mt-0.5 text-xs text-stone-500">
+              <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
                 Fetches a single <code className="font-mono">SKILL.md</code> over HTTPS and installs
                 it under <code className="font-mono">.openhuman/skills/</code>. HTTPS only; private
                 and loopback hosts are blocked.
@@ -271,7 +271,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
               }}
               disabled={submitting}
               aria-label="Close"
-              className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
+              className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-600 dark:hover:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
               <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -289,7 +289,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
             <div>
               <label
                 htmlFor="install-skill-url"
-                className="block text-xs font-medium text-stone-600">
+                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                 {t('skills.install.urlLabel')}<span className="text-coral-500"> *</span>
               </label>
               <input
@@ -303,7 +303,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 disabled={submitting || result !== null}
                 required
                 maxLength={2048}
-                className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 font-mono text-sm text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-stone-50 disabled:text-stone-500"
+                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 font-mono text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-stone-50 dark:disabled:bg-neutral-800/60 disabled:text-stone-500 dark:text-neutral-400"
                 placeholder="https://raw.githubusercontent.com/owner/repo/main/SKILL.md"
               />
               {url.trim() && !urlValid ? (
@@ -311,7 +311,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                   URL must be a well-formed <code className="font-mono">https://</code> link.
                 </p>
               ) : (
-                <p className="mt-1 text-[11px] text-stone-500">
+                <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
                   Direct link to a <code className="font-mono">.md</code> file.{' '}
                   <code className="font-mono">github.com/…/blob/…</code> URLs auto-rewrite to
                   <code className="font-mono"> raw.githubusercontent.com</code>.
@@ -323,9 +323,9 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
             <div>
               <label
                 htmlFor="install-skill-timeout"
-                className="block text-xs font-medium text-stone-600">
+                className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                 {t('skills.install.timeoutLabel')}
-                <span className="ml-1 font-normal text-stone-400">{t('skills.install.timeoutHint')}</span>
+                <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">{t('skills.install.timeoutHint')}</span>
               </label>
               <input
                 id="install-skill-timeout"
@@ -336,13 +336,13 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 value={timeoutSecs}
                 onChange={e => setTimeoutSecs(e.target.value)}
                 disabled={submitting || result !== null}
-                className="mt-1 w-full rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-stone-50 disabled:text-stone-500"
+                className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:bg-stone-50 dark:disabled:bg-neutral-800/60 disabled:text-stone-500 dark:text-neutral-400"
                 placeholder="60"
               />
               {!timeoutValid ? (
                 <p className="mt-1 text-[11px] text-coral-600">Must be an integer between 1 and 600.</p>
               ) : (
-                <p className="mt-1 text-[11px] text-stone-500">
+                <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
                   Defaults to 60 seconds. Values outside 1–600 are clamped server-side.
                 </p>
               )}
@@ -389,7 +389,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 {result.stdout ? (
                   <details>
                     <summary className="cursor-pointer font-semibold">{t('skills.install.fetchLog')}</summary>
-                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white p-2 font-mono text-[11px] text-stone-800">
+                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
                       {result.stdout}
                     </pre>
                   </details>
@@ -397,7 +397,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 {result.stderr ? (
                   <details>
                     <summary className="cursor-pointer font-semibold">{t('skills.install.parseWarnings')}</summary>
-                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white p-2 font-mono text-[11px] text-stone-800">
+                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
                       {result.stderr}
                     </pre>
                   </details>
@@ -418,7 +418,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                       <p>{cat.hint}</p>
                       <details>
                         <summary className="cursor-pointer font-semibold">{t('skills.install.rawError')}</summary>
-                        <pre className="mt-1 whitespace-pre-wrap rounded border border-coral-200 bg-white p-2 font-mono text-[11px] text-stone-800">
+                        <pre className="mt-1 whitespace-pre-wrap rounded border border-coral-200 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
                           {error}
                         </pre>
                       </details>
@@ -430,12 +430,12 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-stone-100 px-5 py-3">
+          <div className="flex items-center justify-end gap-2 border-t border-stone-100 dark:border-neutral-800 px-5 py-3">
             <button
               type="button"
               onClick={onClose}
               disabled={submitting}
-              className="rounded-lg px-4 py-2 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
+              className="rounded-lg px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
               {result ? t('common.finish') : t('common.cancel')}
             </button>
             {result ? null : (
diff --git a/app/src/components/skills/MeetingBotsCard.tsx b/app/src/components/skills/MeetingBotsCard.tsx
index bb19a1e8e..c93dd1f26 100644
--- a/app/src/components/skills/MeetingBotsCard.tsx
+++ b/app/src/components/skills/MeetingBotsCard.tsx
@@ -63,7 +63,7 @@ function MeetingBotsBanner({ onClick }: { onClick: () => void }) {
       type="button"
       onClick={onClick}
       data-testid="meeting-bots-banner"
-      className="group relative w-full overflow-hidden rounded-2xl border border-primary-200/60 bg-gradient-to-br from-primary-50 via-white to-amber-50 p-4 text-left shadow-soft transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 animate-fade-up">
+      className="group relative w-full overflow-hidden rounded-2xl border border-primary-200/60 dark:border-primary-500/30 bg-gradient-to-br from-primary-50 via-white to-amber-50 dark:from-primary-500/15 dark:via-neutral-900 dark:to-amber-500/10 p-4 text-left shadow-soft transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 animate-fade-up">
       {/* Decorative gradient orbs — purely cosmetic, hidden from a11y. */}
       <span
         aria-hidden="true"
@@ -77,7 +77,7 @@ function MeetingBotsBanner({ onClick }: { onClick: () => void }) {
       <div className="relative flex items-center gap-3">
         <span
           aria-hidden="true"
-          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white text-base font-bold text-primary-600 shadow-soft ring-1 ring-primary-200/70">
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white dark:bg-neutral-900 text-base font-bold text-primary-600 shadow-soft ring-1 ring-primary-200/70">
           {/* Tiny "wave" mark — three dots that animate on hover. */}
           <span className="flex items-end gap-0.5">
             <span className="h-2 w-1 rounded-full bg-primary-500 transition group-hover:h-3" />
@@ -88,21 +88,21 @@ function MeetingBotsBanner({ onClick }: { onClick: () => void }) {
 
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <h2 className="text-sm font-semibold text-stone-900">
+            <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
               {t('skills.meetingBots.bannerTitle')}
             </h2>
-            <span className="rounded-full bg-primary-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-700">
+            <span className="rounded-full bg-primary-100 dark:bg-primary-500/20 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-700 dark:text-primary-300">
               {t('skills.meetingBots.newBadge')}
             </span>
           </div>
-          <p className="mt-0.5 line-clamp-1 text-[11px] leading-relaxed text-stone-600">
+          <p className="mt-0.5 line-clamp-1 text-[11px] leading-relaxed text-stone-600 dark:text-neutral-300">
             {t('skills.meetingBots.bannerDesc')}
           </p>
         </div>
 
         <span
           aria-hidden="true"
-          className="ml-2 hidden text-stone-400 transition group-hover:text-stone-600 sm:inline">
+          className="ml-2 hidden text-stone-400 dark:text-neutral-500 transition group-hover:text-stone-600 dark:group-hover:text-neutral-300 sm:inline">
           →
         </span>
       </div>
@@ -182,20 +182,20 @@ function MeetingBotsModal({ onClose, onToast }: ModalProps) {
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
       onClick={onClose}>
       <div
-        className="w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-xl"
+        className="w-full max-w-md overflow-hidden rounded-2xl bg-white dark:bg-neutral-900 shadow-xl"
         onClick={e => e.stopPropagation()}>
         {/* Header band — same fun gradient as the banner so the modal feels like
             a continuation of the click, not a context switch. */}
-        <div className="relative bg-gradient-to-br from-primary-50 via-white to-amber-50 px-5 py-4">
+        <div className="relative bg-gradient-to-br from-primary-50 via-white to-amber-50 dark:from-primary-500/15 dark:via-neutral-900 dark:to-amber-500/10 px-5 py-4">
           <button
             type="button"
             onClick={onClose}
             aria-label="Close"
-            className="absolute right-3 top-3 rounded-full p-1 text-stone-500 hover:bg-white/80 hover:text-stone-800">
+            className="absolute right-3 top-3 rounded-full p-1 text-stone-500 dark:text-neutral-400 hover:bg-white/80 dark:hover:bg-neutral-800/60 hover:text-stone-800 dark:hover:text-neutral-100">
             ✕
           </button>
-          <h2 className="text-base font-semibold text-stone-900">{t('skills.meetingBots.modalTitle')}</h2>
-          <p className="mt-1 text-xs leading-relaxed text-stone-600">
+          <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{t('skills.meetingBots.modalTitle')}</h2>
+          <p className="mt-1 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
             {t('skills.meetingBots.modalDesc')}
           </p>
         </div>
@@ -215,7 +215,7 @@ function MeetingBotsModal({ onClose, onToast }: ModalProps) {
                   className={`rounded-full px-3 py-1 text-[11px] font-medium transition ${
                     active
                       ? 'bg-primary-500 text-white'
-                      : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
+                      : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-700'
                   }`}>
                   {p.label}
                   {p.comingSoon && <span className="ml-1 opacity-70">· soon</span>}
@@ -226,7 +226,7 @@ function MeetingBotsModal({ onClose, onToast }: ModalProps) {
 
           <form onSubmit={handleSubmit} className="space-y-3">
             <label className="block">
-              <span className="text-[10px] font-medium uppercase tracking-wide text-stone-500">
+              <span className="text-[10px] font-medium uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                 {t('skills.meetingBots.meetingLink')}
               </span>
               <input
@@ -239,13 +239,13 @@ function MeetingBotsModal({ onClose, onToast }: ModalProps) {
                 placeholder={selected.domainHint}
                 disabled={isComingSoon || submitting}
                 autoFocus
-                className="mt-1 w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 placeholder:text-stone-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-stone-50"
+                className="mt-1 w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-stone-50 dark:disabled:bg-neutral-800/60"
                 required
               />
             </label>
 
             <label className="block">
-              <span className="text-[10px] font-medium uppercase tracking-wide text-stone-500">
+              <span className="text-[10px] font-medium uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                 {t('skills.meetingBots.displayName')}
               </span>
               <input
@@ -254,7 +254,7 @@ function MeetingBotsModal({ onClose, onToast }: ModalProps) {
                 onChange={e => setDisplayName(e.target.value)}
                 maxLength={64}
                 disabled={isComingSoon || submitting}
-                className="mt-1 w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-stone-50"
+                className="mt-1 w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-stone-50 dark:disabled:bg-neutral-800/60"
               />
             </label>
 
@@ -263,8 +263,8 @@ function MeetingBotsModal({ onClose, onToast }: ModalProps) {
                 role="alert"
                 className={`rounded-xl border px-3 py-2 text-xs ${
                   capacityGated
-                    ? 'border-amber-200 bg-amber-50 text-amber-800'
-                    : 'border-coral-200 bg-coral-50 text-coral-700'
+                    ? 'border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 text-amber-800 dark:text-amber-300'
+                    : 'border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 text-coral-700 dark:text-coral-300'
                 }`}>
                 {error}
               </div>
@@ -274,13 +274,13 @@ function MeetingBotsModal({ onClose, onToast }: ModalProps) {
               <button
                 type="button"
                 onClick={onClose}
-                className="rounded-xl px-3 py-2 text-sm font-medium text-stone-600 hover:bg-stone-100">
+                className="rounded-xl px-3 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800">
                 {t('common.cancel')}
               </button>
               <button
                 type="submit"
                 disabled={submitting || isComingSoon || !meetUrl.trim()}
-                className="rounded-xl bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:cursor-not-allowed disabled:bg-stone-200 disabled:text-stone-400">
+                className="rounded-xl bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:cursor-not-allowed disabled:bg-stone-200 dark:disabled:bg-neutral-700 disabled:text-stone-400 dark:disabled:text-neutral-500">
                 {isComingSoon
                   ? `${selected.label} ${t('skills.meetingBots.comingSoon')}`
                   : submitting
diff --git a/app/src/components/skills/ScreenIntelligenceSetupModal.tsx b/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
index d6f689616..48e37f1a8 100644
--- a/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
+++ b/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
@@ -42,21 +42,21 @@ const PermissionRow = ({
     ? 'bg-sage-50 text-sage-700 border-sage-200'
     : value === 'denied'
       ? 'bg-coral-50 text-coral-700 border-coral-200'
-      : 'bg-stone-100 text-stone-600 border-stone-200';
+      : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 border-stone-200 dark:border-neutral-800';
 
   return (
-    <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-white px-3 py-2.5">
+    <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2.5">
       <div className="flex items-center gap-2">
         {granted ? (
           <svg className="w-4 h-4 text-sage-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
           </svg>
         ) : (
-          <svg className="w-4 h-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-4 h-4 text-stone-400 dark:text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="10" strokeWidth={2} />
           </svg>
         )}
-        <span className="text-sm text-stone-700">{label}</span>
+        <span className="text-sm text-stone-700 dark:text-neutral-200">{label}</span>
       </div>
       {granted ? (
         <span className={`rounded-md border px-2 py-0.5 text-[10px] uppercase tracking-wide ${badgeColor}`}>
@@ -161,34 +161,34 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
           role="dialog"
           aria-modal="true"
           aria-labelledby="si-setup-title"
-          className="w-full max-w-md mx-4 rounded-2xl bg-white shadow-xl overflow-hidden animate-fade-up">
-          <div className="flex items-center justify-between border-b border-stone-100 px-5 py-4">
+          className="w-full max-w-md mx-4 rounded-2xl bg-white dark:bg-neutral-900 shadow-xl overflow-hidden animate-fade-up">
+          <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
             <div className="flex items-center gap-3">
               <div className="w-9 h-9 rounded-xl bg-primary-50 flex items-center justify-center text-primary-600">
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 5h18v12H3zM8 21h8m-4-4v4" />
                 </svg>
               </div>
-              <h2 id="si-setup-title" className="text-sm font-semibold text-stone-900">{t('skills.setup.screenIntel.title')}</h2>
+              <h2 id="si-setup-title" className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{t('skills.setup.screenIntel.title')}</h2>
             </div>
             <button
               type="button"
               aria-label={t('common.close')}
               onClick={onClose}
-              className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors">
+              className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
           </div>
           <div className="px-5 py-6 space-y-4">
-            <p className="text-sm text-stone-600 leading-relaxed">
+            <p className="text-sm text-stone-600 dark:text-neutral-300 leading-relaxed">
               {t('skills.setup.screenIntel.macosOnly')}
             </p>
             <button
               type="button"
               onClick={onClose}
-              className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-100 transition-colors">
+              className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
               {t('common.close')}
             </button>
           </div>
@@ -208,9 +208,9 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
         role="dialog"
         aria-modal="true"
         aria-labelledby="si-setup-title"
-        className="w-full max-w-md mx-4 rounded-2xl bg-white shadow-xl overflow-hidden animate-fade-up">
+        className="w-full max-w-md mx-4 rounded-2xl bg-white dark:bg-neutral-900 shadow-xl overflow-hidden animate-fade-up">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-stone-100 px-5 py-4">
+        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
           <div className="flex items-center gap-3">
             <div className="w-9 h-9 rounded-xl bg-primary-50 flex items-center justify-center text-primary-600">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -218,8 +218,8 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
               </svg>
             </div>
             <div>
-              <h2 id="si-setup-title" className="text-sm font-semibold text-stone-900">{t('skills.setup.screenIntel.title')}</h2>
-              <p className="text-xs text-stone-500">
+              <h2 id="si-setup-title" className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{t('skills.setup.screenIntel.title')}</h2>
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
                 {step === 'permissions' && t('skills.setup.screenIntel.stepPermissions')}
                 {step === 'enable' && t('skills.setup.screenIntel.stepEnable')}
                 {step === 'success' && t('skills.setup.screenIntel.stepSuccess')}
@@ -229,7 +229,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
           <button
             type="button"
             onClick={onClose}
-            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors">
+            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -241,7 +241,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
           {/* ─── Step 1: Permissions ─── */}
           {step === 'permissions' && (
             <div className="space-y-3">
-              <p className="text-xs text-stone-500 leading-relaxed">
+              <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                 {t('skills.setup.screenIntel.permissionsDesc')}
               </p>
 
@@ -272,7 +272,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
                   {status?.permission_check_process_path && (
                     <p className="mt-1 opacity-75 text-[10px]">
                       macOS applies privacy to:{' '}
-                      <span className="font-mono break-all text-stone-600">
+                      <span className="font-mono break-all text-stone-600 dark:text-neutral-300">
                         {status.permission_check_process_path}
                       </span>
                     </p>
@@ -306,7 +306,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
                     type="button"
                     onClick={() => void refreshStatus()}
                     disabled={isRestartingCore}
-                    className="flex-1 rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-100 disabled:opacity-50 transition-colors">
+                    className="flex-1 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50 transition-colors">
                     {t('skills.setup.screenIntel.refreshStatus')}
                   </button>
                 )}
@@ -324,22 +324,22 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
                 <span className="text-xs text-sage-700">{t('skills.setup.screenIntel.allGranted')}</span>
               </div>
 
-              <p className="text-xs text-stone-500 leading-relaxed">
+              <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                 {t('skills.setup.screenIntel.enableDesc')}
               </p>
 
               <div className="space-y-2">
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.screenIntel.captureMode')}</span>
-                  <span className="text-xs text-stone-500">{t('skills.setup.screenIntel.captureModeValue')}</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.screenIntel.captureMode')}</span>
+                  <span className="text-xs text-stone-500 dark:text-neutral-400">{t('skills.setup.screenIntel.captureModeValue')}</span>
                 </div>
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.screenIntel.visionModel')}</span>
-                  <span className="text-xs text-stone-500">{t('common.enabled')}</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.screenIntel.visionModel')}</span>
+                  <span className="text-xs text-stone-500 dark:text-neutral-400">{t('common.enabled')}</span>
                 </div>
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.screenIntel.panicHotkey')}</span>
-                  <span className="text-xs font-mono text-stone-500">{status?.session.panic_hotkey ?? 'Cmd+Shift+.'}</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.screenIntel.panicHotkey')}</span>
+                  <span className="text-xs font-mono text-stone-500 dark:text-neutral-400">{status?.session.panic_hotkey ?? 'Cmd+Shift+.'}</span>
                 </div>
               </div>
 
@@ -369,8 +369,8 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
               </div>
 
               <div>
-                <h3 className="text-sm font-semibold text-stone-900">{t('skills.setup.screenIntel.activeTitle')}</h3>
-                <p className="mt-1 text-xs text-stone-500 leading-relaxed">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{t('skills.setup.screenIntel.activeTitle')}</h3>
+                <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                   {t('skills.setup.screenIntel.activeDesc')}
                 </p>
               </div>
@@ -385,7 +385,7 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
                 <button
                   type="button"
                   onClick={onClose}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-100 transition-colors">
+                  className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
                   {t('common.finish')}
                 </button>
               </div>
diff --git a/app/src/components/skills/SkillCard.tsx b/app/src/components/skills/SkillCard.tsx
index 5acdab47a..d5874f434 100644
--- a/app/src/components/skills/SkillCard.tsx
+++ b/app/src/components/skills/SkillCard.tsx
@@ -69,30 +69,30 @@ export function UnifiedSkillCard({
   const ctaStyle = CTA_STYLES[ctaVariant] ?? CTA_STYLES.primary;
 
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-stone-100 bg-white p-3 transition-colors hover:bg-stone-50">
-      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center text-stone-600">
+    <div className="flex items-center gap-3 rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center text-stone-600 dark:text-neutral-300">
         {icon}
       </div>
 
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-sm font-semibold text-stone-900">{title}</span>
+          <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">{title}</span>
           {statusDot && <div className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${statusDot}`} />}
           {statusLabel && (
-            <span className={`flex-shrink-0 text-xs ${statusColor ?? 'text-stone-400'}`}>
+            <span className={`flex-shrink-0 text-xs ${statusColor ?? 'text-stone-400 dark:text-neutral-500'}`}>
               {statusLabel}
             </span>
           )}
         </div>
         {description && (
-          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-stone-600">{description}</p>
+          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">{description}</p>
         )}
         {syncSummaryText && !syncProgress?.active && (
-          <p className="mt-1 truncate text-[11px] text-stone-500">{syncSummaryText}</p>
+          <p className="mt-1 truncate text-[11px] text-stone-500 dark:text-neutral-400">{syncSummaryText}</p>
         )}
         {syncProgress?.active && (
           <div className="mt-1.5">
-            <div className="h-1.5 w-full overflow-hidden rounded-full bg-stone-100">
+            <div className="h-1.5 w-full overflow-hidden rounded-full bg-stone-100 dark:bg-neutral-800">
               {syncProgress.percent != null ? (
                 <div
                   className="h-full rounded-full bg-primary-400 transition-all duration-300"
@@ -106,7 +106,7 @@ export function UnifiedSkillCard({
               <p className="mt-1 truncate text-[11px] text-primary-600">{syncProgress.message}</p>
             )}
             {syncProgress.metricsText && (
-              <p className="mt-0.5 truncate text-[11px] text-stone-500">
+              <p className="mt-0.5 truncate text-[11px] text-stone-500 dark:text-neutral-400">
                 {syncProgress.metricsText}
               </p>
             )}
@@ -123,7 +123,7 @@ export function UnifiedSkillCard({
                 e.stopPropagation();
                 setMenuOpen(prev => !prev);
               }}
-              className="flex h-7 w-7 items-center justify-center rounded-lg text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-700"
+              className="flex h-7 w-7 items-center justify-center rounded-lg text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200"
               title={t('skills.card.moreActions')}>
               <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
                 <circle cx="5" cy="12" r="2" />
@@ -132,7 +132,7 @@ export function UnifiedSkillCard({
               </svg>
             </button>
             {menuOpen && (
-              <div className="absolute right-0 top-8 z-10 w-36 rounded-xl border border-stone-200 bg-white py-1 shadow-md">
+              <div className="absolute right-0 top-8 z-10 w-36 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-1 shadow-md">
                 {secondaryActions.map(action => (
                   <button
                     key={action.label}
@@ -144,7 +144,7 @@ export function UnifiedSkillCard({
                       setMenuOpen(false);
                       action.onClick();
                     }}
-                    className="flex w-full items-center gap-2 px-3 py-2 text-xs text-stone-700 hover:bg-stone-50 disabled:opacity-40">
+                    className="flex w-full items-center gap-2 px-3 py-2 text-xs text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-40">
                     {action.icon}
                     {action.label}
                   </button>
diff --git a/app/src/components/skills/SkillCategoryFilter.tsx b/app/src/components/skills/SkillCategoryFilter.tsx
index 58bee7634..72772e521 100644
--- a/app/src/components/skills/SkillCategoryFilter.tsx
+++ b/app/src/components/skills/SkillCategoryFilter.tsx
@@ -22,11 +22,11 @@ const SkillCategoryFilter = ({ categories, selected, onChange }: SkillCategoryFi
         <span className="flex items-center gap-1.5">
           <span
             className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${
-              active ? skillCategoryChipClassName(item.value) : 'bg-stone-100 text-stone-500'
+              active ? skillCategoryChipClassName(item.value) : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400'
             }`}>
             <SkillCategoryIcon
               category={item.value}
-              className={active ? skillCategoryIconClassName(item.value) : 'text-stone-500'}
+              className={active ? skillCategoryIconClassName(item.value) : 'text-stone-500 dark:text-neutral-400'}
             />
           </span>
           {item.label}
diff --git a/app/src/components/skills/SkillDetailDrawer.tsx b/app/src/components/skills/SkillDetailDrawer.tsx
index 9814a5e3a..45b19805c 100644
--- a/app/src/components/skills/SkillDetailDrawer.tsx
+++ b/app/src/components/skills/SkillDetailDrawer.tsx
@@ -32,7 +32,7 @@ interface Props {
 
 function scopePillCls(scope: SkillSummary['scope'], legacy: boolean): string {
   if (legacy || scope === 'legacy') {
-    return 'bg-stone-100 text-stone-700 border-stone-200';
+    return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 border-stone-200 dark:border-neutral-800';
   }
   switch (scope) {
     case 'user':
@@ -40,7 +40,7 @@ function scopePillCls(scope: SkillSummary['scope'], legacy: boolean): string {
     case 'project':
       return 'bg-amber-50 text-amber-700 border-amber-200';
     default:
-      return 'bg-stone-100 text-stone-700 border-stone-200';
+      return 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 border-stone-200 dark:border-neutral-800';
   }
 }
 
@@ -117,14 +117,14 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="skill-drawer-title"
-        className="relative ml-auto flex h-full w-full max-w-[520px] flex-col bg-white shadow-2xl animate-slide-in-right">
+        className="relative ml-auto flex h-full w-full max-w-[520px] flex-col bg-white dark:bg-neutral-900 shadow-2xl animate-slide-in-right">
         {/* Header */}
-        <div className="flex items-start justify-between gap-3 border-b border-stone-100 px-5 py-4">
+        <div className="flex items-start justify-between gap-3 border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
               <h2
                 id="skill-drawer-title"
-                className="truncate text-base font-semibold text-stone-900 font-sans">
+                className="truncate text-base font-semibold text-stone-900 dark:text-neutral-100 font-sans">
                 {skill.name}
               </h2>
               <span
@@ -133,7 +133,7 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
               </span>
             </div>
             {skill.version ? (
-              <p className="mt-1 text-xs text-stone-500 font-mono">v{skill.version}</p>
+              <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400 font-mono">v{skill.version}</p>
             ) : null}
           </div>
           <button
@@ -144,7 +144,7 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
               onClose();
             }}
             aria-label={t('skills.detail.closeAriaLabel')}
-            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
+            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-600 dark:hover:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -161,7 +161,7 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
           <div className="px-5 py-4 space-y-4">
             {/* Description */}
             {skill.description ? (
-              <p className="text-sm leading-relaxed text-stone-700 font-sans">
+              <p className="text-sm leading-relaxed text-stone-700 dark:text-neutral-200 font-sans">
                 {skill.description}
               </p>
             ) : null}
@@ -170,18 +170,18 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
             <dl className="grid grid-cols-[auto,1fr] gap-x-3 gap-y-2 text-xs">
               {skill.author ? (
                 <>
-                  <dt className="font-medium text-stone-500">{t('skills.detail.author')}</dt>
-                  <dd className="text-stone-800">{skill.author}</dd>
+                  <dt className="font-medium text-stone-500 dark:text-neutral-400">{t('skills.detail.author')}</dt>
+                  <dd className="text-stone-800 dark:text-neutral-100">{skill.author}</dd>
                 </>
               ) : null}
               {skill.tags.length > 0 ? (
                 <>
-                  <dt className="font-medium text-stone-500">{t('skills.detail.tags')}</dt>
+                  <dt className="font-medium text-stone-500 dark:text-neutral-400">{t('skills.detail.tags')}</dt>
                   <dd className="flex flex-wrap gap-1">
                     {skill.tags.map(tag => (
                       <span
                         key={tag}
-                        className="inline-flex items-center rounded-md border border-stone-200 bg-stone-50 px-1.5 py-0.5 text-[10px] text-stone-700">
+                        className="inline-flex items-center rounded-md border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-1.5 py-0.5 text-[10px] text-stone-700 dark:text-neutral-200">
                         {tag}
                       </span>
                     ))}
@@ -190,7 +190,7 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
               ) : null}
               {skill.tools.length > 0 ? (
                 <>
-                  <dt className="font-medium text-stone-500">{t('skills.detail.allowedTools')}</dt>
+                  <dt className="font-medium text-stone-500 dark:text-neutral-400">{t('skills.detail.allowedTools')}</dt>
                   <dd className="flex flex-wrap gap-1">
                     {skill.tools.map(tool => (
                       <span
@@ -204,8 +204,8 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
               ) : null}
               {skill.location ? (
                 <>
-                  <dt className="font-medium text-stone-500">{t('skills.detail.location')}</dt>
-                  <dd className="truncate font-mono text-[11px] text-stone-600" title={skill.location}>
+                  <dt className="font-medium text-stone-500 dark:text-neutral-400">{t('skills.detail.location')}</dt>
+                  <dd className="truncate font-mono text-[11px] text-stone-600 dark:text-neutral-300" title={skill.location}>
                     {skill.location}
                   </dd>
                 </>
@@ -228,11 +228,11 @@ export default function SkillDetailDrawer({ skill, onClose }: Props) {
 
             {/* Resources */}
             <div>
-              <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-stone-500">
+              <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
                 {t('skills.detail.bundledResources')} ({skill.resources.length})
               </h3>
               {skill.resources.length === 0 ? (
-                <p className="text-xs text-stone-400 italic">{t('skills.detail.noBundledResources')}</p>
+                <p className="text-xs text-stone-400 dark:text-neutral-500 italic">{t('skills.detail.noBundledResources')}</p>
               ) : (
                 <SkillResourceTree
                   resources={skill.resources}
diff --git a/app/src/components/skills/SkillResourcePreview.tsx b/app/src/components/skills/SkillResourcePreview.tsx
index 5e2473108..f8f1a9e66 100644
--- a/app/src/components/skills/SkillResourcePreview.tsx
+++ b/app/src/components/skills/SkillResourcePreview.tsx
@@ -67,11 +67,11 @@ export default function SkillResourcePreview({ skillId, relativePath, onDismiss
   }, [skillId, relativePath]);
 
   return (
-    <div className="overflow-hidden rounded-xl border border-stone-200 bg-white shadow-soft">
-      <div className="flex items-center justify-between gap-2 border-b border-stone-200 bg-stone-50 px-3 py-2">
+    <div className="overflow-hidden rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-soft">
+      <div className="flex items-center justify-between gap-2 border-b border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
         <div className="min-w-0 flex-1">
           <p
-            className="truncate font-mono text-[11px] text-stone-700"
+            className="truncate font-mono text-[11px] text-stone-700 dark:text-neutral-200"
             title={relativePath}>
             {relativePath}
           </p>
@@ -83,7 +83,7 @@ export default function SkillResourcePreview({ skillId, relativePath, onDismiss
             onDismiss();
           }}
           aria-label={t('skills.resource.preview.closeAriaLabel')}
-          className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
+          className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
           <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
@@ -96,7 +96,7 @@ export default function SkillResourcePreview({ skillId, relativePath, onDismiss
       </div>
 
       {state.status === 'loading' ? (
-        <div className="flex items-center justify-center gap-2 px-3 py-6 text-xs text-stone-500">
+        <div className="flex items-center justify-center gap-2 px-3 py-6 text-xs text-stone-500 dark:text-neutral-400">
           <svg
             className="h-4 w-4 animate-spin text-primary-500"
             fill="none"
@@ -134,11 +134,11 @@ export default function SkillResourcePreview({ skillId, relativePath, onDismiss
 
       {state.status === 'success' ? (
         <>
-          <pre className="max-h-[320px] overflow-auto px-3 py-3 font-mono text-[11px] leading-relaxed text-stone-900 whitespace-pre-wrap break-words">
+          <pre className="max-h-[320px] overflow-auto px-3 py-3 font-mono text-[11px] leading-relaxed text-stone-900 dark:text-neutral-100 whitespace-pre-wrap break-words">
             {state.content}
           </pre>
-          <div className="flex items-center justify-end border-t border-stone-200 bg-stone-50 px-3 py-1.5">
-            <span className="text-[10px] font-mono text-stone-500">
+          <div className="flex items-center justify-end border-t border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5">
+            <span className="text-[10px] font-mono text-stone-500 dark:text-neutral-400">
               {typeof state.bytes === 'number' ? formatBytes(state.bytes) : ''}
             </span>
           </div>
diff --git a/app/src/components/skills/SkillResourceTree.tsx b/app/src/components/skills/SkillResourceTree.tsx
index 461ddaf99..567e28b5d 100644
--- a/app/src/components/skills/SkillResourceTree.tsx
+++ b/app/src/components/skills/SkillResourceTree.tsx
@@ -82,7 +82,7 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
   const groups = useMemo(() => groupResources(resources), [resources]);
 
   if (groups.length === 0) {
-    return <p className="text-xs text-stone-400 italic">{t('skills.resource.tree.empty')}</p>;
+    return <p className="text-xs text-stone-400 dark:text-neutral-500 italic">{t('skills.resource.tree.empty')}</p>;
   }
 
   return (
@@ -90,14 +90,14 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
       {groups.map(group => (
         <div
           key={group.key}
-          className="rounded-xl border border-stone-200 bg-stone-50/50 overflow-hidden">
-          <div className="flex items-center justify-between border-b border-stone-200 bg-stone-50 px-3 py-1.5">
-            <h4 className="text-[11px] font-semibold uppercase tracking-wide text-stone-600">
+          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 overflow-hidden">
+          <div className="flex items-center justify-between border-b border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-1.5">
+            <h4 className="text-[11px] font-semibold uppercase tracking-wide text-stone-600 dark:text-neutral-300">
               {t(GROUP_LABEL_KEYS[group.key] ?? group.key)}
             </h4>
-            <span className="text-[10px] text-stone-400 font-mono">{group.items.length}</span>
+            <span className="text-[10px] text-stone-400 dark:text-neutral-500 font-mono">{group.items.length}</span>
           </div>
-          <ul className="divide-y divide-stone-100">
+          <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
             {group.items.map(path => {
               const isSelected = selectedPath === path;
               return (
@@ -110,8 +110,8 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
                     }}
                     className={`w-full truncate px-3 py-2 text-left text-[11px] font-mono transition-colors focus:outline-none focus:ring-1 focus:ring-inset focus:ring-primary-500 ${
                       isSelected
-                        ? 'bg-primary-50 text-primary-700'
-                        : 'text-stone-700 hover:bg-white'
+                        ? 'bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300'
+                        : 'text-stone-700 dark:text-neutral-200 hover:bg-white dark:hover:bg-neutral-800/60'
                     }`}
                     title={path}>
                     {path}
diff --git a/app/src/components/skills/SkillSearchBar.tsx b/app/src/components/skills/SkillSearchBar.tsx
index 8ced0eed1..c0c2ed15b 100644
--- a/app/src/components/skills/SkillSearchBar.tsx
+++ b/app/src/components/skills/SkillSearchBar.tsx
@@ -17,7 +17,7 @@ export default function SkillSearchBar({
     <div className="relative">
       <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
         <svg
-          className="h-4 w-4 text-stone-400"
+          className="h-4 w-4 text-stone-400 dark:text-neutral-500"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24">
@@ -34,13 +34,13 @@ export default function SkillSearchBar({
         value={value}
         onChange={e => onChange(e.target.value)}
         placeholder={effectivePlaceholder}
-        className="w-full rounded-xl border border-stone-200 bg-white py-2 pl-9 pr-9 text-sm text-stone-900 placeholder-stone-400 focus:border-primary-300 focus:outline-none focus:ring-1 focus:ring-primary-200"
+        className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-2 pl-9 pr-9 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 focus:border-primary-300 focus:outline-none focus:ring-1 focus:ring-primary-200"
       />
       {value && (
         <button
           type="button"
           onClick={() => onChange('')}
-          className="absolute inset-y-0 right-3 flex items-center text-stone-400 hover:text-stone-600">
+          className="absolute inset-y-0 right-3 flex items-center text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300">
           <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
diff --git a/app/src/components/skills/UninstallSkillConfirmDialog.tsx b/app/src/components/skills/UninstallSkillConfirmDialog.tsx
index 3b2ce8b2b..c041d6bd8 100644
--- a/app/src/components/skills/UninstallSkillConfirmDialog.tsx
+++ b/app/src/components/skills/UninstallSkillConfirmDialog.tsx
@@ -104,15 +104,15 @@ export default function UninstallSkillConfirmDialog({ skill, onClose, onUninstal
       onMouseDown={e => {
         if (e.target === e.currentTarget && !submitting) onClose();
       }}>
-      <div className="w-[420px] max-w-[90vw] rounded-2xl bg-white p-5 shadow-2xl">
-        <h2 id="uninstall-skill-title" className="text-base font-semibold text-stone-900">
+      <div className="w-[420px] max-w-[90vw] rounded-2xl bg-white dark:bg-neutral-900 p-5 shadow-2xl">
+        <h2 id="uninstall-skill-title" className="text-base font-semibold text-stone-900 dark:text-neutral-100">
           {t('skills.uninstall.title')} {skill.name}?
         </h2>
-        <p className="mt-2 text-sm text-stone-600">
+        <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
           {t('skills.uninstall.description')}
         </p>
         {skill.location && (
-          <p className="mt-3 break-all rounded-lg bg-stone-50 px-3 py-2 font-mono text-[11px] text-stone-600">
+          <p className="mt-3 break-all rounded-lg bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 font-mono text-[11px] text-stone-600 dark:text-neutral-300">
             {skill.location.replace(/\/SKILL\.md$/i, '')}
           </p>
         )}
@@ -128,7 +128,7 @@ export default function UninstallSkillConfirmDialog({ skill, onClose, onUninstal
             type="button"
             disabled={submitting}
             onClick={onClose}
-            className="rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50">
+            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:cursor-not-allowed disabled:opacity-50">
             {t('common.cancel')}
           </button>
           <button
diff --git a/app/src/components/skills/VoiceSetupModal.tsx b/app/src/components/skills/VoiceSetupModal.tsx
index 41d2ee206..1dbe77208 100644
--- a/app/src/components/skills/VoiceSetupModal.tsx
+++ b/app/src/components/skills/VoiceSetupModal.tsx
@@ -78,9 +78,9 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="voice-setup-title"
-        className="w-full max-w-md mx-4 rounded-2xl bg-white shadow-xl overflow-hidden animate-fade-up">
+        className="w-full max-w-md mx-4 rounded-2xl bg-white dark:bg-neutral-900 shadow-xl overflow-hidden animate-fade-up">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-stone-100 px-5 py-4">
+        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
           <div className="flex items-center gap-3">
             <div className="w-9 h-9 rounded-xl bg-primary-50 flex items-center justify-center text-primary-600">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -93,8 +93,8 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
               </svg>
             </div>
             <div>
-              <h2 id="voice-setup-title" className="text-sm font-semibold text-stone-900">{t('skills.setup.voice.title')}</h2>
-              <p className="text-xs text-stone-500">
+              <h2 id="voice-setup-title" className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{t('skills.setup.voice.title')}</h2>
+              <p className="text-xs text-stone-500 dark:text-neutral-400">
                 {step === 'setup' && t('skills.setup.voice.stepSetup')}
                 {step === 'enable' && t('skills.setup.voice.stepEnable')}
                 {step === 'success' && t('skills.setup.voice.stepSuccess')}
@@ -104,7 +104,7 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
           <button
             type="button"
             onClick={onClose}
-            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors">
+            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -126,7 +126,7 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
                 </div>
               </div>
 
-              <p className="text-xs text-stone-500 leading-relaxed">
+              <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                 {t('skills.setup.voice.sttReturnHint')}
               </p>
 
@@ -140,7 +140,7 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
                 <button
                   type="button"
                   onClick={onClose}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-100 transition-colors">
+                  className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
                   {t('common.cancel')}
                 </button>
               </div>
@@ -157,18 +157,18 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
                 <span className="text-xs text-sage-700">{t('skills.setup.voice.sttReady')}</span>
               </div>
 
-              <p className="text-xs text-stone-500 leading-relaxed">
+              <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                 {t('skills.setup.voice.enableDesc')}
               </p>
 
               <div className="space-y-2">
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.voice.hotkey')}</span>
-                  <span className="text-xs font-mono text-stone-500">{serverStatus?.hotkey ?? 'Fn'}</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.voice.hotkey')}</span>
+                  <span className="text-xs font-mono text-stone-500 dark:text-neutral-400">{serverStatus?.hotkey ?? 'Fn'}</span>
                 </div>
-                <div className="flex items-center justify-between rounded-xl border border-stone-200 bg-stone-50 px-3 py-2.5">
-                  <span className="text-sm text-stone-700">{t('skills.setup.voice.activation')}</span>
-                  <span className="text-xs text-stone-500">{serverStatus?.activation_mode === 'push' ? t('voice.pushToTalk') : t('voice.tapToToggle')}</span>
+                <div className="flex items-center justify-between rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5">
+                  <span className="text-sm text-stone-700 dark:text-neutral-200">{t('skills.setup.voice.activation')}</span>
+                  <span className="text-xs text-stone-500 dark:text-neutral-400">{serverStatus?.activation_mode === 'push' ? t('voice.pushToTalk') : t('voice.tapToToggle')}</span>
                 </div>
               </div>
 
@@ -198,8 +198,8 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
               </div>
 
               <div>
-                <h3 className="text-sm font-semibold text-stone-900">{t('skills.setup.voice.activeTitle')}</h3>
-                <p className="text-center mt-1 text-xs text-stone-500 leading-relaxed">
+                <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">{t('skills.setup.voice.activeTitle')}</h3>
+                <p className="text-center mt-1 text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
                   {t('skills.setup.voice.activeDescPrefix')} <span className="font-mono font-medium">{serverStatus?.hotkey ?? 'Fn'}</span> {t('skills.setup.voice.activeDescSuffix')}
                 </p>
               </div>
@@ -214,7 +214,7 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
                 <button
                   type="button"
                   onClick={onClose}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm font-medium text-stone-600 hover:bg-stone-100 transition-colors">
+                  className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
                   {t('common.finish')}
                 </button>
               </div>
diff --git a/app/src/components/skills/skillIcons.tsx b/app/src/components/skills/skillIcons.tsx
index 9d934c2e9..b683fb1a2 100644
--- a/app/src/components/skills/skillIcons.tsx
+++ b/app/src/components/skills/skillIcons.tsx
@@ -69,8 +69,8 @@ export const CHANNEL_ICONS: Record<string, ReactNode> = {
     <SkillIconBadge
       icon={FaGlobe}
       label="Web"
-      bgClassName="bg-stone-100"
-      iconClassName="text-stone-600"
+      bgClassName="bg-stone-100 dark:bg-neutral-800"
+      iconClassName="text-stone-600 dark:text-neutral-300"
     />
   ),
   imessage: (
@@ -89,9 +89,9 @@ const CATEGORY_META: Record<
 > = {
   All: {
     icon: LuBlocks,
-    chipClassName: 'bg-stone-100 text-stone-600',
-    iconClassName: 'text-stone-500',
-    headingClassName: 'text-stone-500',
+    chipClassName: 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300',
+    iconClassName: 'text-stone-500 dark:text-neutral-400',
+    headingClassName: 'text-stone-500 dark:text-neutral-400',
   },
   'Built-in': {
     icon: LuSparkles,
@@ -137,9 +137,9 @@ const CATEGORY_META: Record<
   },
   Other: {
     icon: LuBlocks,
-    chipClassName: 'bg-stone-100 text-stone-700',
-    iconClassName: 'text-stone-500',
-    headingClassName: 'text-stone-500',
+    chipClassName: 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200',
+    iconClassName: 'text-stone-500 dark:text-neutral-400',
+    headingClassName: 'text-stone-500 dark:text-neutral-400',
   },
 };
 
diff --git a/app/src/components/ui/Button.tsx b/app/src/components/ui/Button.tsx
index cec395ea7..c4689304a 100644
--- a/app/src/components/ui/Button.tsx
+++ b/app/src/components/ui/Button.tsx
@@ -16,10 +16,18 @@ const BASE =
   'focus-visible:ring-offset-2 disabled:opacity-40 disabled:pointer-events-none';
 
 const VARIANTS: Record<ButtonVariant, string> = {
-  primary: 'bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700',
-  secondary: 'bg-neutral-0 text-neutral-900 border border-neutral-300 hover:bg-neutral-50',
-  ghost: 'bg-transparent text-neutral-700 hover:bg-neutral-100',
-  danger: 'bg-transparent text-coral-600 border border-coral-300/50 hover:bg-coral-50',
+  primary:
+    'bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 ' +
+    'dark:bg-primary-500 dark:hover:bg-primary-400 dark:active:bg-primary-600',
+  secondary:
+    'bg-neutral-0 text-neutral-900 border border-neutral-300 hover:bg-neutral-50 ' +
+    'dark:bg-neutral-900 dark:text-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800',
+  ghost:
+    'bg-transparent text-neutral-700 hover:bg-neutral-100 ' +
+    'dark:text-neutral-200 dark:hover:bg-neutral-800',
+  danger:
+    'bg-transparent text-coral-600 border border-coral-300/50 hover:bg-coral-50 ' +
+    'dark:text-coral-400 dark:border-coral-500/40 dark:hover:bg-coral-500/10',
 };
 
 const SIZES: Record<ButtonSize, string> = {
diff --git a/app/src/components/ui/Card.tsx b/app/src/components/ui/Card.tsx
new file mode 100644
index 000000000..a0b0a318d
--- /dev/null
+++ b/app/src/components/ui/Card.tsx
@@ -0,0 +1,41 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+
+export type CardVariant = 'surface' | 'elevated' | 'outlined' | 'subtle';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+  padding?: CardPadding;
+  children?: ReactNode;
+}
+
+const VARIANTS: Record<CardVariant, string> = {
+  surface: 'bg-white border border-neutral-200 dark:bg-neutral-900 dark:border-neutral-800',
+  elevated:
+    'bg-white border border-neutral-200 shadow-soft ' +
+    'dark:bg-neutral-900 dark:border-neutral-800 dark:shadow-none',
+  outlined: 'bg-transparent border border-neutral-200 dark:border-neutral-800',
+  subtle: 'bg-neutral-50 border border-neutral-100 dark:bg-neutral-900/50 dark:border-neutral-800',
+};
+
+const PADDINGS: Record<CardPadding, string> = { none: '', sm: 'p-3', md: 'p-4', lg: 'p-6' };
+
+const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  const { variant = 'surface', padding = 'md', className, children, ...rest } = props;
+  const classes = [
+    'rounded-xl text-neutral-900 dark:text-neutral-100',
+    VARIANTS[variant],
+    PADDINGS[padding],
+    className ?? '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      {children}
+    </div>
+  );
+});
+Card.displayName = 'Card';
+
+export default Card;
diff --git a/app/src/components/ui/Input.tsx b/app/src/components/ui/Input.tsx
new file mode 100644
index 000000000..a1d49a8c9
--- /dev/null
+++ b/app/src/components/ui/Input.tsx
@@ -0,0 +1,36 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  inputSize?: InputSize;
+  invalid?: boolean;
+}
+
+const SIZES: Record<InputSize, string> = {
+  sm: 'h-8 px-2.5 text-sm rounded-md',
+  md: 'h-9 px-3 text-sm rounded-lg',
+  lg: 'h-11 px-4 text-base rounded-lg',
+};
+
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { inputSize = 'md', invalid, className, ...rest } = props;
+  const ring = invalid
+    ? 'border-coral-400 focus:border-coral-500 focus:ring-coral-500/20 dark:border-coral-500/60'
+    : 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20 dark:border-neutral-700 dark:focus:border-primary-400';
+  const classes = [
+    'w-full border bg-white text-neutral-900 placeholder-neutral-400',
+    'transition-colors duration-150 focus:outline-none focus:ring-2',
+    'disabled:opacity-50 disabled:bg-neutral-50',
+    'dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder-neutral-500 dark:disabled:bg-neutral-800',
+    SIZES[inputSize],
+    ring,
+    className ?? '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return <input ref={ref} className={classes} {...rest} />;
+});
+Input.displayName = 'Input';
+
+export default Input;
diff --git a/app/src/components/ui/index.ts b/app/src/components/ui/index.ts
new file mode 100644
index 000000000..ad28ac248
--- /dev/null
+++ b/app/src/components/ui/index.ts
@@ -0,0 +1,8 @@
+export { default as Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+export { default as Card } from './Card';
+export type { CardProps, CardVariant, CardPadding } from './Card';
+
+export { default as Input } from './Input';
+export type { InputProps, InputSize } from './Input';
diff --git a/app/src/components/upsell/UpsellBanner.tsx b/app/src/components/upsell/UpsellBanner.tsx
index d40b4c990..b4efed57e 100644
--- a/app/src/components/upsell/UpsellBanner.tsx
+++ b/app/src/components/upsell/UpsellBanner.tsx
@@ -11,24 +11,24 @@ interface UpsellBannerProps {
 
 const VARIANT_STYLES = {
   info: {
-    container: 'bg-blue-50 border-blue-200',
+    container: 'bg-blue-50 dark:bg-blue-500/15 border-blue-200 dark:border-blue-800',
     icon: 'text-blue-400',
-    title: 'text-blue-700',
-    text: 'text-blue-600',
+    title: 'text-blue-700 dark:text-blue-300',
+    text: 'text-blue-600 dark:text-blue-300',
     cta: 'bg-blue-500 hover:bg-blue-400 text-white',
   },
   warning: {
-    container: 'bg-amber-50 border-amber-200',
+    container: 'bg-amber-50 dark:bg-amber-500/15 border-amber-200 dark:border-amber-800',
     icon: 'text-amber-400',
-    title: 'text-amber-700',
-    text: 'text-amber-600',
+    title: 'text-amber-700 dark:text-amber-300',
+    text: 'text-amber-600 dark:text-amber-300',
     cta: 'bg-amber-500 hover:bg-amber-400 text-white',
   },
   upgrade: {
-    container: 'bg-amber-50 border-amber-200',
+    container: 'bg-amber-50 dark:bg-amber-500/15 border-amber-200 dark:border-amber-800',
     icon: 'text-amber-400',
-    title: 'text-amber-700',
-    text: 'text-amber-600',
+    title: 'text-amber-700 dark:text-amber-300',
+    text: 'text-amber-600 dark:text-amber-300',
     cta: 'bg-amber-500 hover:bg-amber-400 text-white',
   },
 };
@@ -77,7 +77,7 @@ export default function UpsellBanner({
         {dismissible && onDismiss && (
           <button
             onClick={onDismiss}
-            className="p-1 rounded text-stone-400 hover:text-stone-600 transition-colors"
+            className="p-1 rounded text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors"
             aria-label="Dismiss">
             <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
diff --git a/app/src/components/upsell/UsageLimitModal.tsx b/app/src/components/upsell/UsageLimitModal.tsx
index 05219803b..be9e593f9 100644
--- a/app/src/components/upsell/UsageLimitModal.tsx
+++ b/app/src/components/upsell/UsageLimitModal.tsx
@@ -52,7 +52,7 @@ export default function UsageLimitModal({
 
   return (
     <div className="fixed inset-0 z-[9999] bg-black/30 backdrop-blur-sm flex items-center justify-center">
-      <div className="bg-white rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6">
+      <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6">
         <div className="flex flex-col items-center text-center mb-4">
           <div className="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mb-3">
             <svg
@@ -68,25 +68,27 @@ export default function UsageLimitModal({
               />
             </svg>
           </div>
-          <h2 className="text-lg font-semibold text-stone-900">{t('upsell.usageLimit.heading')}</h2>
+          <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+            {t('upsell.usageLimit.heading')}
+          </h2>
         </div>
 
-        <p className="text-sm text-stone-600 text-center mb-4">{bodyText}</p>
+        <p className="text-sm text-stone-600 dark:text-neutral-300 text-center mb-4">{bodyText}</p>
 
         {nextPlan && (
-          <div className="rounded-xl bg-stone-50 border border-stone-200 p-3 mb-5">
-            <p className="text-xs font-medium text-stone-700 mb-1">
+          <div className="rounded-xl bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 p-3 mb-5">
+            <p className="text-xs font-medium text-stone-700 dark:text-neutral-200 mb-1">
               {t('upsell.usageLimit.planIncludes').replace('{plan}', nextPlan.name)}
             </p>
             <ul className="space-y-0.5">
-              <li className="text-xs text-stone-600">
+              <li className="text-xs text-stone-600 dark:text-neutral-300">
                 {t('upsell.usageLimit.perWindow').replace(
                   '{amount}',
                   nextPlan.fiveHourCapUsd.toFixed(2)
                 )}
               </li>
               {nextPlan.weeklyBudgetUsd > 0 && (
-                <li className="text-xs text-stone-600">
+                <li className="text-xs text-stone-600 dark:text-neutral-300">
                   {t('upsell.usageLimit.weeklyInference').replace(
                     '{amount}',
                     String(nextPlan.weeklyBudgetUsd)
@@ -108,7 +110,7 @@ export default function UsageLimitModal({
           </button>
           <button
             onClick={onClose}
-            className="w-full py-2 text-sm text-stone-500 hover:text-stone-700 transition-colors">
+            className="w-full py-2 text-sm text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors">
             {t('upsell.usageLimit.notNow')}
           </button>
         </div>
diff --git a/app/src/components/walkthrough/WalkthroughTooltip.tsx b/app/src/components/walkthrough/WalkthroughTooltip.tsx
index e9e7eb49c..ef0e957ec 100644
--- a/app/src/components/walkthrough/WalkthroughTooltip.tsx
+++ b/app/src/components/walkthrough/WalkthroughTooltip.tsx
@@ -35,9 +35,9 @@ const WalkthroughTooltip = ({
       className="w-80 font-sans animate-in fade-in slide-in-from-bottom-2 duration-300"
       style={{ animation: 'tooltipEnter 0.3s ease-out' }}>
       {/* Frosted card */}
-      <div className="bg-white/95 backdrop-blur-md rounded-2xl shadow-xl border border-stone-200/60 overflow-hidden">
+      <div className="bg-white/95 dark:bg-neutral-900/95 backdrop-blur-md rounded-2xl shadow-xl border border-stone-200/60 dark:border-neutral-800 overflow-hidden">
         {/* Progress bar — thin, smooth fill */}
-        <div className="h-1 bg-stone-100">
+        <div className="h-1 bg-stone-100 dark:bg-neutral-800">
           <div
             className="h-full bg-gradient-to-r from-[#2F6EF4] to-[#5B9BF3] transition-all duration-500 ease-out rounded-r-full"
             style={{ width: `${progress}%` }}
@@ -52,11 +52,11 @@ const WalkthroughTooltip = ({
             </span>
             <div className="flex-1 min-w-0">
               {step.title && (
-                <h3 className="text-[15px] font-semibold text-stone-900 leading-snug">
+                <h3 className="text-[15px] font-semibold text-stone-900 dark:text-neutral-100 leading-snug">
                   {step.title}
                 </h3>
               )}
-              <span className="text-[11px] text-stone-400 tabular-nums">
+              <span className="text-[11px] text-stone-400 dark:text-neutral-500 tabular-nums">
                 {t('walkthrough.tooltip.stepCounter')
                   .replace('{n}', String(index + 1))
                   .replace('{total}', String(size))}
@@ -65,7 +65,9 @@ const WalkthroughTooltip = ({
           </div>
 
           {/* Body */}
-          <div className="text-[13px] text-stone-600 leading-relaxed mb-5">{step.content}</div>
+          <div className="text-[13px] text-stone-600 dark:text-neutral-300 leading-relaxed mb-5">
+            {step.content}
+          </div>
 
           {/* Actions */}
           <div className="flex items-center gap-2">
@@ -73,7 +75,7 @@ const WalkthroughTooltip = ({
             {!isLastStep && (
               <button
                 {...skipProps}
-                className="text-[11px] text-stone-400 hover:text-stone-600 transition-colors px-2 py-1.5 rounded-lg hover:bg-stone-100">
+                className="text-[11px] text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors px-2 py-1.5 rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800/60">
                 {t('walkthrough.tooltip.skip')}
               </button>
             )}
@@ -84,7 +86,7 @@ const WalkthroughTooltip = ({
             {index > 0 && (
               <button
                 {...backProps}
-                className="text-[12px] text-stone-500 hover:text-stone-800 border border-stone-200 hover:border-stone-300 transition-all px-4 py-2 rounded-xl hover:shadow-sm">
+                className="text-[12px] text-stone-500 dark:text-neutral-400 hover:text-stone-800 dark:hover:text-neutral-100 border border-stone-200 dark:border-neutral-800 hover:border-stone-300 dark:hover:border-neutral-700 transition-all px-4 py-2 rounded-xl hover:shadow-sm">
                 {t('common.back')}
               </button>
             )}
diff --git a/app/src/components/webhooks/ComposeioTriggerHistory.tsx b/app/src/components/webhooks/ComposeioTriggerHistory.tsx
index beb9c1a3a..b7118dec7 100644
--- a/app/src/components/webhooks/ComposeioTriggerHistory.tsx
+++ b/app/src/components/webhooks/ComposeioTriggerHistory.tsx
@@ -31,10 +31,10 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
   if (entries.length === 0) {
     return (
       <div className="space-y-3">
-        <h3 className="text-lg font-semibold text-stone-900">
+        <h3 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
           {t('webhooks.composioHistory.title')}
         </h3>
-        <p className="rounded-xl border border-dashed border-stone-200 bg-stone-50 px-4 py-6 text-center text-sm text-stone-500">
+        <p className="rounded-xl border border-dashed border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800/60 px-4 py-6 text-center text-sm text-stone-500 dark:text-neutral-400">
           {t('webhooks.composioHistory.empty')}
         </p>
       </div>
@@ -45,13 +45,15 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
     <div className="space-y-3">
       <h3 className="text-lg font-semibold text-stone-900">
         {t('webhooks.composioHistory.title')}{' '}
-        <span className="text-sm font-normal text-stone-400">({entries.length})</span>
+        <span className="text-sm font-normal text-stone-400 dark:text-neutral-500">
+          ({entries.length})
+        </span>
       </h3>
       <div className="space-y-3">
         {entries.map(entry => (
           <article
             key={`${entry.metadata_uuid}-${entry.received_at_ms}`}
-            className="rounded-2xl border border-stone-200 bg-stone-50/60 p-4">
+            className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50/60 dark:bg-neutral-800/60 p-4">
             <div className="flex flex-wrap items-center gap-2">
               <span className="rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700">
                 {entry.toolkit}
@@ -59,20 +61,20 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
               <span className="rounded-full bg-sage-50 px-2.5 py-1 text-xs font-medium text-sage-700">
                 {formatTriggerLabel(entry.trigger)}
               </span>
-              <span className="text-xs text-stone-500">
+              <span className="text-xs text-stone-500 dark:text-neutral-400">
                 {formatTimestamp(entry.received_at_ms)}
               </span>
             </div>
 
-            <dl className="mt-3 grid gap-2 text-sm text-stone-700 md:grid-cols-2">
+            <dl className="mt-3 grid gap-2 text-sm text-stone-700 dark:text-neutral-200 md:grid-cols-2">
               <div>
-                <dt className="text-xs uppercase tracking-wide text-stone-400">
+                <dt className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('webhooks.composioHistory.metadataId')}
                 </dt>
                 <dd className="font-mono text-xs break-all">{entry.metadata_id}</dd>
               </div>
               <div>
-                <dt className="text-xs uppercase tracking-wide text-stone-400">
+                <dt className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('webhooks.composioHistory.metadataUuid')}
                 </dt>
                 <dd className="font-mono text-xs break-all">{entry.metadata_uuid}</dd>
@@ -80,7 +82,7 @@ export default function ComposeioTriggerHistory({ entries }: ComposeioTriggerHis
             </dl>
 
             <div className="mt-3">
-              <div className="mb-2 text-xs uppercase tracking-wide text-stone-400">
+              <div className="mb-2 text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                 {t('webhooks.composioHistory.payload')}
               </div>
               <pre className="max-h-64 overflow-auto rounded-xl bg-stone-900 px-3 py-3 text-xs text-stone-100">
diff --git a/app/src/features/human/HumanPage.tsx b/app/src/features/human/HumanPage.tsx
index 079897e70..46a0d26f5 100644
--- a/app/src/features/human/HumanPage.tsx
+++ b/app/src/features/human/HumanPage.tsx
@@ -27,7 +27,7 @@ const HumanPage = () => {
   // Sidebar reserves ~436px (420px panel + 16px gutter) on the right; the
   // mascot stage takes the remaining width so the two never overlap.
   return (
-    <div className="absolute inset-0 bg-stone-100 overflow-hidden">
+    <div className="absolute inset-0 bg-stone-100 dark:bg-neutral-950 overflow-hidden">
       <div
         className="pointer-events-none absolute inset-0"
         style={{
@@ -42,7 +42,7 @@ const HumanPage = () => {
         </div>
       </div>
 
-      <label className="absolute top-4 left-4 z-10 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/80 backdrop-blur-sm border border-stone-300 text-xs text-stone-700 shadow-soft cursor-pointer select-none">
+      <label className="absolute top-4 left-4 z-10 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm border border-stone-300 dark:border-neutral-700 text-xs text-stone-700 dark:text-neutral-200 shadow-soft cursor-pointer select-none">
         <input
           type="checkbox"
           checked={speakReplies}
@@ -54,7 +54,7 @@ const HumanPage = () => {
 
       {/* Chat sidebar — vertically centered above the BottomTabBar (~80px). */}
       <div className="absolute right-4 top-0 bottom-20 z-10 flex items-center">
-        <aside className="w-[420px] h-[min(720px,calc(100vh-160px))] rounded-2xl border border-stone-300 bg-white shadow-soft flex flex-col overflow-hidden">
+        <aside className="w-[420px] h-[min(720px,calc(100vh-160px))] rounded-2xl border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-soft flex flex-col overflow-hidden">
           <Conversations variant="sidebar" composer="mic-cloud" />
         </aside>
       </div>
diff --git a/app/src/features/human/MicComposer.tsx b/app/src/features/human/MicComposer.tsx
index b1cad20e8..9ccb7a59e 100644
--- a/app/src/features/human/MicComposer.tsx
+++ b/app/src/features/human/MicComposer.tsx
@@ -438,7 +438,7 @@ export function MicComposer({
           value={selectedDeviceId}
           onChange={e => setSelectedDeviceId(e.target.value)}
           disabled={state !== 'idle' || devices.length <= 1}
-          className="text-xs text-stone-600 bg-stone-100 border border-stone-200 rounded px-2 py-1 max-w-[220px] truncate disabled:opacity-50">
+          className="text-xs text-stone-600 dark:text-neutral-300 bg-stone-100 dark:bg-neutral-800 border border-stone-200 dark:border-neutral-700 rounded px-2 py-1 max-w-[220px] truncate disabled:opacity-50">
           {devices.map(d => (
             <option key={d.deviceId} value={d.deviceId}>
               {d.label}
@@ -489,7 +489,7 @@ export function MicComposer({
             </svg>
           )}
         </button>
-        <span className="text-xs text-stone-500 select-none">{label}</span>
+        <span className="text-xs text-stone-500 dark:text-neutral-400 select-none">{label}</span>
       </div>
     </div>
   );
diff --git a/app/src/index.css b/app/src/index.css
index 9f32aa402..888dbd678 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -24,16 +24,15 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
-    color: #171717;
+    color: var(--color-text-primary);
   }
 
   body {
-    @apply text-stone-900;
     @apply font-sans;
     line-height: 1.6;
 
-    background: #f5f5f5;
-    color: #171717;
+    background: var(--color-background);
+    color: var(--color-text-primary);
     position: absolute;
     top: 0;
     left: 0;
@@ -178,6 +177,14 @@
     background-position: 0 0;
   }
 
+  :root.dark .app-dotted-canvas {
+    background-image: radial-gradient(
+      circle at center,
+      rgba(255, 255, 255, 0.08) 1px,
+      transparent 1px
+    );
+  }
+
   /* Input components with consistent styling */
   .input-primary {
     @apply w-full px-4 py-3 rounded-lg;
@@ -245,6 +252,64 @@
   .price-neutral {
     @apply text-market-neutral font-mono font-medium;
   }
+
+  /* ============================================
+     Dark-mode overrides for @apply'd component classes
+     ============================================ */
+  :root.dark .card,
+  :root.dark .card-hover {
+    background-color: theme('colors.neutral.900');
+    border-color: theme('colors.neutral.800');
+    color: theme('colors.neutral.100');
+  }
+
+  :root.dark .input-primary {
+    background-color: theme('colors.neutral.900');
+    border-color: theme('colors.neutral.700');
+    color: theme('colors.neutral.100');
+  }
+
+  :root.dark .input-primary::placeholder {
+    color: theme('colors.neutral.500');
+  }
+
+  :root.dark .status-online {
+    background-color: rgba(52, 199, 89, 0.15);
+    color: theme('colors.sage.300');
+  }
+
+  :root.dark .status-offline {
+    background-color: theme('colors.neutral.800');
+    color: theme('colors.neutral.300');
+  }
+
+  :root.dark .status-warning {
+    background-color: rgba(232, 167, 40, 0.15);
+    color: theme('colors.amber.300');
+  }
+
+  :root.dark .nav-item {
+    color: theme('colors.neutral.400');
+  }
+
+  :root.dark .nav-item:hover {
+    color: theme('colors.neutral.100');
+    background-color: theme('colors.neutral.800');
+  }
+
+  :root.dark .nav-item-active {
+    background-color: theme('colors.neutral.800');
+    color: theme('colors.neutral.100');
+  }
+
+  :root.dark .message-received {
+    background-color: theme('colors.neutral.800');
+    color: theme('colors.neutral.100');
+  }
+
+  :root.dark .loading-pulse {
+    background-color: theme('colors.neutral.800');
+  }
 }
 
 /* Utility layer - Custom utilities */
@@ -294,6 +359,12 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
+  :root.dark .glass {
+    background: rgba(23, 23, 23, 0.7);
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  }
+
   /* Animation utilities */
   .animate-fade-in-up {
     animation: fadeInUp 0.5s ease-out forwards;
@@ -370,6 +441,10 @@
     backdrop-filter: blur(8px);
   }
 
+  :root.dark .skills-table-header {
+    background: rgba(23, 23, 23, 0.9);
+  }
+
   /* Gradient fade overlay at bottom */
   .skills-table-container::after {
     content: '';
@@ -383,6 +458,10 @@
     z-index: 10;
   }
 
+  :root.dark .skills-table-container::after {
+    background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.9));
+  }
+
   /* Hover overlay */
   .skills-table-overlay {
     z-index: 20;
diff --git a/app/src/lib/i18n/chunks/zh-CN-3.ts b/app/src/lib/i18n/chunks/zh-CN-3.ts
index 48e97ffad..0ce17d201 100644
--- a/app/src/lib/i18n/chunks/zh-CN-3.ts
+++ b/app/src/lib/i18n/chunks/zh-CN-3.ts
@@ -242,9 +242,11 @@ const zhCN3: TranslationMap = {
   'accounts.addModal.allConnected': '全部已连接',
   'accounts.addModal.title': '添加账户',
   'accounts.respondQueue.empty': '队列为空',
+  'accounts.respondQueue.hide': '隐藏回复队列',
   'accounts.respondQueue.loadFailed': '加载回复队列失败',
   'accounts.respondQueue.loading': '加载队列中…',
   'accounts.respondQueue.pending': '待处理',
+  'accounts.respondQueue.show': '显示回复队列',
   'accounts.respondQueue.title': '回复队列',
   'accounts.webviewHost.almostReady': '即将就绪...',
   'accounts.webviewHost.loadTimeout': '网页视图加载超时',
diff --git a/app/src/lib/i18n/en.ts b/app/src/lib/i18n/en.ts
index 944554ca2..a2a75ab82 100644
--- a/app/src/lib/i18n/en.ts
+++ b/app/src/lib/i18n/en.ts
@@ -1183,9 +1183,11 @@ const en: TranslationMap = {
   'accounts.addModal.allConnected': 'All connected',
   'accounts.addModal.title': 'Add account',
   'accounts.respondQueue.empty': 'Empty',
+  'accounts.respondQueue.hide': 'Hide respond queue',
   'accounts.respondQueue.loadFailed': 'Failed to load respond queue',
   'accounts.respondQueue.loading': 'Loading queue…',
   'accounts.respondQueue.pending': 'Pending',
+  'accounts.respondQueue.show': 'Show respond queue',
   'accounts.respondQueue.title': 'Respond queue',
   'accounts.webviewHost.almostReady': 'Almost ready...',
   'accounts.webviewHost.loadTimeout': 'Webview load timeout',
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 5b6d986e0..a083193ca 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -12,6 +12,7 @@ import './polyfills';
 import { initGA, initSentry, trackEvent } from './services/analytics';
 import { setStoreForApiClient } from './services/apiClient';
 import { primeActiveUserId } from './store/userScopedStorage';
+import './styles/theme.css';
 import { APP_VERSION } from './utils/config';
 import { setupDesktopDeepLinkListener } from './utils/desktopDeepLinkListener';
 import { getActiveUserIdFromCore } from './utils/tauriCommands';
diff --git a/app/src/pages/Accounts.tsx b/app/src/pages/Accounts.tsx
index 2b7fb3352..125071dd0 100644
--- a/app/src/pages/Accounts.tsx
+++ b/app/src/pages/Accounts.tsx
@@ -70,7 +70,9 @@ const RailButton = ({
     // too, where ring-2 + bg-primary-50 don't transform but the lifted
     // z still helps tooltips render cleanly above neighbours.
     className={`group relative flex h-11 w-11 items-center justify-center rounded-xl transition-all hover:z-50 ${
-      active ? 'bg-primary-50 ring-2 ring-primary-500' : 'hover:bg-stone-100 hover:scale-105'
+      active
+        ? 'bg-primary-50 ring-2 ring-primary-500'
+        : 'hover:bg-stone-100 dark:hover:bg-neutral-800/60 hover:scale-105'
     }`}
     aria-label={tooltip}>
     {children}
@@ -117,6 +119,10 @@ const Accounts = () => {
 
   const [addOpen, setAddOpen] = useState(false);
   const [ctxMenu, setCtxMenu] = useState<ContextMenuState | null>(null);
+  // Respond Queue is a power-user surface (pending replies from connected
+  // accounts). Hidden by default so the agent chat gets full width; users
+  // can toggle it open from the header. (#XXXX)
+  const [respondQueueOpen, setRespondQueueOpen] = useState(false);
 
   useEffect(() => {
     startWebviewAccountService();
@@ -242,7 +248,7 @@ const Accounts = () => {
     <div className="relative flex h-full gap-3 overflow-hidden">
       {/* Narrow icon rail — always rendered. */}
       {/* [#1123] welcomeLocked guard removed — welcome-agent onboarding replaced by Joyride walkthrough */}
-      <aside className="z-30 flex w-16 flex-none flex-col items-center gap-2 bg-white/60 py-3 backdrop-blur-md my-3 ml-3 rounded-2xl border border-stone-200/70 shadow-soft">
+      <aside className="z-30 flex w-16 flex-none flex-col items-center gap-2 bg-white/60 dark:bg-neutral-900/60 py-3 backdrop-blur-md my-3 ml-3 rounded-2xl border border-stone-200/70 dark:border-neutral-800/70 shadow-soft">
         <RailButton active={isAgentSelected} onClick={selectAgent} tooltip={t('accounts.agent')}>
           <AgentIcon className="h-9 w-9 rounded-lg" />
         </RailButton>
@@ -261,7 +267,7 @@ const Accounts = () => {
 
         <button
           onClick={() => setAddOpen(true)}
-          className="group relative mt-2 flex h-11 w-11 items-center justify-center rounded-xl border border-dashed border-stone-300 text-stone-400 hover:z-50 hover:bg-stone-50 hover:text-stone-600"
+          className="group relative mt-2 flex h-11 w-11 items-center justify-center rounded-xl border border-dashed border-stone-300 dark:border-neutral-700 text-stone-400 dark:text-neutral-500 hover:z-50 hover:bg-stone-50 dark:hover:bg-neutral-800/60 hover:text-stone-600 dark:hover:text-neutral-300"
           aria-label={t('accounts.addAccount')}>
           <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -278,26 +284,53 @@ const Accounts = () => {
       <main className="flex min-w-0 flex-1 flex-col">
         {isAgentSelected ? (
           <div className="flex h-full min-w-0">
-            <div className="min-w-0 flex-1">
+            <div className="relative min-w-0 flex-1">
               <AgentChatPanel />
+              {/* Floating toggle to reveal the Respond Queue side panel.
+                  Pinned top-right inside the chat pane so it doesn't shift
+                  layout when the panel opens/closes. */}
+              <button
+                type="button"
+                onClick={() => setRespondQueueOpen(prev => !prev)}
+                className="absolute right-4 top-4 z-10 inline-flex items-center gap-1 rounded-full border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1 text-[11px] font-medium text-stone-600 dark:text-neutral-300 shadow-soft hover:bg-stone-50 dark:hover:bg-neutral-800/60"
+                title={
+                  respondQueueOpen
+                    ? t('accounts.respondQueue.hide')
+                    : t('accounts.respondQueue.show')
+                }>
+                <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                  />
+                </svg>
+                <span>
+                  {t('accounts.respondQueue.title')}
+                  {respondQueueCount > 0 && ` (${respondQueueCount})`}
+                </span>
+              </button>
             </div>
-            {/* Respond queue side panel restored */}
-            <RespondQueuePanel
-              items={respondQueue}
-              count={respondQueueCount}
-              status={respondQueueStatus}
-              error={respondQueueError}
-              onRefresh={() => {
-                void dispatch(fetchRespondQueue());
-              }}
-            />
+            {/* Respond queue side panel — hidden by default; reveals via toggle */}
+            {respondQueueOpen && (
+              <RespondQueuePanel
+                items={respondQueue}
+                count={respondQueueCount}
+                status={respondQueueStatus}
+                error={respondQueueError}
+                onRefresh={() => {
+                  void dispatch(fetchRespondQueue());
+                }}
+              />
+            )}
           </div>
         ) : active ? (
           <div className="flex-1 py-3 pr-3">
             <WebviewHost accountId={active.id} provider={active.provider} />
           </div>
         ) : (
-          <div className="flex flex-1 items-center justify-center text-sm text-stone-400">
+          <div className="flex flex-1 items-center justify-center text-sm text-stone-400 dark:text-neutral-500">
             {t('accounts.noAccounts')}
           </div>
         )}
@@ -312,12 +345,12 @@ const Accounts = () => {
 
       {ctxMenu && (
         <div
-          className="fixed z-50 min-w-[140px] rounded-lg border border-stone-200 bg-white py-1 shadow-strong"
+          className="fixed z-50 min-w-[140px] rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-1 shadow-strong"
           style={{ left: ctxMenu.x, top: ctxMenu.y }}
           onMouseDown={e => e.stopPropagation()}>
           <button
             onClick={() => void handleLogout(ctxMenu.accountId)}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-coral-600 hover:bg-stone-100">
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-coral-600 hover:bg-stone-100 dark:hover:bg-neutral-800/60">
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
diff --git a/app/src/pages/Channels.tsx b/app/src/pages/Channels.tsx
index f9f936448..dad37d068 100644
--- a/app/src/pages/Channels.tsx
+++ b/app/src/pages/Channels.tsx
@@ -15,13 +15,13 @@ const Channels = () => {
     <div className="flex flex-col h-full overflow-hidden">
       <div className="flex-1 overflow-y-auto p-6 space-y-6">
         {error && (
-          <div className="rounded-lg border border-coral-200 bg-coral-50 px-4 py-3 text-sm text-coral-700">
+          <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-4 py-3 text-sm text-coral-700 dark:text-coral-300">
             {error}
           </div>
         )}
 
         {loading ? (
-          <div className="rounded-xl border border-stone-200 bg-white p-6 text-sm text-stone-400">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 text-sm text-stone-400 dark:text-neutral-500">
             {t('common.loading')}
           </div>
         ) : (
diff --git a/app/src/pages/Conversations.tsx b/app/src/pages/Conversations.tsx
index 278e0a5c2..02ded997c 100644
--- a/app/src/pages/Conversations.tsx
+++ b/app/src/pages/Conversations.tsx
@@ -194,7 +194,7 @@ function formatAgentProfileAgentLabel(agentId: string): string {
 //   }, [text.length, visibleChars]);
 //
 //   return (
-//     <p className="flex items-center text-sm text-stone-600 font-mono tracking-tight">
+//     <p className="flex items-center text-sm text-stone-600 dark:text-neutral-300 font-mono tracking-tight">
 //       <span>{text.slice(0, visibleChars)}</span>
 //       <span
 //         aria-hidden="true"
@@ -1220,13 +1220,15 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
           During welcome lockdown the sidebar is always open (effectiveShowSidebar
           is clamped to true) so the single onboarding thread is always visible. */}
       {!isSidebar && effectiveShowSidebar && (
-        <div className="w-64 flex-shrink-0 flex flex-col bg-white rounded-2xl shadow-soft border border-stone-200 overflow-hidden">
-          <div className="flex items-center justify-between px-4 py-3 border-b border-stone-100">
-            <h2 className="text-sm font-semibold text-stone-700">{t('chat.threads')}</h2>
+        <div className="w-64 flex-shrink-0 flex flex-col bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-stone-100 dark:border-neutral-800">
+            <h2 className="text-sm font-semibold text-stone-700 dark:text-neutral-200">
+              {t('chat.threads')}
+            </h2>
             {/* [#1123] welcomeLocked guard removed — always show new thread button */}
             <button
               onClick={() => void handleCreateNewThread()}
-              className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-stone-100 text-stone-500 hover:text-stone-700 transition-colors"
+              className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors"
               title={t('chat.newThread')}>
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -1239,7 +1241,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
             </button>
           </div>
           {/* [#1123] welcomeLocked guard removed — always show label filter */}
-          <div className="px-4 py-2 border-b border-stone-50">
+          <div className="px-4 py-2 border-b border-stone-50 dark:border-neutral-800">
             <PillTabBar
               items={labelTabs}
               selected={selectedLabel}
@@ -1249,7 +1251,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
           </div>
           <div className="flex-1 overflow-y-auto">
             {sortedThreads.length === 0 ? (
-              <p className="px-4 py-6 text-xs text-stone-400 text-center">
+              <p className="px-4 py-6 text-xs text-stone-400 dark:text-neutral-500 text-center">
                 {selectedLabel === 'all'
                   ? t('chat.noThreads')
                   : selectedLabel === WORKERS_TAB_VALUE
@@ -1274,17 +1276,17 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                       void dispatch(loadThreadMessages(thread.id));
                     }
                   }}
-                  className={`w-full text-left px-4 py-3 border-b border-stone-50 transition-colors group cursor-pointer ${
+                  className={`w-full text-left px-4 py-3 border-b border-stone-50 dark:border-neutral-800 transition-colors group cursor-pointer ${
                     selectedThreadId === thread.id
                       ? 'bg-primary-50 border-l-2 border-l-primary-500'
-                      : 'hover:bg-stone-50'
+                      : 'hover:bg-stone-50 dark:hover:bg-neutral-800/60'
                   }`}>
                   <div className="flex items-center justify-between">
                     <p
                       className={`text-sm truncate flex-1 ${
                         selectedThreadId === thread.id
                           ? 'font-medium text-primary-700'
-                          : 'text-stone-700'
+                          : 'text-stone-700 dark:text-neutral-200'
                       }`}>
                       {resolveThreadDisplayTitle(thread.id)}
                     </p>
@@ -1308,7 +1310,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                           onCancel: () => {},
                         });
                       }}
-                      className="ml-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-stone-200 text-stone-400 hover:text-coral-500 transition-all flex-shrink-0"
+                      className="ml-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-stone-200 dark:bg-neutral-800 dark:hover:bg-neutral-800 text-stone-400 dark:text-neutral-500 hover:text-coral-500 transition-all flex-shrink-0"
                       title={t('chat.deleteThread')}>
                       <svg
                         className="w-3 h-3"
@@ -1325,11 +1327,11 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                     </button>
                   </div>
                   {/* <div className="flex items-center gap-2 mt-0.5">
-                    <span className="text-[10px] text-stone-400">
+                    <span className="text-[10px] text-stone-400 dark:text-neutral-500">
                       {formatRelativeTime(thread.lastMessageAt)}
                     </span>
                     {thread.messageCount > 0 && (
-                      <span className="text-[10px] text-stone-400">
+                      <span className="text-[10px] text-stone-400 dark:text-neutral-500">
                         {thread.messageCount} msg{thread.messageCount !== 1 ? 's' : ''}
                       </span>
                     )}
@@ -1345,8 +1347,8 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
       <div
         className={
           isSidebar
-            ? 'flex-1 flex flex-col min-w-0 bg-white border-l border-stone-200 overflow-hidden'
-            : 'flex-1 flex flex-col min-w-0 max-w-2xl bg-white rounded-2xl shadow-soft border border-stone-200 overflow-hidden'
+            ? 'flex-1 flex flex-col min-w-0 bg-white dark:bg-neutral-900 border-l border-stone-200 dark:border-neutral-800 overflow-hidden'
+            : 'flex-1 flex flex-col min-w-0 max-w-2xl bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 overflow-hidden'
         }>
         {/* Chat header — only shown in page mode; the sidebar embed uses the
             parent page's chrome instead. Hidden entirely during welcome
@@ -1354,11 +1356,11 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
             with no chrome around it. */}
         {!isSidebar && (
           <div
-            className="flex items-center gap-2 px-4 py-2.5 border-b border-stone-100"
+            className="flex items-center gap-2 px-4 py-2.5 border-b border-stone-100 dark:border-neutral-800"
             data-walkthrough="chat-agent-panel">
             <button
               onClick={() => setShowSidebar(prev => !prev)}
-              className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-stone-100 text-stone-500 hover:text-stone-700 transition-colors"
+              className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors"
               title={effectiveShowSidebar ? t('chat.hideSidebar') : t('chat.showSidebar')}>
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -1385,7 +1387,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   </span>
                 </button>
               ) : null}
-              <h3 className="text-sm font-medium text-stone-700 truncate">
+              <h3 className="text-sm font-medium text-stone-700 dark:text-neutral-200 truncate">
                 {resolveThreadDisplayTitle(selectedThreadId)}
               </h3>
             </div>
@@ -1396,7 +1398,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   aria-label="Agent profile"
                   value={selectedAgentProfileId}
                   onChange={event => void handleSelectAgentProfile(event.target.value)}
-                  className="h-7 max-w-[120px] rounded-lg border border-stone-200 bg-white px-2 text-xs text-stone-700 outline-none transition-colors focus:border-primary-400">
+                  className="h-7 max-w-[120px] rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 text-xs text-stone-700 dark:text-neutral-200 outline-none transition-colors focus:border-primary-400">
                   {agentProfiles.map(profile => (
                     <option key={profile.id} value={profile.id}>
                       {profile.name}
@@ -1406,7 +1408,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                 <button
                   type="button"
                   onClick={() => setProfileDraftOpen(prev => !prev)}
-                  className="h-7 w-7 rounded-lg text-xs font-medium text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-700"
+                  className="h-7 w-7 rounded-lg text-xs font-medium text-stone-500 dark:text-neutral-400 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200"
                   title="Create agent profile"
                   aria-label="Create agent profile">
                   +
@@ -1423,20 +1425,20 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
           </div>
         )}
         {!isSidebar && profileDraftOpen && (
-          <div className="border-b border-stone-100 bg-white px-4 py-3">
+          <div className="border-b border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3">
             <div className="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_140px]">
               <input
                 value={profileDraft.name}
                 onChange={event => setProfileDraft(prev => ({ ...prev, name: event.target.value }))}
                 placeholder="Profile name"
-                className="h-8 rounded-lg border border-stone-200 px-3 text-xs outline-none focus:border-primary-400"
+                className="h-8 rounded-lg border border-stone-200 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 px-3 text-xs outline-none focus:border-primary-400"
               />
               <select
                 value={profileDraft.agentId}
                 onChange={event =>
                   setProfileDraft(prev => ({ ...prev, agentId: event.target.value }))
                 }
-                className="h-8 rounded-lg border border-stone-200 px-2 text-xs outline-none focus:border-primary-400">
+                className="h-8 rounded-lg border border-stone-200 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 px-2 text-xs outline-none focus:border-primary-400">
                 {agentProfileAgentOptions.map(agent => (
                   <option key={agent.id} value={agent.id}>
                     {agent.label}
@@ -1451,7 +1453,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
               }
               placeholder="Prompt style"
               rows={2}
-              className="mt-2 w-full resize-none rounded-lg border border-stone-200 px-3 py-2 text-xs outline-none focus:border-primary-400"
+              className="mt-2 w-full resize-none rounded-lg border border-stone-200 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 px-3 py-2 text-xs outline-none focus:border-primary-400"
             />
             <div className="mt-2 flex items-center gap-2">
               <input
@@ -1460,7 +1462,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   setProfileDraft(prev => ({ ...prev, allowedTools: event.target.value }))
                 }
                 placeholder="Allowed tools"
-                className="h-8 min-w-0 flex-1 rounded-lg border border-stone-200 px-3 text-xs outline-none focus:border-primary-400"
+                className="h-8 min-w-0 flex-1 rounded-lg border border-stone-200 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 px-3 text-xs outline-none focus:border-primary-400"
               />
               <button
                 type="button"
@@ -1475,19 +1477,21 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   setProfileDraft(DEFAULT_PROFILE_DRAFT);
                   setProfileDraftOpen(false);
                 }}
-                className="h-8 rounded-lg border border-stone-200 px-3 text-xs font-medium text-stone-600 transition-colors hover:bg-stone-50">
+                className="h-8 rounded-lg border border-stone-200 dark:border-neutral-800 px-3 text-xs font-medium text-stone-600 dark:text-neutral-300 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60">
                 Cancel
               </button>
             </div>
           </div>
         )}
-        <div ref={messagesContainerRef} className="flex-1 overflow-y-auto px-5 py-4 bg-[#f6f6f6]">
+        <div
+          ref={messagesContainerRef}
+          className="flex-1 overflow-y-auto px-5 py-4 bg-[#f6f6f6] dark:bg-neutral-950">
           {isLoadingMessages ? (
             <div className="space-y-4">
               {Array.from({ length: 4 }).map((_, i) => (
                 <div key={i} className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
                   <div
-                    className={`h-12 rounded-2xl animate-pulse bg-stone-100 ${
+                    className={`h-12 rounded-2xl animate-pulse bg-stone-100 dark:bg-neutral-800 ${
                       i % 2 === 0 ? 'w-2/3' : 'w-1/2'
                     }`}
                   />
@@ -1508,8 +1512,12 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                 />
               </svg>
-              <p className="text-sm text-stone-400 mb-1">{t('chat.failedToLoadMessages')}</p>
-              <p className="text-xs text-stone-600 mb-3 text-center">{messagesError}</p>
+              <p className="text-sm text-stone-400 dark:text-neutral-500 mb-1">
+                {t('chat.failedToLoadMessages')}
+              </p>
+              <p className="text-xs text-stone-600 dark:text-neutral-300 mb-3 text-center">
+                {messagesError}
+              </p>
               <button
                 onClick={() => window.location.reload()}
                 className="text-xs text-primary-400 hover:text-primary-300 transition-colors">
@@ -1574,7 +1582,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                             return <CitationChips citations={citations} />;
                           })()}
                           {latestVisibleMessage?.id === msg.id && (
-                            <p className="px-1 text-[10px] text-stone-400">
+                            <p className="px-1 text-[10px] text-stone-400 dark:text-neutral-500">
                               {formatRelativeTime(msg.createdAt)}
                             </p>
                           )}
@@ -1591,7 +1599,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                       )}
                       <button
                         onClick={() => handleCopyMessage(msg.id, msg.content)}
-                        className={`absolute -top-1 ${msg.sender === 'user' ? '-left-8' : '-right-8'} p-1 rounded-md opacity-0 group-hover/msg:opacity-100 hover:bg-stone-100 text-stone-400 hover:text-stone-600 transition-all`}
+                        className={`absolute -top-1 ${msg.sender === 'user' ? '-left-8' : '-right-8'} p-1 rounded-md opacity-0 group-hover/msg:opacity-100 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-all`}
                         title={t('chat.copyResponse')}>
                         {copiedMessageId === msg.id ? (
                           <svg
@@ -1650,7 +1658,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                             ))}
                             {msg.sender === 'agent' &&
                               (reactionPickerMsgId === msg.id ? (
-                                <div className="flex items-center gap-0.5 px-1 py-0.5 rounded-full bg-stone-100">
+                                <div className="flex items-center gap-0.5 px-1 py-0.5 rounded-full bg-stone-100 dark:bg-neutral-800">
                                   {['👍', '❤️', '😂', '🔥', '👀', '🎯'].map(emoji => (
                                     <button
                                       key={emoji}
@@ -1673,14 +1681,14 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                                   ))}
                                   <button
                                     onClick={() => setReactionPickerMsgId(null)}
-                                    className="ml-0.5 text-stone-600 hover:text-stone-400 text-xs px-0.5">
+                                    className="ml-0.5 text-stone-600 dark:text-neutral-300 hover:text-stone-400 dark:hover:text-neutral-500 text-xs px-0.5">
                                     ✕
                                   </button>
                                 </div>
                               ) : (
                                 <button
                                   onClick={() => setReactionPickerMsgId(msg.id)}
-                                  className="opacity-0 group-hover/msg:opacity-100 flex items-center px-1.5 py-0.5 rounded-full bg-stone-50 hover:bg-stone-200 text-stone-500 hover:text-stone-300 text-xs transition-all"
+                                  className="opacity-0 group-hover/msg:opacity-100 flex items-center px-1.5 py-0.5 rounded-full bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-200 dark:bg-neutral-800 dark:hover:bg-neutral-800 text-stone-500 dark:text-neutral-400 hover:text-stone-300 dark:hover:text-neutral-600 text-xs transition-all"
                                   title="Add reaction">
                                   +
                                 </button>
@@ -1702,11 +1710,11 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   (selectedStreamingAssistant?.thinking.length ?? 0) > 0
                 ) && (
                   <div className="flex justify-start">
-                    <div className="bg-stone-200/80 rounded-2xl rounded-bl-md px-4 py-3">
+                    <div className="bg-stone-200/80 dark:bg-neutral-800 rounded-2xl rounded-bl-md px-4 py-3">
                       <div className="flex items-center gap-1">
-                        <span className="w-1.5 h-1.5 rounded-full bg-stone-500 animate-bounce [animation-delay:0ms]" />
-                        <span className="w-1.5 h-1.5 rounded-full bg-stone-500 animate-bounce [animation-delay:150ms]" />
-                        <span className="w-1.5 h-1.5 rounded-full bg-stone-500 animate-bounce [animation-delay:300ms]" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:0ms]" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:150ms]" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:300ms]" />
                       </div>
                     </div>
                   </div>
@@ -1721,21 +1729,23 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   <div className="flex justify-start">
                     <div className="relative w-fit max-w-[75%]">
                       {selectedStreamingAssistant.thinking.length > 0 && (
-                        <details className="mb-1.5 bg-stone-100 rounded-lg px-3 py-1.5 text-xs text-stone-600 open:bg-stone-100">
+                        <details className="mb-1.5 bg-stone-100 dark:bg-neutral-800 rounded-lg px-3 py-1.5 text-xs text-stone-600 dark:text-neutral-300 open:bg-stone-100 dark:bg-neutral-800 dark:open:bg-neutral-800">
                           <summary className="cursor-pointer select-none flex items-center gap-1.5">
                             <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse" />
                             <span>{t('chat.thinking')}</span>
                           </summary>
-                          <pre className="whitespace-pre-wrap break-words mt-1.5 font-sans text-[11px] text-stone-500">
+                          <pre className="whitespace-pre-wrap break-words mt-1.5 font-sans text-[11px] text-stone-500 dark:text-neutral-400">
                             {selectedStreamingAssistant.thinking.slice(-STREAMING_PREVIEW_CHARS)}
                           </pre>
                         </details>
                       )}
                       {selectedStreamingAssistant.content.length > 0 && (
-                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-stone-200/80 text-stone-900">
-                          <p className="text-xs text-stone-700 font-mono whitespace-pre-wrap break-words leading-snug">
+                        <div className="rounded-2xl rounded-bl-md px-3 py-1.5 bg-stone-200/80 dark:bg-neutral-800 text-stone-900 dark:text-neutral-100">
+                          <p className="text-xs text-stone-700 dark:text-neutral-200 font-mono whitespace-pre-wrap break-words leading-snug">
                             {selectedStreamingAssistant.content.length >
-                              STREAMING_PREVIEW_CHARS && <span className="text-stone-400">…</span>}
+                              STREAMING_PREVIEW_CHARS && (
+                              <span className="text-stone-400 dark:text-neutral-500">…</span>
+                            )}
                             {selectedStreamingAssistant.content.slice(-STREAMING_PREVIEW_CHARS)}
                             <span className="inline-block w-1 h-3 ml-0.5 align-middle bg-primary-400 animate-pulse" />
                           </p>
@@ -1746,7 +1756,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                 )}
               {/* Inference status indicator */}
               {selectedInferenceStatus && (
-                <div className="flex items-center gap-2 px-1 py-1.5 text-xs text-stone-500">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-xs text-stone-500 dark:text-neutral-400">
                   <span className="inline-block w-2 h-2 rounded-full bg-primary-400 animate-pulse" />
                   <span>
                     {selectedInferenceStatus.phase === 'thinking' &&
@@ -1792,7 +1802,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                     onClick={() => {
                       if (selectedThreadId) void chatCancel(selectedThreadId);
                     }}
-                    className="text-xs text-stone-500 hover:text-stone-700 transition-colors">
+                    className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors">
                     {t('common.cancel')}
                   </button>
                 </div>
@@ -1808,19 +1818,19 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
             //   // `hasVisibleMessages` branch above).
             //   <div className="flex-1 flex flex-col items-center justify-center h-full gap-3">
             //     <div className="flex items-center gap-1">
-            //       <span className="w-2 h-2 rounded-full bg-stone-500 animate-bounce [animation-delay:0ms]" />
-            //       <span className="w-2 h-2 rounded-full bg-stone-500 animate-bounce [animation-delay:150ms]" />
-            //       <span className="w-2 h-2 rounded-full bg-stone-500 animate-bounce [animation-delay:300ms]" />
+            //       <span className="w-2 h-2 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:0ms]" />
+            //       <span className="w-2 h-2 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:150ms]" />
+            //       <span className="w-2 h-2 rounded-full bg-stone-50 dark:bg-neutral-800/600 animate-bounce [animation-delay:300ms]" />
             //     </div>
             //     <WelcomeThinkingTypewriter />
             //   </div>
             <div className="flex-1 flex items-center justify-center h-full">
-              <p className="text-sm text-stone-600">{t('chat.noMessages')}</p>
+              <p className="text-sm text-stone-600 dark:text-neutral-300">{t('chat.noMessages')}</p>
             </div>
           )}
         </div>
 
-        <div className="flex-shrink-0 border-t border-stone-200 px-4 py-3">
+        <div className="flex-shrink-0 border-t border-stone-200 dark:border-neutral-800 px-4 py-3">
           {/* [#1123] welcomeLocked and welcomePending guards removed — Joyride walkthrough replaced welcome-agent */}
           <>
             {isNearLimit &&
@@ -1910,7 +1920,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                       />
                     </div>
                   ) : (
-                    <span className="text-[10px] text-stone-400 animate-pulse">
+                    <span className="text-[10px] text-stone-400 dark:text-neutral-500 animate-pulse">
                       {t('common.loading')}
                     </span>
                   )}
@@ -1919,12 +1929,14 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                       <div className="bg-stone-900 text-white text-[10px] rounded-lg px-3 py-2 shadow-lg whitespace-nowrap space-y-1.5">
                         {!teamUsage.bypassCycleLimit && (
                           <div className="flex items-center justify-between gap-4">
-                            <span className="text-stone-400">{t('chat.fiveHourLimit')}</span>
+                            <span className="text-stone-400 dark:text-neutral-500">
+                              {t('chat.fiveHourLimit')}
+                            </span>
                             <span>
                               ${(teamUsage.cycleLimit5hr ?? 0).toFixed(2)} / $
                               {(teamUsage.fiveHourCapUsd ?? 0).toFixed(2)}
                               {teamUsage.fiveHourResetsAt && (
-                                <span className="text-stone-400 ml-1">
+                                <span className="text-stone-400 dark:text-neutral-500 ml-1">
                                   — {t('chat.resets')} {formatResetTime(teamUsage.fiveHourResetsAt)}
                                 </span>
                               )}
@@ -1932,12 +1944,14 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                           </div>
                         )}
                         <div className="flex items-center justify-between gap-4">
-                          <span className="text-stone-400">{t('chat.weeklyLimit')}</span>
+                          <span className="text-stone-400 dark:text-neutral-500">
+                            {t('chat.weeklyLimit')}
+                          </span>
                           <span>
                             ${(teamUsage.remainingUsd ?? 0).toFixed(2)} / $
                             {(teamUsage.cycleBudgetUsd ?? 0).toFixed(2)} {t('chat.left')}
                             {teamUsage.cycleEndsAt && (
-                              <span className="text-stone-400 ml-1">
+                              <span className="text-stone-400 dark:text-neutral-500 ml-1">
                                 — {t('chat.resets')} {formatResetTime(teamUsage.cycleEndsAt)}
                               </span>
                             )}
@@ -1958,7 +1972,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
               </p>
               <button
                 onClick={() => setSendAdvisory(null)}
-                className="text-xs text-stone-500 hover:text-stone-700 transition-colors ml-2">
+                className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors ml-2">
                 {t('common.dismiss')}
               </button>
             </div>
@@ -1988,7 +2002,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                 )}
                 <button
                   onClick={() => setSendError(null)}
-                  className="text-xs text-stone-500 hover:text-stone-700 transition-colors">
+                  className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 transition-colors">
                   {t('common.dismiss')}
                 </button>
               </div>
@@ -2007,12 +2021,14 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
             />
           ) : inputMode === 'text' ? (
             <div className="flex items-end gap-3">
-              <div className="relative flex flex-1 items-center justify-center rounded-xl border border-stone-200 bg-white transition-all focus-within:border-primary-500/50 focus-within:ring-1 focus-within:ring-primary-500/50">
+              <div className="relative flex flex-1 items-center justify-center rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-all focus-within:border-primary-500/50 focus-within:ring-1 focus-within:ring-primary-500/50">
                 <div
                   aria-hidden
                   className="pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words px-4 py-2.5 text-sm leading-normal font-sans">
                   <span className="invisible">{inputValue}</span>
-                  <span className="text-stone-500/50">{inlineCompletionSuffix}</span>
+                  <span className="text-stone-500 dark:text-neutral-400/50">
+                    {inlineCompletionSuffix}
+                  </span>
                 </div>
                 <textarea
                   ref={textInputRef}
@@ -2028,7 +2044,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                   placeholder={t('chat.typeMessage')}
                   rows={1}
                   disabled={composerInteractionBlocked}
-                  className="relative z-10 w-full resize-none border-0 bg-transparent pl-4 pr-10 py-2.5 text-sm leading-normal whitespace-pre-wrap break-words font-sans text-stone-900 placeholder:text-stone-400 outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 max-h-32 disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="relative z-10 w-full resize-none border-0 bg-transparent pl-4 pr-10 py-2.5 text-sm leading-normal whitespace-pre-wrap break-words font-sans text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 max-h-32 disabled:opacity-50 disabled:cursor-not-allowed"
                 />
                 {/* Voice input mic hidden per #717 (inputMode='voice' path retained). */}
               </div>
@@ -2074,7 +2090,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                 type="button"
                 onClick={() => setInputMode('text')}
                 disabled={isRecording || isTranscribing}
-                className="w-10 h-10 flex items-center justify-center rounded-full border border-stone-200 bg-white text-stone-500 hover:text-stone-700 hover:border-stone-300 transition-colors disabled:opacity-40"
+                className="w-10 h-10 flex items-center justify-center rounded-full border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 hover:border-stone-300 dark:hover:border-neutral-700 transition-colors disabled:opacity-40"
                 title={t('chat.switchToText')}>
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -2102,7 +2118,7 @@ const Conversations = ({ variant = 'page', composer = 'text' }: ConversationsPro
                     ? t('chat.stopAndSend')
                     : t('chat.startTalking')}
               </button>
-              <p className="text-xs text-stone-400 truncate">
+              <p className="text-xs text-stone-400 dark:text-neutral-500 truncate">
                 {voiceStatus ??
                   (isPlayingReply && replyMode === 'voice'
                     ? t('chat.playingVoiceReply')
diff --git a/app/src/pages/Home.tsx b/app/src/pages/Home.tsx
index 83d5b3770..3a09b3d76 100644
--- a/app/src/pages/Home.tsx
+++ b/app/src/pages/Home.tsx
@@ -164,14 +164,16 @@ const Home = () => {
         {/* Main card — data-walkthrough target for step 1 */}
         <div
           data-walkthrough="home-card"
-          className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6 animate-fade-up">
+          className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 animate-fade-up">
           {/* Header row: logo + version + settings */}
           <div className="flex items-center justify-center mb-4">
-            <span className="text-xs text-center text-stone-400">v{APP_VERSION}</span>
+            <span className="text-xs text-center text-stone-400 dark:text-neutral-500">
+              v{APP_VERSION}
+            </span>
           </div>
 
           {/* Welcome title */}
-          <h1 className="min-h-[3.5rem] text-32l font-bold text-stone-900 text-center">
+          <h1 className="min-h-[3.5rem] text-32l font-bold text-stone-900 dark:text-neutral-100 text-center">
             {typedWelcome}
             <span aria-hidden="true" className="ml-0.5 inline-block text-primary-500 animate-pulse">
               |
@@ -186,7 +188,9 @@ const Home = () => {
           {/* Description — copy mirrors the active blocking state so the
               user never sees a "connected" message while the pill shows a
               failure. (#1527) */}
-          <p className="text-sm text-stone-500 text-center mb-6 leading-relaxed">{statusCopy}</p>
+          <p className="text-sm text-stone-500 dark:text-neutral-400 text-center mb-6 leading-relaxed">
+            {statusCopy}
+          </p>
 
           {/* Recovery action: only shown when the local core sidecar is
               the broken link — internet/backend outages are not actionable
diff --git a/app/src/pages/Intelligence.tsx b/app/src/pages/Intelligence.tsx
index 0b862a4b1..73ea640cf 100644
--- a/app/src/pages/Intelligence.tsx
+++ b/app/src/pages/Intelligence.tsx
@@ -156,7 +156,7 @@ export default function Intelligence() {
                     className={`rounded-full border px-1.5 py-0.5 text-[10px] ${
                       active
                         ? 'border-white/30 bg-white/15 text-white'
-                        : 'border-stone-200 bg-stone-50 text-stone-500'
+                        : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-500 dark:text-neutral-400'
                     }`}>
                     {t('misc.beta')}
                   </span>
@@ -166,13 +166,13 @@ export default function Intelligence() {
           }}
         />
 
-        <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6">
+        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6">
           <div>
             {/* Header */}
             <div className="flex items-center justify-between mb-6">
               <div className="flex items-center gap-3">
                 <h1
-                  className="text-xl font-bold text-stone-900"
+                  className="text-xl font-bold text-stone-900 dark:text-neutral-100"
                   data-walkthrough="intelligence-header">
                   {t('memory.title')}
                 </h1>
@@ -189,13 +189,15 @@ export default function Intelligence() {
                 {activeTab === 'memory' && (
                   <div className="flex items-center gap-2">
                     <div className={`w-2 h-2 rounded-full ${systemStatusDot}`} />
-                    <span className="text-xs text-stone-400">{systemStatusLabel}</span>
+                    <span className="text-xs text-stone-400 dark:text-neutral-500">
+                      {systemStatusLabel}
+                    </span>
                   </div>
                 )}
                 {activeTab === 'memory' &&
                   (ingestionStatus.running || ingestionStatus.queueDepth > 0) && (
                     <div
-                      className="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-amber-200 bg-amber-50 text-amber-700"
+                      className="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300"
                       title={
                         ingestionStatus.running
                           ? ingestionStatus.currentTitle
diff --git a/app/src/pages/Invites.tsx b/app/src/pages/Invites.tsx
index b75b5fece..b7e3067e9 100644
--- a/app/src/pages/Invites.tsx
+++ b/app/src/pages/Invites.tsx
@@ -160,7 +160,7 @@ const Invites = () => {
           <div className="space-y-4">
             {/* Redeem Section — shown only if user hasn't redeemed yet */}
             {!hasBeenInvited && (
-              <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6 animate-fade-up">
+              <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 animate-fade-up">
                 <h2 className="text-lg font-bold mb-1">{t('rewards.referralCode')}</h2>
                 <p className="text-xs opacity-70 mb-4">{t('rewards.share')}</p>
                 <div className="flex gap-2">
@@ -190,7 +190,7 @@ const Invites = () => {
             )}
 
             {/* Your Invite Codes */}
-            <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6 animate-fade-up">
+            <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6 animate-fade-up">
               <div className="mb-4">
                 <h2 className="text-lg font-bold mb-1">{t('rewards.referralCode')}</h2>
                 <p className="text-xs opacity-70">{t('rewards.share')}</p>
@@ -211,7 +211,9 @@ const Invites = () => {
                   ))}
                 </div>
               ) : (
-                <p className="text-sm text-stone-500 text-center py-6">{t('invites.noInvites')}</p>
+                <p className="text-sm text-stone-500 dark:text-neutral-400 text-center py-6">
+                  {t('invites.noInvites')}
+                </p>
               )}
             </div>
           </div>
diff --git a/app/src/pages/Notifications.tsx b/app/src/pages/Notifications.tsx
index c7826d5ae..4c13285ad 100644
--- a/app/src/pages/Notifications.tsx
+++ b/app/src/pages/Notifications.tsx
@@ -61,7 +61,7 @@ const Notifications = () => {
       {/* Integration notifications — from connected accounts, scored by local AI */}
       <div
         data-testid="integration-notifications-section"
-        className="max-w-2xl mx-auto bg-white rounded-2xl shadow-soft border border-stone-200 overflow-hidden min-h-[200px]">
+        className="max-w-2xl mx-auto bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 overflow-hidden min-h-[200px]">
         <NotificationCenter />
       </div>
 
@@ -69,10 +69,12 @@ const Notifications = () => {
       <div
         data-testid="system-events-section"
         className="max-w-2xl mx-auto bg-white rounded-2xl shadow-soft border border-stone-200 overflow-hidden">
-        <div className="flex items-center justify-between border-b border-stone-100 px-4 py-3">
+        <div className="flex items-center justify-between border-b border-stone-100 dark:border-neutral-800 px-4 py-3">
           <div>
-            <h1 className="text-lg font-semibold text-stone-900">{t('alerts.title')}</h1>
-            <p className="text-xs text-stone-500">
+            <h1 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+              {t('alerts.title')}
+            </h1>
+            <p className="text-xs text-stone-500 dark:text-neutral-400">
               {unread > 0 ? `${unread} ${t('alerts.unread')}` : t('alerts.empty')}
             </p>
           </div>
@@ -81,30 +83,34 @@ const Notifications = () => {
               type="button"
               onClick={() => dispatch(markAllRead())}
               disabled={unread === 0}
-              className="text-xs font-medium text-stone-600 hover:text-stone-900 disabled:opacity-40 disabled:cursor-not-allowed">
+              className="text-xs font-medium text-stone-600 dark:text-neutral-400 hover:text-stone-900 dark:hover:text-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed">
               {t('alerts.markAllRead')}
             </button>
             <button
               type="button"
               onClick={() => dispatch(clearAll())}
               disabled={items.length === 0}
-              className="text-xs font-medium text-stone-600 hover:text-stone-900 disabled:opacity-40 disabled:cursor-not-allowed">
+              className="text-xs font-medium text-stone-600 dark:text-neutral-400 hover:text-stone-900 dark:hover:text-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed">
               {t('common.clear')}
             </button>
           </div>
         </div>
 
         {items.length === 0 ? (
-          <div className="px-6 py-16 text-center text-sm text-stone-500">{t('alerts.empty')}</div>
+          <div className="px-6 py-16 text-center text-sm text-stone-500 dark:text-neutral-400">
+            {t('alerts.empty')}
+          </div>
         ) : (
-          <ul className="divide-y divide-stone-100">
+          <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
             {items.map(item => (
               <li key={item.id} data-testid="notification-item">
                 <button
                   type="button"
                   onClick={() => handleClick(item)}
-                  className={`w-full text-left px-4 py-3 hover:bg-stone-50 transition-colors ${
-                    item.read ? 'bg-white' : 'bg-primary-50/30'
+                  className={`w-full text-left px-4 py-3 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors ${
+                    item.read
+                      ? 'bg-white dark:bg-neutral-900'
+                      : 'bg-primary-50/30 dark:bg-primary-900/20'
                   }`}>
                   <div className="flex items-start justify-between gap-3">
                     <div className="min-w-0 flex-1">
@@ -115,16 +121,18 @@ const Notifications = () => {
                             aria-label={t('alerts.unread')}
                           />
                         )}
-                        <span className="text-xs uppercase tracking-wide text-stone-400">
+                        <span className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                           {categoryLabel(item.category)}
                         </span>
                       </div>
-                      <p className="mt-1 text-sm font-semibold text-stone-900 truncate">
+                      <p className="mt-1 text-sm font-semibold text-stone-900 dark:text-neutral-100 truncate">
                         {item.title}
                       </p>
-                      <p className="mt-0.5 text-sm text-stone-600 line-clamp-2">{item.body}</p>
+                      <p className="mt-0.5 text-sm text-stone-600 dark:text-neutral-300 line-clamp-2">
+                        {item.body}
+                      </p>
                     </div>
-                    <span className="text-[11px] text-stone-400 whitespace-nowrap">
+                    <span className="text-[11px] text-stone-400 dark:text-neutral-500 whitespace-nowrap">
                       {formatTime(item.timestamp, t)}
                     </span>
                   </div>
diff --git a/app/src/pages/Settings.tsx b/app/src/pages/Settings.tsx
index e8c2b02a4..b19cae6e3 100644
--- a/app/src/pages/Settings.tsx
+++ b/app/src/pages/Settings.tsx
@@ -4,6 +4,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import AboutPanel from '../components/settings/panels/AboutPanel';
 import AgentChatPanel from '../components/settings/panels/AgentChatPanel';
 import AIPanel from '../components/settings/panels/AIPanel';
+import AppearancePanel from '../components/settings/panels/AppearancePanel';
 import AutocompleteDebugPanel from '../components/settings/panels/AutocompleteDebugPanel';
 import AutocompletePanel from '../components/settings/panels/AutocompletePanel';
 import BillingPanel from '../components/settings/panels/BillingPanel';
@@ -149,7 +150,7 @@ const VoiceIcon = (
 const WrappedSettingsPage = ({ children }: { children: ReactNode }) => {
   return (
     <div className="p-4 pt-6">
-      <div className="max-w-lg mx-auto bg-white rounded-2xl shadow-soft border border-stone-200 overflow-hidden">
+      <div className="max-w-lg mx-auto bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 overflow-hidden">
         {children}
       </div>
     </div>
@@ -160,7 +161,7 @@ function wrapSettingsPage(element: ReactNode) {
   return (
     <WrappedSettingsPage>
       {element}
-      <div className="border-t border-stone-100 px-4 py-3 text-center text-[11px] text-stone-400">
+      <div className="border-t border-stone-100 dark:border-neutral-800 px-4 py-3 text-center text-[11px] text-stone-400 dark:text-neutral-500">
         Beta build - v{APP_VERSION}
       </div>
     </WrappedSettingsPage>
@@ -309,6 +310,7 @@ const Settings = () => {
         <Route path="messaging" element={wrapSettingsPage(<MessagingPanel />)} />
         <Route path="notifications" element={wrapSettingsPage(<NotificationsPanel />)} />
         <Route path="mascot" element={wrapSettingsPage(<MascotPanel />)} />
+        <Route path="appearance" element={wrapSettingsPage(<AppearancePanel />)} />
         <Route path="tools" element={wrapSettingsPage(<ToolsPanel />)} />
         {/* Developer Options */}
         <Route path="developer-options" element={wrapSettingsPage(<DeveloperOptionsPanel />)} />
diff --git a/app/src/pages/Skills.tsx b/app/src/pages/Skills.tsx
index 106d442ed..db7f1d717 100644
--- a/app/src/pages/Skills.tsx
+++ b/app/src/pages/Skills.tsx
@@ -58,13 +58,13 @@ function channelStatusLabel(status: ChannelConnectionStatus, t: (key: string) =>
 function channelStatusColor(status: ChannelConnectionStatus): string {
   switch (status) {
     case 'connected':
-      return 'text-sage-600';
+      return 'text-sage-600 dark:text-sage-300';
     case 'connecting':
-      return 'text-amber-600';
+      return 'text-amber-600 dark:text-amber-300';
     case 'error':
-      return 'text-coral-600';
+      return 'text-coral-600 dark:text-coral-300';
     default:
-      return 'text-stone-400';
+      return 'text-stone-400 dark:text-neutral-500';
   }
 }
 
@@ -93,15 +93,15 @@ function composioStatusLabel(
 function composioStatusColor(connection: ComposioConnection | undefined): string {
   switch (deriveComposioState(connection)) {
     case 'connected':
-      return 'text-sage-600';
+      return 'text-sage-600 dark:text-sage-300';
     case 'pending':
-      return 'text-amber-600';
+      return 'text-amber-600 dark:text-amber-300';
     case 'expired':
-      return 'text-coral-600';
+      return 'text-coral-600 dark:text-coral-300';
     case 'error':
-      return 'text-coral-600';
+      return 'text-coral-600 dark:text-coral-300';
     default:
-      return 'text-stone-400';
+      return 'text-stone-400 dark:text-neutral-500';
   }
 }
 
@@ -174,23 +174,25 @@ function ComposioConnectorTile({
       aria-label={`${meta.name}, ${statusLabel}. ${ctaLabel}.`}
       className={`group flex flex-col justify-center items-center rounded-2xl border p-3 text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 ${
         isConnected
-          ? 'border-sage-300 bg-sage-50/80 shadow-[0_0_0_1px_rgba(34,197,94,0.12)] hover:bg-sage-50'
+          ? 'border-sage-300 bg-sage-50/80 shadow-[0_0_0_1px_rgba(34,197,94,0.12)] hover:bg-sage-50 dark:border-sage-500/30 dark:bg-sage-500/10 dark:hover:bg-sage-500/15'
           : isPending
-            ? 'border-amber-200 bg-amber-50/40 hover:bg-amber-50/70'
+            ? 'border-amber-200 bg-amber-50/40 hover:bg-amber-50/70 dark:border-amber-500/30 dark:bg-amber-500/10 dark:hover:bg-amber-500/15'
             : isExpired || isError
-              ? 'border-coral-200 bg-coral-50/30 hover:bg-coral-50/50'
-              : 'border-stone-200 bg-white hover:bg-stone-50'
+              ? 'border-coral-200 bg-coral-50/30 hover:bg-coral-50/50 dark:border-coral-500/30 dark:bg-coral-500/10 dark:hover:bg-coral-500/15'
+              : 'border-stone-200 bg-white hover:bg-stone-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800/60'
       }`}>
-      <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center text-stone-700 [&_img]:max-h-10 [&_img]:max-w-10 [&_svg]:h-8 [&_svg]:w-8">
+      <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center text-stone-700 dark:text-neutral-200 [&_img]:max-h-10 [&_img]:max-w-10 [&_svg]:h-8 [&_svg]:w-8">
         {meta.icon}
       </div>
       <div className="flex w-full min-w-0 flex-col items-center justify-start gap-0.5">
-        <span className="line-clamp-2 text-[11px] font-semibold leading-tight text-stone-900">
+        <span className="line-clamp-2 text-[11px] font-semibold leading-tight text-stone-900 dark:text-neutral-100">
           {meta.name}
         </span>
         <span
           className={`line-clamp-1 text-[10px] font-medium ${
-            hasComposioError ? 'text-amber-700' : composioStatusColor(connection)
+            hasComposioError
+              ? 'text-amber-700 dark:text-amber-300'
+              : composioStatusColor(connection)
           }`}>
           {statusLabel}
         </span>
@@ -222,18 +224,18 @@ function ChannelTile({ def, status, icon, onOpen }: ChannelTileProps) {
       aria-label={`${def.display_name}, ${statusLabel}. ${ctaLabel}.`}
       className={`group flex flex-col items-center gap-2 rounded-2xl border p-3 pb-3 text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 ${
         isConnected
-          ? 'border-sage-300 bg-sage-50/80 shadow-[0_0_0_1px_rgba(34,197,94,0.12)] hover:bg-sage-50'
+          ? 'border-sage-300 bg-sage-50/80 shadow-[0_0_0_1px_rgba(34,197,94,0.12)] hover:bg-sage-50 dark:border-sage-500/30 dark:bg-sage-500/10 dark:hover:bg-sage-500/15'
           : isPending
-            ? 'border-amber-200 bg-amber-50/40 hover:bg-amber-50/70'
+            ? 'border-amber-200 bg-amber-50/40 hover:bg-amber-50/70 dark:border-amber-500/30 dark:bg-amber-500/10 dark:hover:bg-amber-500/15'
             : isError
-              ? 'border-coral-200 bg-coral-50/30 hover:bg-coral-50/50'
-              : 'border-stone-200 bg-white hover:bg-stone-50'
+              ? 'border-coral-200 bg-coral-50/30 hover:bg-coral-50/50 dark:border-coral-500/30 dark:bg-coral-500/10 dark:hover:bg-coral-500/15'
+              : 'border-stone-200 bg-white hover:bg-stone-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800/60'
       }`}>
-      <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center text-stone-700 [&>span]:h-12 [&>span]:w-12 [&>span]:rounded-2xl [&_svg]:h-7 [&_svg]:w-7">
+      <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center text-stone-700 dark:text-neutral-200 [&>span]:h-12 [&>span]:w-12 [&>span]:rounded-2xl [&_svg]:h-7 [&_svg]:w-7">
         {icon}
       </div>
       <div className="flex min-h-[2.5rem] w-full min-w-0 flex-col items-center justify-start gap-0.5">
-        <span className="line-clamp-2 text-[11px] font-semibold leading-tight text-stone-900">
+        <span className="line-clamp-2 text-[11px] font-semibold leading-tight text-stone-900 dark:text-neutral-100">
           {def.display_name}
         </span>
         <span className={`line-clamp-1 text-[10px] font-medium ${channelStatusColor(status)}`}>
@@ -573,10 +575,10 @@ export default function Skills() {
   const renderGroup = ({ category, items }: { category: SkillCategory; items: SkillItem[] }) => (
     <div
       key={category}
-      className="rounded-2xl border border-stone-200 bg-white p-3 shadow-soft animate-fade-up">
+      className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up">
       <div className="px-1 pb-3 pt-1">
-        <h2 className="flex items-center gap-2 text-sm font-semibold text-stone-900">
-          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-stone-100">
+        <h2 className="flex items-center gap-2 text-sm font-semibold text-stone-900 dark:text-neutral-100">
+          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-stone-100 dark:bg-neutral-800">
             <SkillCategoryIcon
               category={category}
               className={skillCategoryHeadingClassName(category)}
@@ -692,12 +694,12 @@ export default function Skills() {
                   ? t('scope.project')
                   : t('scope.legacy');
             const scopeColor = skill.legacy
-              ? 'text-stone-600'
+              ? 'text-stone-600 dark:text-neutral-300'
               : skill.scope === 'user'
                 ? 'text-sage-600'
                 : skill.scope === 'project'
                   ? 'text-amber-600'
-                  : 'text-stone-600';
+                  : 'text-stone-600 dark:text-neutral-300';
             const canUninstall = skill.scope === 'user' && !skill.legacy;
             return (
               <UnifiedSkillCard
@@ -757,8 +759,10 @@ export default function Skills() {
           <div className="w-full max-w-3xl space-y-4">
             {/* <div className="flex items-center justify-between gap-2">
               <div className="min-w-0">
-                <h1 className="text-base font-semibold text-stone-900">Skills</h1>
-                <p className="text-xs text-stone-500">
+                <h1 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+                  Skills
+                </h1>
+                <p className="text-xs text-stone-500 dark:text-neutral-400">
                   Scaffold a new <code className="font-mono">SKILL.md</code> or install a published
                   package.
                 </p>
@@ -767,7 +771,7 @@ export default function Skills() {
                 <button
                   type="button"
                   onClick={() => setInstallDialogOpen(true)}
-                  className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-xs font-medium text-stone-700 shadow-soft transition-colors hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
+                  className="rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-xs font-medium text-stone-700 dark:text-neutral-200 shadow-soft transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
                   Install from URL
                 </button>
                 <button
@@ -791,7 +795,7 @@ export default function Skills() {
                   <button
                     type="button"
                     onClick={() => void refreshComposio()}
-                    className="flex-shrink-0 rounded-lg border border-amber-300 bg-white px-3 py-1.5 text-[11px] font-medium text-amber-800 transition-colors hover:bg-amber-100">
+                    className="flex-shrink-0 rounded-lg border border-amber-300 dark:border-amber-500/40 bg-white dark:bg-neutral-900 px-3 py-1.5 text-[11px] font-medium text-amber-800 dark:text-amber-300 transition-colors hover:bg-amber-100 dark:hover:bg-amber-500/10">
                     Retry
                   </button>
                 </div>
@@ -801,12 +805,12 @@ export default function Skills() {
             {
               <>
                 {channelsGroup && (
-                  <div className="rounded-2xl border border-stone-200 bg-white p-3 shadow-soft animate-fade-up">
+                  <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up">
                     <div className="px-1 pb-3 pt-1">
                       <h2
-                        className="flex items-center gap-2 text-sm font-semibold text-stone-900"
+                        className="flex items-center gap-2 text-sm font-semibold text-stone-900 dark:text-neutral-100"
                         data-walkthrough="skills-channels">
-                        <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-stone-100">
+                        <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-stone-100 dark:bg-neutral-800">
                           <SkillCategoryIcon
                             category="Channels"
                             className={skillCategoryHeadingClassName('Channels')}
@@ -814,7 +818,7 @@ export default function Skills() {
                         </span>
                         {t('skills.channels')}
                       </h2>
-                      <p className="mt-0.5 text-[11px] leading-relaxed text-stone-500">
+                      <p className="mt-0.5 text-[11px] leading-relaxed text-stone-500 dark:text-neutral-400">
                         {t('channels.defaultMessaging')}
                       </p>
                     </div>
@@ -836,14 +840,14 @@ export default function Skills() {
 
                 <MeetingBotsCard onToast={addToast} />
 
-                <div className="rounded-2xl border border-stone-200 bg-white p-3 shadow-soft animate-fade-up">
+                <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 shadow-soft animate-fade-up">
                   <div className="px-1 pb-3 pt-1">
                     <h2
-                      className="text-sm font-semibold text-stone-900"
+                      className="text-sm font-semibold text-stone-900 dark:text-neutral-100"
                       data-walkthrough="skills-grid">
                       {t('skills.integrations')}
                     </h2>
-                    <p className="mt-0.5 text-[11px] leading-relaxed text-stone-500">
+                    <p className="mt-0.5 text-[11px] leading-relaxed text-stone-500 dark:text-neutral-400">
                       {t('skills.available')}
                     </p>
                   </div>
@@ -871,7 +875,7 @@ export default function Skills() {
                       ))}
                     </div>
                   ) : (
-                    <p className="px-1 py-4 text-center text-xs text-stone-400">
+                    <p className="px-1 py-4 text-center text-xs text-stone-400 dark:text-neutral-500">
                       {t('skills.noResults')}
                     </p>
                   )}
diff --git a/app/src/pages/Webhooks.tsx b/app/src/pages/Webhooks.tsx
index 8abf3a9be..46ac085bb 100644
--- a/app/src/pages/Webhooks.tsx
+++ b/app/src/pages/Webhooks.tsx
@@ -11,8 +11,10 @@ export default function Webhooks() {
     return (
       <div className="h-full flex items-center justify-center p-4 pt-6">
         <div className="flex flex-col items-center gap-3">
-          <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 border-t-primary-500" />
-          <span className="text-sm text-stone-500">{t('common.loading')}</span>
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-primary-500" />
+          <span className="text-sm text-stone-500 dark:text-neutral-400">
+            {t('common.loading')}
+          </span>
         </div>
       </div>
     );
@@ -23,14 +25,18 @@ export default function Webhooks() {
       <div className="max-w-2xl mx-auto space-y-4">
         {/* Connection status */}
         <div className="flex flex-wrap items-center gap-3">
-          <h2 className="text-xl font-semibold text-stone-900">{t('skills.integrations')}</h2>
+          <h2 className="text-xl font-semibold text-stone-900 dark:text-neutral-100">
+            {t('skills.integrations')}
+          </h2>
           <span
             className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full ${
-              coreConnected ? 'bg-sage-100 text-sage-700' : 'bg-stone-100 text-stone-500'
+              coreConnected
+                ? 'bg-sage-100 text-sage-700'
+                : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400'
             }`}>
             <span
               className={`w-1.5 h-1.5 rounded-full ${
-                coreConnected ? 'bg-sage-500' : 'bg-stone-400'
+                coreConnected ? 'bg-sage-500' : 'bg-stone-400 dark:bg-neutral-500'
               }`}
             />
             {coreConnected ? t('skills.connected') : t('skills.disconnect')}
@@ -38,31 +44,33 @@ export default function Webhooks() {
           <button
             type="button"
             onClick={() => void refresh()}
-            className="rounded-full border border-stone-200 bg-white px-3 py-1.5 text-xs font-medium text-stone-700 transition hover:border-stone-300 hover:bg-stone-50">
+            className="rounded-full border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 transition hover:border-stone-300 dark:hover:border-neutral-700 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
             {t('common.refresh')}
           </button>
         </div>
 
         {error && <div className="p-3 rounded-lg bg-coral-50 text-coral-700 text-sm">{error}</div>}
 
-        <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6">
+        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6">
           <div className="space-y-3">
-            <h3 className="text-lg font-semibold text-stone-900">{t('skills.search')}</h3>
-            <p className="text-sm text-stone-600">{t('misc.rehydrating')}</p>
-            <div className="space-y-2 rounded-2xl border border-stone-200 bg-stone-50 p-4">
+            <h3 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
+              {t('skills.search')}
+            </h3>
+            <p className="text-sm text-stone-600 dark:text-neutral-300">{t('misc.rehydrating')}</p>
+            <div className="space-y-2 rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-4">
               <div>
-                <div className="text-xs uppercase tracking-wide text-stone-400">
+                <div className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('webhooks.archiveDirectory')}
                 </div>
-                <div className="font-mono text-xs break-all text-stone-700">
+                <div className="font-mono text-xs break-all text-stone-700 dark:text-neutral-200">
                   {archiveDir ?? t('common.loading')}
                 </div>
               </div>
               <div>
-                <div className="text-xs uppercase tracking-wide text-stone-400">
+                <div className="text-xs uppercase tracking-wide text-stone-400 dark:text-neutral-500">
                   {t('webhooks.todayFile')}
                 </div>
-                <div className="font-mono text-xs break-all text-stone-700">
+                <div className="font-mono text-xs break-all text-stone-700 dark:text-neutral-200">
                   {currentDayFile ?? t('common.loading')}
                 </div>
               </div>
@@ -70,7 +78,7 @@ export default function Webhooks() {
           </div>
         </div>
 
-        <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-6">
+        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-6">
           <ComposeioTriggerHistory entries={entries} />
         </div>
       </div>
diff --git a/app/src/pages/Welcome.tsx b/app/src/pages/Welcome.tsx
index 5cb159e74..2c3901937 100644
--- a/app/src/pages/Welcome.tsx
+++ b/app/src/pages/Welcome.tsx
@@ -55,18 +55,18 @@ const Welcome = () => {
   return (
     <div className="min-h-full flex flex-col items-center justify-center p-4">
       <div className="max-w-md w-full">
-        <div className="bg-white rounded-2xl shadow-soft border border-stone-200 p-8 animate-fade-up">
+        <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-stone-200 dark:border-neutral-800 p-8 animate-fade-up">
           <div className="flex justify-center mb-6">
             <div className="h-20 w-20">
               <RotatingTetrahedronCanvas />
             </div>
           </div>
 
-          <h1 className="text-2xl font-bold text-stone-900 text-center mb-2">
+          <h1 className="text-2xl font-bold text-stone-900 dark:text-neutral-100 text-center mb-2">
             {t('welcome.title')}
           </h1>
 
-          <p className="text-sm text-stone-500 text-center mb-6 leading-relaxed">
+          <p className="text-sm text-stone-500 dark:text-neutral-400 text-center mb-6 leading-relaxed">
             {t('welcome.subtitle')}
           </p>
 
@@ -109,8 +109,10 @@ const Welcome = () => {
               aria-live="polite"
               aria-atomic="true"
               className="mb-5 flex flex-col items-center justify-center gap-3 py-2">
-              <div className="h-6 w-6 animate-spin rounded-full border-2 border-stone-300 border-t-primary-500" />
-              <p className="text-sm font-medium text-stone-700">Signing you in...</p>
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-stone-300 dark:border-neutral-700 border-t-primary-500" />
+              <p className="text-sm font-medium text-stone-700 dark:text-neutral-200">
+                Signing you in...
+              </p>
             </div>
           ) : (
             <>
diff --git a/app/src/pages/conversations/components/AgentMessageBubble.tsx b/app/src/pages/conversations/components/AgentMessageBubble.tsx
index 5367fc24e..0a66a4d66 100644
--- a/app/src/pages/conversations/components/AgentMessageBubble.tsx
+++ b/app/src/pages/conversations/components/AgentMessageBubble.tsx
@@ -47,7 +47,7 @@ export function BubbleMarkdown({
   const proseTone =
     tone === 'user'
       ? 'prose-invert prose-p:text-white prose-li:text-white prose-a:text-white prose-code:text-white prose-strong:text-white prose-headings:text-white [&_li::marker]:text-white/85'
-      : 'prose-a:text-primary-500 prose-code:text-primary-700 prose-headings:text-sm [&_li::marker]:text-stone-700';
+      : 'dark:prose-invert prose-a:text-primary-500 prose-code:text-primary-700 dark:prose-code:text-primary-300 prose-headings:text-sm [&_li::marker]:text-stone-700 dark:[&_li::marker]:text-neutral-300';
 
   return (
     <div
@@ -79,7 +79,7 @@ export function BubbleMarkdown({
 
 export function TableCellMarkdown({ content }: { content: string }) {
   return (
-    <div className="prose prose-sm max-w-none text-sm text-stone-700 prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-code:text-xs prose-code:text-primary-700 prose-a:text-primary-500 prose-strong:text-stone-900 prose-headings:text-sm prose-headings:font-semibold [&_li::marker]:text-stone-700 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:pl-0 [&_ol]:pl-0 [&_ul]:list-inside [&_ol]:list-inside [&_li]:pl-0 [&_li_p]:inline [&_li_p]:m-0">
+    <div className="prose prose-sm dark:prose-invert max-w-none text-sm text-stone-700 dark:text-neutral-200 prose-p:my-0 prose-ul:my-0 prose-ol:my-0 prose-li:my-0 prose-code:text-xs prose-code:text-primary-700 dark:prose-code:text-primary-300 prose-a:text-primary-500 prose-strong:text-stone-900 dark:prose-strong:text-neutral-100 prose-headings:text-sm prose-headings:font-semibold [&_li::marker]:text-stone-700 dark:[&_li::marker]:text-neutral-300 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:pl-0 [&_ol]:pl-0 [&_ul]:list-inside [&_ol]:list-inside [&_li]:pl-0 [&_li_p]:inline [&_li_p]:m-0">
       <Markdown
         components={{
           a: ({ href, children }) => (
@@ -126,15 +126,15 @@ export function AgentMessageBubble({
   if (table) {
     return (
       <div
-        className={`w-full max-w-full overflow-hidden border border-stone-200 bg-white/90 shadow-sm ${bubbleChrome}`}>
+        className={`w-full max-w-full overflow-hidden border border-stone-200 dark:border-neutral-800 bg-white/90 dark:bg-neutral-900/90 shadow-sm ${bubbleChrome}`}>
         <div className="overflow-x-auto">
-          <table className="w-max min-w-full border-collapse text-left text-sm text-stone-800">
-            <thead className="bg-stone-100/90">
+          <table className="w-max min-w-full border-collapse text-left text-sm text-stone-800 dark:text-neutral-100">
+            <thead className="bg-stone-100 dark:bg-neutral-800/90">
               <tr>
                 {table.headers.map(header => (
                   <th
                     key={header}
-                    className="max-w-[25vw] border-b border-stone-200 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.08em] text-stone-500">
+                    className="max-w-[25vw] border-b border-stone-200 dark:border-neutral-800 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.08em] text-stone-500 dark:text-neutral-400">
                     {header}
                   </th>
                 ))}
@@ -144,11 +144,11 @@ export function AgentMessageBubble({
               {table.rows.map((row, rowIndex) => (
                 <tr
                   key={`${rowIndex}:${row.join('|')}`}
-                  className="odd:bg-white even:bg-stone-50/70">
+                  className="odd:bg-white dark:odd:bg-neutral-900 even:bg-stone-50 dark:even:bg-neutral-800/60">
                   {row.map((cell, cellIndex) => (
                     <td
                       key={`${rowIndex}:${cellIndex}:${cell}`}
-                      className="max-w-[25vw] border-t border-stone-200 px-4 py-3 align-top text-sm text-stone-700">
+                      className="max-w-[25vw] border-t border-stone-200 dark:border-neutral-800 px-4 py-3 align-top text-sm text-stone-700 dark:text-neutral-200">
                       <TableCellMarkdown content={cell} />
                     </td>
                   ))}
@@ -164,7 +164,8 @@ export function AgentMessageBubble({
   return (
     <>
       {textContent && (
-        <div className={`bg-stone-200/80 px-4 py-2.5 text-stone-900 ${bubbleChrome}`}>
+        <div
+          className={`bg-stone-200 dark:bg-neutral-800/80 px-4 py-2.5 text-stone-900 dark:text-neutral-100 ${bubbleChrome}`}>
           <BubbleMarkdown content={textContent} />
         </div>
       )}
diff --git a/app/src/pages/conversations/components/CitationChips.tsx b/app/src/pages/conversations/components/CitationChips.tsx
index 9da11a661..a69045fbb 100644
--- a/app/src/pages/conversations/components/CitationChips.tsx
+++ b/app/src/pages/conversations/components/CitationChips.tsx
@@ -23,13 +23,13 @@ export function CitationChips({ citations }: { citations: MessageCitation[] }) {
         return (
           <details key={citation.id} className="group">
             <summary
-              className="list-none cursor-pointer rounded-full border border-stone-300 bg-stone-100 px-2 py-0.5 text-[10px] text-stone-600 hover:bg-stone-200"
+              className="list-none cursor-pointer rounded-full border border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 px-2 py-0.5 text-[10px] text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-700"
               aria-label={title}
               title={title}>
               {citation.namespace ?? citation.key}
               {scoreLabel}
             </summary>
-            <div className="mt-1 max-w-md rounded-md border border-stone-200 bg-white px-2 py-1 text-[11px] text-stone-600 shadow-sm">
+            <div className="mt-1 max-w-md rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2 py-1 text-[11px] text-stone-600 dark:text-neutral-300 shadow-sm">
               {citation.snippet}
             </div>
           </details>
diff --git a/app/src/pages/conversations/components/LimitPill.tsx b/app/src/pages/conversations/components/LimitPill.tsx
index 73c3867a8..3c06ebdcd 100644
--- a/app/src/pages/conversations/components/LimitPill.tsx
+++ b/app/src/pages/conversations/components/LimitPill.tsx
@@ -3,14 +3,18 @@ export function LimitPill({ label, usedPct }: { label: string; usedPct: number }
     usedPct >= 1 ? 'bg-coral-500' : usedPct >= 0.8 ? 'bg-amber-500' : 'bg-primary-500';
   return (
     <div className="flex items-center gap-1">
-      <span className="text-[9px] text-stone-400 font-medium uppercase">{label}</span>
-      <div className="w-8 h-1.5 rounded-full bg-stone-200 overflow-hidden">
+      <span className="text-[9px] text-stone-400 dark:text-neutral-500 font-medium uppercase">
+        {label}
+      </span>
+      <div className="w-8 h-1.5 rounded-full bg-stone-200 dark:bg-neutral-800 overflow-hidden">
         <div
           className={`h-full rounded-full transition-all duration-300 ${barColor}`}
           style={{ width: `${Math.min(100, usedPct * 100)}%` }}
         />
       </div>
-      <span className="text-[9px] text-stone-500 tabular-nums">{Math.round(usedPct * 100)}%</span>
+      <span className="text-[9px] text-stone-500 dark:text-neutral-400 tabular-nums">
+        {Math.round(usedPct * 100)}%
+      </span>
     </div>
   );
 }
diff --git a/app/src/pages/conversations/components/TaskKanbanBoard.tsx b/app/src/pages/conversations/components/TaskKanbanBoard.tsx
index b6c574037..a96a3a10e 100644
--- a/app/src/pages/conversations/components/TaskKanbanBoard.tsx
+++ b/app/src/pages/conversations/components/TaskKanbanBoard.tsx
@@ -45,21 +45,25 @@ export function TaskKanbanBoard({ board, disabled = false, onMove }: TaskKanbanB
   };
 
   return (
-    <div className="rounded-xl border border-stone-200 bg-white px-3 py-3 shadow-sm">
+    <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-3 shadow-sm">
       <div className="mb-2 flex items-center justify-between gap-3">
-        <h4 className="text-xs font-semibold uppercase tracking-wide text-stone-500">
+        <h4 className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
           {t('conversations.taskKanban.title')}
         </h4>
-        <span className="text-[10px] text-stone-400">{board.cards.length}</span>
+        <span className="text-[10px] text-stone-400 dark:text-neutral-500">
+          {board.cards.length}
+        </span>
       </div>
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-4">
         {COLUMN_DEFS.map(column => (
-          <section key={column.status} className="min-w-0 rounded-lg bg-stone-50 p-2">
+          <section
+            key={column.status}
+            className="min-w-0 rounded-lg bg-stone-50 dark:bg-neutral-800/60 p-2">
             <div className="mb-2 flex items-center justify-between gap-2">
-              <h5 className="truncate text-[11px] font-medium text-stone-600">
+              <h5 className="truncate text-[11px] font-medium text-stone-600 dark:text-neutral-300">
                 {t(column.labelKey)}
               </h5>
-              <span className="text-[10px] text-stone-400">
+              <span className="text-[10px] text-stone-400 dark:text-neutral-500">
                 {cardsByStatus[column.status].length}
               </span>
             </div>
@@ -67,9 +71,9 @@ export function TaskKanbanBoard({ board, disabled = false, onMove }: TaskKanbanB
               {cardsByStatus[column.status].map(card => (
                 <article
                   key={card.id}
-                  className="rounded-lg border border-stone-200 bg-white px-2.5 py-2 shadow-sm">
+                  className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-2.5 py-2 shadow-sm">
                   <div className="flex items-start gap-2">
-                    <p className="min-w-0 flex-1 break-words text-xs font-medium leading-snug text-stone-800">
+                    <p className="min-w-0 flex-1 break-words text-xs font-medium leading-snug text-stone-800 dark:text-neutral-100">
                       {card.title}
                     </p>
                     {onMove && (
@@ -80,7 +84,7 @@ export function TaskKanbanBoard({ board, disabled = false, onMove }: TaskKanbanB
                           aria-label={t('conversations.taskKanban.moveLeft')}
                           disabled={disabled || column.status === 'todo'}
                           onClick={() => moveCard(card, -1)}
-                          className="flex h-5 w-5 items-center justify-center rounded-md text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-700 disabled:opacity-25">
+                          className="flex h-5 w-5 items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 disabled:opacity-25">
                           <LuArrowLeft className="h-3 w-3" />
                         </button>
                         <button
@@ -89,14 +93,14 @@ export function TaskKanbanBoard({ board, disabled = false, onMove }: TaskKanbanB
                           aria-label={t('conversations.taskKanban.moveRight')}
                           disabled={disabled || column.status === 'done'}
                           onClick={() => moveCard(card, 1)}
-                          className="flex h-5 w-5 items-center justify-center rounded-md text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-700 disabled:opacity-25">
+                          className="flex h-5 w-5 items-center justify-center rounded-md text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 disabled:opacity-25">
                           <LuArrowRight className="h-3 w-3" />
                         </button>
                       </div>
                     )}
                   </div>
                   {card.notes && (
-                    <p className="mt-1 break-words text-[11px] leading-snug text-stone-500">
+                    <p className="mt-1 break-words text-[11px] leading-snug text-stone-500 dark:text-neutral-400">
                       {card.notes}
                     </p>
                   )}
diff --git a/app/src/pages/conversations/components/ToolTimelineBlock.tsx b/app/src/pages/conversations/components/ToolTimelineBlock.tsx
index 93ce44507..b2b13f3f9 100644
--- a/app/src/pages/conversations/components/ToolTimelineBlock.tsx
+++ b/app/src/pages/conversations/components/ToolTimelineBlock.tsx
@@ -59,13 +59,15 @@ export function SubagentActivityBlock({ subagent }: { subagent: SubagentActivity
     );
   }
   return (
-    <div className="mt-1 space-y-0.5 text-[10px] text-stone-500" data-testid="subagent-activity">
+    <div
+      className="mt-1 space-y-0.5 text-[10px] text-stone-500 dark:text-neutral-400"
+      data-testid="subagent-activity">
       {headerBits.length > 0 ? (
         <div className="flex flex-wrap items-center gap-1.5">
           {headerBits.map(bit => (
             <span
               key={bit}
-              className="rounded-full bg-stone-100 px-1.5 py-0.5 font-medium text-stone-600">
+              className="rounded-full bg-stone-100 dark:bg-neutral-800 px-1.5 py-0.5 font-medium text-stone-600 dark:text-neutral-300">
               {bit}
             </span>
           ))}
@@ -76,23 +78,27 @@ export function SubagentActivityBlock({ subagent }: { subagent: SubagentActivity
           {subagent.toolCalls.map(call => {
             const tone =
               call.status === 'running'
-                ? 'text-amber-700'
+                ? 'text-amber-700 dark:text-amber-300'
                 : call.status === 'success'
-                  ? 'text-sage-700'
-                  : 'text-coral-700';
+                  ? 'text-sage-700 dark:text-sage-300'
+                  : 'text-coral-700 dark:text-coral-300';
             return (
               <li
                 key={call.callId}
                 className="flex items-center gap-1.5"
                 data-testid="subagent-tool-call">
                 <span className={`text-[9px] ${tone}`}>•</span>
-                <span className="font-mono text-[10px] text-stone-700">{call.toolName}</span>
+                <span className="font-mono text-[10px] text-stone-700 dark:text-neutral-200">
+                  {call.toolName}
+                </span>
                 {call.iteration != null ? (
-                  <span className="text-[9px] text-stone-400">·t{call.iteration}</span>
+                  <span className="text-[9px] text-stone-400 dark:text-neutral-500">
+                    ·t{call.iteration}
+                  </span>
                 ) : null}
                 <span className={`text-[9px] ${tone}`}>{call.status}</span>
                 {call.elapsedMs != null && call.status !== 'running' ? (
-                  <span className="text-[9px] text-stone-400">
+                  <span className="text-[9px] text-stone-400 dark:text-neutral-500">
                     {call.elapsedMs >= 1000
                       ? `${(call.elapsedMs / 1000).toFixed(1)}s`
                       : `${call.elapsedMs}ms`}
@@ -135,27 +141,29 @@ export function ToolTimelineBlock({ entries }: { entries: ToolTimelineEntry[] })
         const statusTone =
           entry.status === 'running'
             ? {
-                pill: 'bg-amber-100 text-amber-600',
-                bubble: 'bg-amber-50 text-amber-900',
-                code: 'text-amber-800',
-                chevron: 'text-amber-500',
+                pill: 'bg-amber-100 dark:bg-amber-500/20 text-amber-600 dark:text-amber-300',
+                bubble: 'bg-amber-50 dark:bg-amber-500/10 text-amber-900 dark:text-amber-200',
+                code: 'text-amber-800 dark:text-amber-300',
+                chevron: 'text-amber-500 dark:text-amber-400',
               }
             : entry.status === 'success'
               ? {
-                  pill: 'bg-sage-100 text-sage-600',
-                  bubble: 'bg-sage-50 text-sage-900',
-                  code: 'text-sage-800',
-                  chevron: 'text-sage-500',
+                  pill: 'bg-sage-100 dark:bg-sage-500/20 text-sage-600 dark:text-sage-300',
+                  bubble: 'bg-sage-50 dark:bg-sage-500/10 text-sage-900 dark:text-sage-200',
+                  code: 'text-sage-800 dark:text-sage-300',
+                  chevron: 'text-sage-500 dark:text-sage-400',
                 }
               : {
-                  pill: 'bg-coral-100 text-coral-600',
-                  bubble: 'bg-coral-50 text-coral-900',
-                  code: 'text-coral-800',
-                  chevron: 'text-coral-500',
+                  pill: 'bg-coral-100 dark:bg-coral-500/20 text-coral-600 dark:text-coral-300',
+                  bubble: 'bg-coral-50 dark:bg-coral-500/10 text-coral-900 dark:text-coral-200',
+                  code: 'text-coral-800 dark:text-coral-300',
+                  chevron: 'text-coral-500 dark:text-coral-400',
                 };
 
         return (
-          <div key={entry.id} className="flex flex-col gap-1 text-xs text-stone-400">
+          <div
+            key={entry.id}
+            className="flex flex-col gap-1 text-xs text-stone-400 dark:text-neutral-500">
             {expandable ? (
               <details open={shouldAutoExpand} className="ml-1 group">
                 <summary className="flex cursor-pointer list-none items-center gap-2 select-none marker:hidden">
@@ -163,7 +171,9 @@ export function ToolTimelineBlock({ entries }: { entries: ToolTimelineEntry[] })
                     className={`text-[10px] transition-transform group-open:rotate-90 ${statusTone.chevron}`}>
                     ▶
                   </span>
-                  <span className="font-medium text-stone-600">{formatted.title}</span>
+                  <span className="font-medium text-stone-600 dark:text-neutral-300">
+                    {formatted.title}
+                  </span>
                   <span className={`rounded-full px-2 py-0.5 text-[10px] ${statusTone.pill}`}>
                     {entry.status}
                   </span>
@@ -193,7 +203,9 @@ export function ToolTimelineBlock({ entries }: { entries: ToolTimelineEntry[] })
               </details>
             ) : (
               <div className="ml-1 flex items-center gap-2">
-                <span className="font-medium text-stone-600">{formatted.title}</span>
+                <span className="font-medium text-stone-600 dark:text-neutral-300">
+                  {formatted.title}
+                </span>
                 <span className={`rounded-full px-2 py-0.5 text-[10px] ${statusTone.pill}`}>
                   {entry.status}
                 </span>
diff --git a/app/src/pages/conversations/components/WorkerThreadRefCard.tsx b/app/src/pages/conversations/components/WorkerThreadRefCard.tsx
index 6be706475..2b1f5a5bb 100644
--- a/app/src/pages/conversations/components/WorkerThreadRefCard.tsx
+++ b/app/src/pages/conversations/components/WorkerThreadRefCard.tsx
@@ -35,10 +35,10 @@ interface WorkerThreadStatusBadgeProps {
 function WorkerThreadStatusBadge({ status }: WorkerThreadStatusBadgeProps) {
   const tone =
     status === 'running'
-      ? 'bg-amber-100 text-amber-700'
+      ? 'bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300'
       : status === 'completed'
-        ? 'bg-sage-100 text-sage-700'
-        : 'bg-coral-100 text-coral-700';
+        ? 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300'
+        : 'bg-coral-100 dark:bg-coral-500/20 text-coral-700 dark:text-coral-300';
   const label = status === 'running' ? 'running' : status === 'completed' ? 'done' : 'failed';
   return (
     <span
@@ -91,23 +91,25 @@ export function WorkerThreadRefCard({
     <button
       type="button"
       onClick={() => dispatch(setActiveThread(ref.threadId))}
-      className="mt-1 flex w-full items-center justify-between gap-3 rounded-xl border border-primary-200 bg-primary-50 px-3 py-2 text-left transition-colors hover:bg-primary-100">
+      className="mt-1 flex w-full items-center justify-between gap-3 rounded-xl border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/15 px-3 py-2 text-left transition-colors hover:bg-primary-100 dark:hover:bg-primary-500/25">
       <div className="min-w-0">
         <div className="flex items-center gap-2">
-          <span className="rounded-full bg-primary-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-800">
+          <span className="rounded-full bg-primary-200 dark:bg-primary-500/30 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-800 dark:text-primary-200">
             {ref.label}
           </span>
-          <span className="truncate text-xs font-medium text-primary-900">
+          <span className="truncate text-xs font-medium text-primary-900 dark:text-primary-100">
             {t('chat.openWorkerThread')}
           </span>
           {status ? <WorkerThreadStatusBadge status={status} /> : null}
         </div>
         {meta.length > 0 ? (
-          <div className="mt-0.5 text-[10px] text-primary-700/80">{meta.join(' · ')}</div>
+          <div className="mt-0.5 text-[10px] text-primary-700/80 dark:text-primary-300/80">
+            {meta.join(' · ')}
+          </div>
         ) : null}
       </div>
       <svg
-        className="h-3 w-3 shrink-0 text-primary-700"
+        className="h-3 w-3 shrink-0 text-primary-700 dark:text-primary-300"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor">
diff --git a/app/src/pages/onboarding/components/BetaBanner.tsx b/app/src/pages/onboarding/components/BetaBanner.tsx
index 563d31de7..e7d7dbee0 100644
--- a/app/src/pages/onboarding/components/BetaBanner.tsx
+++ b/app/src/pages/onboarding/components/BetaBanner.tsx
@@ -27,15 +27,15 @@ const BetaBanner = () => {
   };
 
   return (
-    <div className="mb-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3">
+    <div className="mb-4 flex items-start gap-3 rounded-xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-4 py-3">
       {/* Message */}
-      <p className="flex-1 text-xs leading-relaxed text-stone-700">
+      <p className="flex-1 text-xs leading-relaxed text-stone-700 dark:text-neutral-200">
         {t('misc.beta')}{' '}
         <a
           href={DISCORD_INVITE_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="font-medium text-amber-800 underline underline-offset-2 hover:text-amber-900">
+          className="font-medium text-amber-800 dark:text-amber-300 underline underline-offset-2 hover:text-amber-900 dark:hover:text-amber-200">
           {t('misc.betaFeedback')}
         </a>
       </p>
@@ -45,7 +45,7 @@ const BetaBanner = () => {
         type="button"
         aria-label={t('common.dismiss')}
         onClick={handleDismiss}
-        className="mt-0.5 flex-shrink-0 text-stone-400 hover:text-stone-600 transition-colors">
+        className="mt-0.5 flex-shrink-0 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 transition-colors">
         <svg
           className="h-3.5 w-3.5"
           fill="none"
diff --git a/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx b/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx
index e261ef33d..2410c96fe 100644
--- a/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx
+++ b/app/src/pages/onboarding/components/ConfigureLaterCallout.tsx
@@ -15,12 +15,14 @@ const ConfigureLaterCallout = ({ settingsHref }: ConfigureLaterCalloutProps) =>
   const { t } = useT();
   return (
     <div className="flex flex-col gap-3">
-      <p className="text-xs text-stone-700 leading-relaxed">
+      <p className="text-xs text-stone-700 dark:text-neutral-200 leading-relaxed">
         {t('onboarding.custom.configureLater')}
       </p>
-      <p className="text-[11px] text-stone-500" data-testid="configure-later-hint">
+      <p
+        className="text-[11px] text-stone-500 dark:text-neutral-400"
+        data-testid="configure-later-hint">
         {t('onboarding.custom.openSettings')}:{' '}
-        <code className="text-stone-700">{settingsHref}</code>
+        <code className="text-stone-700 dark:text-neutral-200">{settingsHref}</code>
       </p>
     </div>
   );
diff --git a/app/src/pages/onboarding/components/WizardStepper.tsx b/app/src/pages/onboarding/components/WizardStepper.tsx
index 9875276f3..20e4d6cd1 100644
--- a/app/src/pages/onboarding/components/WizardStepper.tsx
+++ b/app/src/pages/onboarding/components/WizardStepper.tsx
@@ -30,15 +30,15 @@ const WizardStepper = ({ labels, activeIndex }: WizardStepperProps) => {
           ? 'bg-sage-500 border-sage-500 text-white'
           : active
             ? 'bg-primary-500 border-primary-500 text-white'
-            : 'bg-white border-stone-300 text-stone-400';
+            : 'bg-white dark:bg-neutral-900 border-stone-300 dark:border-neutral-700 text-stone-400 dark:text-neutral-500';
 
         const labelClasses = completed
-          ? 'text-sage-700'
+          ? 'text-sage-700 dark:text-sage-300'
           : active
-            ? 'text-stone-900 font-semibold'
-            : 'text-stone-400';
+            ? 'text-stone-900 dark:text-neutral-100 font-semibold'
+            : 'text-stone-400 dark:text-neutral-500';
 
-        const connectorClasses = completed ? 'bg-sage-500' : 'bg-stone-200';
+        const connectorClasses = completed ? 'bg-sage-500' : 'bg-stone-200 dark:bg-neutral-800';
 
         return (
           <li
diff --git a/app/src/pages/onboarding/pages/ChatProviderPage.tsx b/app/src/pages/onboarding/pages/ChatProviderPage.tsx
index 8f68654fa..d211b986f 100644
--- a/app/src/pages/onboarding/pages/ChatProviderPage.tsx
+++ b/app/src/pages/onboarding/pages/ChatProviderPage.tsx
@@ -32,15 +32,17 @@ const ChatProviderPage = () => {
   return (
     <div
       data-testid="onboarding-chat-provider-step"
-      className="rounded-2xl border border-stone-200 bg-white p-8 shadow-soft animate-fade-up">
+      className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
       <div className="text-center mb-5">
-        <h1 className="text-xl font-bold mb-2 text-stone-900">{t('onboarding.chatProvider')}</h1>
-        <p className="text-stone-500 text-sm leading-relaxed max-w-sm mx-auto">
+        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
+          {t('onboarding.chatProvider')}
+        </h1>
+        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed max-w-sm mx-auto">
           {t('onboarding.chatProviderDesc')}
         </p>
       </div>
 
-      <div className="rounded-xl border border-dashed border-stone-200 bg-stone-50 p-6 mb-5 text-center text-sm text-stone-500">
+      <div className="rounded-xl border border-dashed border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-6 mb-5 text-center text-sm text-stone-500 dark:text-neutral-400">
         {t('misc.beta')}
       </div>
 
diff --git a/app/src/pages/onboarding/steps/ApiKeysStep.tsx b/app/src/pages/onboarding/steps/ApiKeysStep.tsx
index 846fc742b..5458e5ee3 100644
--- a/app/src/pages/onboarding/steps/ApiKeysStep.tsx
+++ b/app/src/pages/onboarding/steps/ApiKeysStep.tsx
@@ -45,17 +45,21 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
   return (
     <div
       data-testid="onboarding-api-keys-step"
-      className="rounded-2xl bg-white p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
       <div className="text-center">
-        <h1 className="text-2xl font-display text-stone-900 mb-2 leading-tight">
+        <h1 className="text-2xl font-display text-stone-900 dark:text-neutral-100 mb-2 leading-tight">
           {t('onboarding.apiKeys.title')}
         </h1>
-        <p className="text-stone-500 text-sm leading-relaxed">{t('onboarding.apiKeys.subtitle')}</p>
+        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed">
+          {t('onboarding.apiKeys.subtitle')}
+        </p>
       </div>
 
       <div className="mt-6 flex flex-col gap-4">
         <div className="flex flex-col gap-1.5">
-          <label htmlFor="onboarding-openai-key" className="text-xs font-medium text-stone-700">
+          <label
+            htmlFor="onboarding-openai-key"
+            className="text-xs font-medium text-stone-700 dark:text-neutral-200">
             {t('onboarding.apiKeys.openaiLabel')}
           </label>
           <input
@@ -70,12 +74,14 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
               setOpenai(e.target.value);
               setError(null);
             }}
-            className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 placeholder-stone-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
           />
         </div>
 
         <div className="flex flex-col gap-1.5">
-          <label htmlFor="onboarding-anthropic-key" className="text-xs font-medium text-stone-700">
+          <label
+            htmlFor="onboarding-anthropic-key"
+            className="text-xs font-medium text-stone-700 dark:text-neutral-200">
             {t('onboarding.apiKeys.anthropicLabel')}
           </label>
           <input
@@ -90,7 +96,7 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
               setAnthropic(e.target.value);
               setError(null);
             }}
-            className="rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 placeholder-stone-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
           />
         </div>
 
@@ -111,7 +117,7 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
           type="button"
           onClick={onSkip}
           disabled={saving}
-          className="text-xs text-stone-500 hover:text-stone-700 underline disabled:opacity-50">
+          className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 underline disabled:opacity-50">
           {t('onboarding.apiKeys.skipForNow')}
         </button>
       </div>
diff --git a/app/src/pages/onboarding/steps/ContextGatheringStep.tsx b/app/src/pages/onboarding/steps/ContextGatheringStep.tsx
index d899fa4a1..659383373 100644
--- a/app/src/pages/onboarding/steps/ContextGatheringStep.tsx
+++ b/app/src/pages/onboarding/steps/ContextGatheringStep.tsx
@@ -286,12 +286,12 @@ const ContextGatheringStep = ({
 
   if (finished && hasError) {
     return (
-      <div className="rounded-2xl border border-stone-200 bg-white p-8 shadow-soft animate-fade-up">
+      <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
         <div className="flex flex-col items-center justify-center gap-5">
-          <h1 className="text-xl font-bold text-stone-900">
+          <h1 className="text-xl font-bold text-stone-900 dark:text-neutral-100">
             {t('onboarding.contextGathering.title')}
           </h1>
-          <p className="text-sm text-stone-600 text-center max-w-xs leading-relaxed">
+          <p className="text-sm text-stone-600 dark:text-neutral-300 text-center max-w-xs leading-relaxed">
             {t('onboarding.contextGathering.errorDesc')}
           </p>
           <OnboardingNextButton
@@ -304,16 +304,16 @@ const ContextGatheringStep = ({
   }
 
   return (
-    <div className="rounded-2xl border border-stone-200 bg-white p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
       <div className="flex flex-col items-center justify-center gap-6 py-8">
         {/* Pulsing avatar silhouette */}
         <div className="w-20 h-20 rounded-full bg-gradient-to-r from-stone-300 via-stone-100 to-stone-300 bg-[length:200%_100%] animate-shimmer" />
 
         {/* Title */}
-        <h1 className="text-xl font-bold text-stone-900 animate-pulse">
+        <h1 className="text-xl font-bold text-stone-900 dark:text-neutral-100 animate-pulse">
           {t('onboarding.contextGathering.buildingProfile')}
         </h1>
-        <p className="text-sm text-stone-500 leading-relaxed">
+        <p className="text-sm text-stone-500 dark:text-neutral-400 leading-relaxed">
           {t('onboarding.contextGathering.buildingDesc')}
         </p>
 
diff --git a/app/src/pages/onboarding/steps/CustomWizardStep.tsx b/app/src/pages/onboarding/steps/CustomWizardStep.tsx
index 4ee57902b..9e7505135 100644
--- a/app/src/pages/onboarding/steps/CustomWizardStep.tsx
+++ b/app/src/pages/onboarding/steps/CustomWizardStep.tsx
@@ -17,8 +17,8 @@ interface ChoiceCardProps {
 const ChoiceCard = ({ selected, onClick, accent, title, description, testId }: ChoiceCardProps) => {
   const selectedClasses =
     accent === 'sage'
-      ? '!border-sage-500 bg-sage-50 shadow-sm'
-      : '!border-primary-500 bg-primary-50 shadow-sm';
+      ? '!border-sage-500 bg-sage-50 dark:bg-sage-500/10 shadow-sm'
+      : '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 shadow-sm';
   return (
     <button
       type="button"
@@ -28,10 +28,12 @@ const ChoiceCard = ({ selected, onClick, accent, title, description, testId }: C
       className={`flex h-full w-full flex-col rounded-2xl border-2 p-5 text-left transition-colors focus:outline-none ${
         selected
           ? selectedClasses
-          : '!border-stone-200 bg-white hover:!border-stone-300 hover:bg-stone-50'
+          : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
       }`}>
-      <h3 className="text-base font-semibold text-stone-900">{title}</h3>
-      <p className="mt-1 text-xs text-stone-600 leading-relaxed">{description}</p>
+      <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{title}</h3>
+      <p className="mt-1 text-xs text-stone-600 dark:text-neutral-300 leading-relaxed">
+        {description}
+      </p>
     </button>
   );
 };
@@ -101,11 +103,15 @@ const CustomWizardStep = ({
   return (
     <div
       data-testid={testId ?? 'onboarding-custom-wizard-step'}
-      className="rounded-2xl bg-white p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
       <WizardStepper labels={stepperLabels} activeIndex={stepIndex} />
 
-      <h1 className="mt-8 text-2xl font-display text-stone-900 leading-tight">{title}</h1>
-      <p className="mt-2 text-sm text-stone-500 leading-relaxed">{subtitle}</p>
+      <h1 className="mt-8 text-2xl font-display text-stone-900 dark:text-neutral-100 leading-tight">
+        {title}
+      </h1>
+      <p className="mt-2 text-sm text-stone-500 dark:text-neutral-400 leading-relaxed">
+        {subtitle}
+      </p>
 
       <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 sm:items-stretch">
         <ChoiceCard
@@ -127,7 +133,7 @@ const CustomWizardStep = ({
       </div>
 
       {choice === 'configure' && configureContent ? (
-        <div className="mt-6 rounded-2xl border border-stone-200 bg-stone-50 p-5">
+        <div className="mt-6 rounded-2xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 p-5">
           {configureContent}
         </div>
       ) : null}
@@ -136,7 +142,7 @@ const CustomWizardStep = ({
         <button
           type="button"
           onClick={onBack}
-          className="rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-medium text-stone-700 hover:bg-stone-50 focus:outline-none">
+          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-2.5 text-sm font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 focus:outline-none">
           {t('onboarding.custom.back')}
         </button>
         <div className="flex-1">
diff --git a/app/src/pages/onboarding/steps/LocalAIStep.tsx b/app/src/pages/onboarding/steps/LocalAIStep.tsx
index 8f324ad9c..3decc826a 100644
--- a/app/src/pages/onboarding/steps/LocalAIStep.tsx
+++ b/app/src/pages/onboarding/steps/LocalAIStep.tsx
@@ -64,9 +64,9 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
   // Low-RAM device: show cloud fallback option as the primary path.
   if (recommendDisabled) {
     return (
-      <div className="rounded-2xl border border-stone-200 bg-white p-8 shadow-soft animate-fade-up">
+      <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
         <div className="flex flex-col items-center mb-5">
-          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 mb-3">
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-500/15 mb-3">
             <svg
               className="h-8 w-8 text-primary-500"
               fill="none"
@@ -80,27 +80,37 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
               />
             </svg>
           </div>
-          <h1 className="text-xl font-bold mb-2 text-stone-900">{t('onboarding.localAI')}</h1>
-          <p className="text-stone-600 text-sm text-center">{t('onboarding.localAIDesc')}</p>
+          <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
+            {t('onboarding.localAI')}
+          </h1>
+          <p className="text-stone-600 dark:text-neutral-300 text-sm text-center">
+            {t('onboarding.localAIDesc')}
+          </p>
         </div>
 
         <div className="space-y-2 mb-5">
-          <div className="rounded-xl border border-primary-200 bg-primary-50 px-3 py-2">
-            <p className="text-xs text-stone-700">
+          <div className="rounded-xl border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/15 px-3 py-2">
+            <p className="text-xs text-stone-700 dark:text-neutral-200">
               <span className="font-semibold">{t('onboarding.localAI')}</span>
-              <span className="text-stone-600">&nbsp;— {t('onboarding.localAIDesc')}</span>
+              <span className="text-stone-600 dark:text-neutral-300">
+                &nbsp;— {t('onboarding.localAIDesc')}
+              </span>
             </p>
           </div>
-          <div className="rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-            <p className="text-xs text-stone-700">
+          <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+            <p className="text-xs text-stone-700 dark:text-neutral-200">
               <span className="font-semibold">{t('common.download')}</span>
-              <span className="text-stone-600">&nbsp;— {t('misc.downloading')}</span>
+              <span className="text-stone-600 dark:text-neutral-300">
+                &nbsp;— {t('misc.downloading')}
+              </span>
             </p>
           </div>
-          <div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2">
-            <p className="text-xs text-stone-700">
+          <div className="rounded-xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-3 py-2">
+            <p className="text-xs text-stone-700 dark:text-neutral-200">
               <span className="font-semibold">{t('welcome.connect')}</span>
-              <span className="text-stone-600">&nbsp;— {t('onboarding.localAIDesc')}</span>
+              <span className="text-stone-600 dark:text-neutral-300">
+                &nbsp;— {t('onboarding.localAIDesc')}
+              </span>
             </p>
           </div>
         </div>
@@ -110,7 +120,7 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
         <button
           type="button"
           onClick={handleConsent}
-          className="mt-3 w-full text-center text-xs text-stone-400 hover:text-stone-600 transition-colors">
+          className="mt-3 w-full text-center text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 transition-colors">
           Use local AI anyway (not recommended for your device)
         </button>
       </div>
@@ -120,9 +130,9 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
   // Sufficient RAM: local AI is opt-in. Present cloud as the primary path and
   // local AI as an explicit choice for users who want full privacy.
   return (
-    <div className="rounded-2xl border border-stone-200 bg-white p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
       <div className="flex flex-col items-center mb-5">
-        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 mb-3">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-500/15 mb-3">
           <svg
             className="h-8 w-8 text-primary-500"
             fill="none"
@@ -136,27 +146,37 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
             />
           </svg>
         </div>
-        <h1 className="text-xl font-bold mb-2 text-stone-900">{t('onboarding.localAI')}</h1>
-        <p className="text-stone-600 text-sm text-center">{t('onboarding.localAIDesc')}</p>
+        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
+          {t('onboarding.localAI')}
+        </h1>
+        <p className="text-stone-600 dark:text-neutral-300 text-sm text-center">
+          {t('onboarding.localAIDesc')}
+        </p>
       </div>
 
       <div className="space-y-2 mb-5">
-        <div className="rounded-xl border border-primary-200 bg-primary-50 px-3 py-2">
-          <p className="text-xs text-stone-700">
+        <div className="rounded-xl border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/15 px-3 py-2">
+          <p className="text-xs text-stone-700 dark:text-neutral-200">
             <span className="font-semibold">{t('onboarding.localAI')}</span>
-            <span className="text-stone-600">&nbsp;— {t('onboarding.localAIDesc')}</span>
+            <span className="text-stone-600 dark:text-neutral-300">
+              &nbsp;— {t('onboarding.localAIDesc')}
+            </span>
           </p>
         </div>
-        <div className="rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <p className="text-xs text-stone-700">
+        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <p className="text-xs text-stone-700 dark:text-neutral-200">
             <span className="font-semibold">{t('onboarding.localAI')}</span>
-            <span className="text-stone-600">&nbsp;— {t('onboarding.localAIDesc')}</span>
+            <span className="text-stone-600 dark:text-neutral-300">
+              &nbsp;— {t('onboarding.localAIDesc')}
+            </span>
           </p>
         </div>
-        <div className="rounded-xl border border-stone-200 bg-stone-50 px-3 py-2">
-          <p className="text-xs text-stone-700">
+        <div className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+          <p className="text-xs text-stone-700 dark:text-neutral-200">
             <span className="font-semibold">{t('common.refresh')}</span>
-            <span className="text-stone-600">&nbsp;— {t('onboarding.localAIDesc')}</span>
+            <span className="text-stone-600 dark:text-neutral-300">
+              &nbsp;— {t('onboarding.localAIDesc')}
+            </span>
           </p>
         </div>
       </div>
@@ -166,7 +186,7 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
       <button
         type="button"
         onClick={handleConsent}
-        className="mt-3 w-full text-center text-xs text-stone-400 hover:text-stone-600 transition-colors">
+        className="mt-3 w-full text-center text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 transition-colors">
         Use local AI instead (connect Ollama now)
       </button>
     </div>
diff --git a/app/src/pages/onboarding/steps/ReferralApplyStep.tsx b/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
index d1baee8fe..a0f6dbe56 100644
--- a/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
+++ b/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
@@ -71,15 +71,19 @@ const ReferralApplyStep = ({ onNext, onApplied }: ReferralApplyStepProps) => {
   };
 
   return (
-    <div className="rounded-2xl border border-stone-200 bg-white p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
       <div className="text-center mb-6">
-        <h1 className="text-xl font-bold mb-2 text-stone-900">{t('onboarding.referral')}</h1>
-        <p className="text-stone-600 text-sm">{t('onboarding.referralDesc')}</p>
+        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
+          {t('onboarding.referral')}
+        </h1>
+        <p className="text-stone-600 dark:text-neutral-300 text-sm">
+          {t('onboarding.referralDesc')}
+        </p>
       </div>
 
       {success ? (
         <div className="text-center py-4">
-          <div className="w-12 h-12 bg-sage-50 rounded-full flex items-center justify-center mx-auto mb-3">
+          <div className="w-12 h-12 bg-sage-50 dark:bg-sage-500/10 rounded-full flex items-center justify-center mx-auto mb-3">
             <svg
               className="w-6 h-6 text-sage-500"
               fill="none"
@@ -93,7 +97,9 @@ const ReferralApplyStep = ({ onNext, onApplied }: ReferralApplyStepProps) => {
               />
             </svg>
           </div>
-          <p className="text-sage-600 font-medium text-sm">{t('common.success')}</p>
+          <p className="text-sage-600 dark:text-sage-300 font-medium text-sm">
+            {t('common.success')}
+          </p>
         </div>
       ) : (
         <>
@@ -104,7 +110,7 @@ const ReferralApplyStep = ({ onNext, onApplied }: ReferralApplyStepProps) => {
               onChange={e => setCode(e.target.value.toUpperCase())}
               onKeyDown={e => e.key === 'Enter' && void handleApply()}
               placeholder={t('rewards.referralCode')}
-              className="w-full px-4 py-3 bg-stone-50 border border-stone-200 rounded-xl text-center font-mono text-lg tracking-widest text-stone-900 placeholder:text-stone-400 placeholder:tracking-normal placeholder:font-sans placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all"
+              className="w-full px-4 py-3 bg-stone-50 dark:bg-neutral-800/60 border border-stone-200 dark:border-neutral-800 rounded-xl text-center font-mono text-lg tracking-widest text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 dark:text-neutral-500 placeholder:tracking-normal placeholder:font-sans placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all"
               disabled={isLoading}
             />
             {error ? <p className="text-coral-500 text-xs mt-2 text-center">{error}</p> : null}
@@ -115,7 +121,7 @@ const ReferralApplyStep = ({ onNext, onApplied }: ReferralApplyStepProps) => {
               type="button"
               onClick={onNext}
               disabled={isLoading}
-              className="flex-1 py-2.5 text-sm font-medium rounded-xl border border-stone-200 text-stone-500 hover:text-stone-700 hover:border-stone-300 transition-colors">
+              className="flex-1 py-2.5 text-sm font-medium rounded-xl border border-stone-200 dark:border-neutral-800 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 hover:border-stone-300 dark:border-neutral-700 transition-colors">
               {t('onboarding.skip')}
             </button>
             <button
diff --git a/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx b/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx
index 82efa0bb9..554a2e0cf 100644
--- a/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx
+++ b/app/src/pages/onboarding/steps/RuntimeChoiceStep.tsx
@@ -27,16 +27,18 @@ const ACCENT_CLASSES: Record<
   { selected: string; dot: string; badge: string; highlight: string }
 > = {
   sage: {
-    selected: '!border-sage-500 bg-sage-50 shadow-sm',
+    selected: '!border-sage-500 bg-sage-50 dark:bg-sage-500/10 shadow-sm',
     dot: 'bg-sage-500',
-    badge: 'bg-sage-500/10 text-sage-700',
-    highlight: 'border-sage-300 bg-sage-100 text-sage-800',
+    badge: 'bg-sage-500/10 text-sage-700 dark:text-sage-300',
+    highlight:
+      'border-sage-300 dark:border-sage-500/40 bg-sage-100 dark:bg-sage-500/20 text-sage-800 dark:text-sage-200',
   },
   primary: {
-    selected: '!border-primary-500 bg-primary-50 shadow-sm',
+    selected: '!border-primary-500 bg-primary-50 dark:bg-primary-500/15 shadow-sm',
     dot: 'bg-primary-500',
-    badge: 'bg-primary-500/10 text-primary-600',
-    highlight: 'border-primary-200 bg-primary-50 text-primary-700',
+    badge: 'bg-primary-500/10 text-primary-600 dark:text-primary-300',
+    highlight:
+      'border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300',
   },
 };
 
@@ -61,10 +63,10 @@ const ChoiceCard = ({
       className={`flex h-full w-full flex-col rounded-2xl border-2 p-5 text-left transition-colors focus:outline-none ${
         selected
           ? accentClasses.selected
-          : '!border-stone-200 bg-white hover:!border-stone-300 hover:bg-stone-50'
+          : '!border-stone-200 dark:!border-neutral-700 bg-white dark:bg-neutral-900 hover:!border-stone-300 dark:hover:!border-neutral-600 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
       }`}>
       <div className="flex items-start justify-between gap-3">
-        <h3 className="text-base font-semibold text-stone-900">{title}</h3>
+        <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{title}</h3>
         {badge ? (
           <span
             className={`rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${accentClasses.badge}`}>
@@ -72,10 +74,12 @@ const ChoiceCard = ({
           </span>
         ) : null}
       </div>
-      <p className="mt-1 text-xs text-stone-500">{tagline}</p>
+      <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">{tagline}</p>
       <ul className="mt-3 flex flex-1 flex-col gap-1.5">
         {features.map(f => (
-          <li key={f} className="flex items-start gap-2 text-xs text-stone-700">
+          <li
+            key={f}
+            className="flex items-start gap-2 text-xs text-stone-700 dark:text-neutral-200">
             <span
               aria-hidden
               className={`mt-1 inline-block h-1.5 w-1.5 flex-none rounded-full ${accentClasses.dot}`}
@@ -116,12 +120,12 @@ const RuntimeChoiceStep = ({ onNext }: RuntimeChoiceStepProps) => {
   return (
     <div
       data-testid="onboarding-runtime-choice-step"
-      className="rounded-2xl bg-white p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
       <div className="text-center">
-        <h1 className="text-2xl font-display text-stone-900 mb-2 leading-tight">
+        <h1 className="text-2xl font-display text-stone-900 dark:text-neutral-100 mb-2 leading-tight">
           {t('onboarding.runtimeChoice.title')}
         </h1>
-        <p className="text-stone-500 text-sm leading-relaxed">
+        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed">
           {t('onboarding.runtimeChoice.subtitle')}
         </p>
       </div>
diff --git a/app/src/pages/onboarding/steps/SkillsStep.tsx b/app/src/pages/onboarding/steps/SkillsStep.tsx
index 13b732bf9..10a4b9faf 100644
--- a/app/src/pages/onboarding/steps/SkillsStep.tsx
+++ b/app/src/pages/onboarding/steps/SkillsStep.tsx
@@ -56,15 +56,15 @@ function statusLabel(
 function statusColor(state: ReturnType<typeof deriveComposioState>): string {
   switch (state) {
     case 'connected':
-      return 'text-sage-600';
+      return 'text-sage-600 dark:text-sage-300';
     case 'pending':
-      return 'text-amber-600';
+      return 'text-amber-600 dark:text-amber-300';
     case 'expired':
-      return 'text-coral-600';
+      return 'text-coral-600 dark:text-coral-300';
     case 'error':
-      return 'text-coral-600';
+      return 'text-coral-600 dark:text-coral-300';
     default:
-      return 'text-stone-400';
+      return 'text-stone-400 dark:text-neutral-500';
   }
 }
 
@@ -99,20 +99,22 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
   };
 
   return (
-    <div className="rounded-2xl border border-stone-200 bg-white p-8 shadow-soft animate-fade-up">
+    <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-soft animate-fade-up">
       <div className="text-center mb-4">
-        <h1 className="text-xl font-bold mb-2 text-stone-900">{t('skills.connect')}</h1>
-        <p className="text-stone-600 text-sm">{t('skills.available')}</p>
+        <h1 className="text-xl font-bold mb-2 text-stone-900 dark:text-neutral-100">
+          {t('skills.connect')}
+        </h1>
+        <p className="text-stone-600 dark:text-neutral-300 text-sm">{t('skills.available')}</p>
       </div>
 
       <div className="mb-4 space-y-2">
         {composioError ? (
-          <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-center">
-            <p className="text-sm text-amber-700 mb-2">{t('common.error')}</p>
+          <div className="rounded-xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-4 text-center">
+            <p className="text-sm text-amber-700 dark:text-amber-300 mb-2">{t('common.error')}</p>
             <button
               type="button"
               onClick={() => void refreshComposio()}
-              className="text-xs font-medium text-amber-800 border border-amber-300 rounded-lg px-3 py-1 hover:bg-amber-100 transition-colors">
+              className="text-xs font-medium text-amber-800 border border-amber-300 rounded-lg px-3 py-1 hover:bg-amber-100 dark:bg-amber-500/20 transition-colors">
               {t('common.retry')}
             </button>
           </div>
@@ -121,14 +123,14 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
             type="button"
             onClick={() => setActiveToolkit(gmailMeta)}
             data-testid="onboarding-skills-gmail-button"
-            className="w-full flex items-center gap-3 rounded-xl border border-stone-100 bg-white p-3 transition-colors hover:bg-stone-50 text-left">
+            className="w-full flex items-center gap-3 rounded-xl border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3 transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60 text-left">
             <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center text-lg">
               {gmailMeta.icon}
             </div>
 
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <span className="truncate text-sm font-semibold text-stone-900">
+                <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
                   {gmailMeta.name}
                 </span>
                 {statusLabel(gmailState, t) && (
@@ -142,7 +144,7 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
                   </>
                 )}
               </div>
-              <p className="mt-0.5 line-clamp-1 text-xs leading-relaxed text-stone-500">
+              <p className="mt-0.5 line-clamp-1 text-xs leading-relaxed text-stone-500 dark:text-neutral-400">
                 {gmailMeta.description}
               </p>
             </div>
@@ -150,12 +152,12 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
             <span
               className={`flex-shrink-0 rounded-lg border px-3 py-1.5 text-[11px] font-medium transition-colors ${
                 gmailConnected
-                  ? 'border-sage-200 bg-sage-50 text-sage-700'
+                  ? 'border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 text-sage-700 dark:text-sage-300'
                   : gmailState === 'pending'
-                    ? 'border-amber-200 bg-amber-50 text-amber-700'
+                    ? 'border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300'
                     : gmailState === 'expired'
-                      ? 'border-coral-200 bg-coral-50 text-coral-700'
-                      : 'border-primary-200 bg-primary-50 text-primary-700'
+                      ? 'border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 text-coral-700 dark:text-coral-300'
+                      : 'border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300'
               }`}>
               {gmailConnected
                 ? t('skills.configure')
@@ -166,8 +168,8 @@ const SkillsStep = ({ onNext, onBack: _onBack }: SkillsStepProps) => {
           </button>
         )}
 
-        <div className="rounded-xl border border-stone-100 bg-stone-50 px-3 py-2.5 text-center">
-          <p className="text-xs text-stone-400">{t('skills.available')}</p>
+        <div className="rounded-xl border border-stone-100 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5 text-center">
+          <p className="text-xs text-stone-400 dark:text-neutral-500">{t('skills.available')}</p>
         </div>
       </div>
 
diff --git a/app/src/pages/onboarding/steps/WelcomeStep.tsx b/app/src/pages/onboarding/steps/WelcomeStep.tsx
index 7226e1ea4..e129b2c6a 100644
--- a/app/src/pages/onboarding/steps/WelcomeStep.tsx
+++ b/app/src/pages/onboarding/steps/WelcomeStep.tsx
@@ -11,13 +11,13 @@ const WelcomeStep = ({ onNext }: WelcomeStepProps) => {
   return (
     <div
       data-testid="onboarding-welcome-step"
-      className="rounded-2xl bg-white p-10 shadow-soft animate-fade-up">
+      className="rounded-2xl bg-white dark:bg-neutral-900 p-10 shadow-soft animate-fade-up">
       <div className="flex flex-col items-center text-center">
         <img src="/logo.png" alt="OpenHuman" className="w-20 h-20 rounded-2xl mb-5" />
-        <h1 className="text-3xl font-display text-stone-900 mb-3 leading-tight">
+        <h1 className="text-3xl font-display text-stone-900 dark:text-neutral-100 mb-3 leading-tight">
           {t('onboarding.welcome')}
         </h1>
-        <p className="text-stone-500 text-sm leading-relaxed max-w-sm">
+        <p className="text-stone-500 dark:text-neutral-400 text-sm leading-relaxed max-w-sm">
           {t('onboarding.welcomeDesc')}
         </p>
       </div>
diff --git a/app/src/providers/ThemeProvider.tsx b/app/src/providers/ThemeProvider.tsx
new file mode 100644
index 000000000..2f94e1dab
--- /dev/null
+++ b/app/src/providers/ThemeProvider.tsx
@@ -0,0 +1,48 @@
+import { ReactNode, useEffect } from 'react';
+
+import { useAppSelector } from '../store/hooks';
+import { resolveTheme, type ThemeMode } from '../store/themeSlice';
+
+/**
+ * Syncs the Redux `theme.mode` slice to the `<html>` element's class list so
+ * Tailwind's `darkMode: 'class'` and the `:root.dark` CSS variable block in
+ * theme.css activate together.
+ *
+ * Mode = `system` also subscribes to `prefers-color-scheme` so OS-level theme
+ * flips propagate live without a reload.
+ */
+const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const mode = useAppSelector(state => state.theme.mode) as ThemeMode;
+
+  useEffect(() => {
+    const apply = () => {
+      const root = document.documentElement;
+      const resolved = resolveTheme(mode);
+      if (resolved === 'dark') {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+      root.style.colorScheme = resolved;
+    };
+
+    apply();
+
+    if (mode !== 'system') return;
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const listener = () => apply();
+    // Safari < 14 uses addListener/removeListener (the deprecated API). Guard
+    // for both so we don't ship a broken sync on older webviews.
+    if (mq.addEventListener) {
+      mq.addEventListener('change', listener);
+      return () => mq.removeEventListener('change', listener);
+    }
+    mq.addListener(listener);
+    return () => mq.removeListener(listener);
+  }, [mode]);
+
+  return <>{children}</>;
+};
+
+export default ThemeProvider;
diff --git a/app/src/store/index.ts b/app/src/store/index.ts
index 76f8f7f94..62f537774 100644
--- a/app/src/store/index.ts
+++ b/app/src/store/index.ts
@@ -23,6 +23,7 @@ import mascotReducer from './mascotSlice';
 import notificationReducer from './notificationSlice';
 import providerSurfacesReducer from './providerSurfaceSlice';
 import socketReducer from './socketSlice';
+import themeReducer from './themeSlice';
 import threadReducer from './threadSlice';
 import { userScopedStorage } from './userScopedStorage';
 
@@ -78,6 +79,12 @@ const persistedCoreModeReducer = persistReducer(coreModePersistConfig, coreModeR
 const localePersistConfig = { key: 'locale', storage: localStorageAdapter, whitelist: ['current'] };
 const persistedLocaleReducer = persistReducer(localePersistConfig, localeReducer);
 
+// Theme preference is pre-login and applies to the whole desktop app
+// (light/dark/system). Persist via plain localStorage so it survives user
+// switches like coreMode does.
+const themePersistConfig = { key: 'theme', storage: localStorageAdapter, whitelist: ['mode'] };
+const persistedThemeReducer = persistReducer(themePersistConfig, themeReducer);
+
 const channelConnectionsPersistConfig = {
   key: 'channelConnections',
   storage,
@@ -133,6 +140,7 @@ export const store = configureStore({
     coreMode: persistedCoreModeReducer,
     locale: persistedLocaleReducer,
     mascot: persistedMascotReducer,
+    theme: persistedThemeReducer,
   },
   middleware: getDefaultMiddleware => {
     const middleware = getDefaultMiddleware({
diff --git a/app/src/store/themeSlice.ts b/app/src/store/themeSlice.ts
new file mode 100644
index 000000000..9759c0bb7
--- /dev/null
+++ b/app/src/store/themeSlice.ts
@@ -0,0 +1,39 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeState {
+  mode: ThemeMode;
+}
+
+const initialState: ThemeState = { mode: 'system' };
+
+const themeSlice = createSlice({
+  name: 'theme',
+  initialState,
+  reducers: {
+    setThemeMode(state, action: PayloadAction<ThemeMode>) {
+      state.mode = action.payload;
+    },
+  },
+});
+
+export const { setThemeMode } = themeSlice.actions;
+export default themeSlice.reducer;
+
+/**
+ * Resolves a `ThemeMode` to the concrete `light` or `dark` value that should
+ * be applied to `<html>`. `system` consults `prefers-color-scheme`; in non-DOM
+ * contexts (SSR, tests without matchMedia) it falls back to light.
+ */
+export function resolveTheme(mode: ThemeMode): 'light' | 'dark' {
+  if (mode !== 'system') return mode;
+  try {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+  } catch {
+    // matchMedia unavailable
+  }
+  return 'light';
+}
diff --git a/app/src/styles/theme.css b/app/src/styles/theme.css
index 6fbb07e54..bf77a5e7e 100644
--- a/app/src/styles/theme.css
+++ b/app/src/styles/theme.css
@@ -17,7 +17,8 @@
    Root Variables & Theme Configuration
    ============================================ */
 :root {
-  /* Semantic color tokens */
+  /* Semantic color tokens — these initial defaults are overridden by the
+     Light Mode block at the bottom of this file. */
   --color-background: theme('colors.canvas.50');
   --color-surface: theme('colors.white');
   --color-surface-elevated: theme('colors.canvas.100');
@@ -568,4 +569,171 @@ body::before {
   --color-text-secondary: #525252;
   --color-text-tertiary: #737373;
   --color-text-muted: #a3a3a3;
+
+  --color-hover: #eff6ff;
+  --color-active: #dbeafe;
+  --color-focus: #2f6ef4;
+
+  --color-success: #34c759;
+  --color-warning: #e8a728;
+  --color-error: #ef4444;
+  --color-info: #2f6ef4;
+
+  /* Shadow tint used by elevated surfaces. Dark mode replaces this with a
+     softer alpha so layered cards don't turn into black holes. */
+  --shadow-tint: 0, 0, 0;
+}
+
+/* ============================================
+   Dark Mode — applied when <html class="dark">
+   ============================================ */
+:root.dark {
+  /* Page bg is darker than card/surface so elevated content (cards, menus,
+     panels) stands out against it. neutral-950 (#0a0a0a) for the page,
+     neutral-900 (#171717) for cards gives ~9% lightness delta — visible
+     but calm. */
+  --color-background: #000000;
+  --color-surface: #171717;
+  --color-surface-elevated: #1f1f1f;
+  --color-border: #2d2d2d;
+  --color-border-subtle: #1f1f1f;
+
+  --color-text-primary: #f5f5f5;
+  --color-text-secondary: #a3a3a3;
+  --color-text-tertiary: #737373;
+  --color-text-muted: #525252;
+
+  --color-hover: #1e293b;
+  --color-active: #1e3a8a;
+  --color-focus: #60a5fa;
+
+  --color-success: #4ade80;
+  --color-warning: #fbbf24;
+  --color-error: #f87171;
+  --color-info: #60a5fa;
+
+  --shadow-tint: 0, 0, 0;
+}
+
+/* Dark-mode overrides for component classes that hardcode light colors.
+   Keep these scoped — the Tailwind utility classes used in TSX still need
+   per-call `dark:` variants. This block only fixes the .btn / .card / .input
+   component shortcuts declared above. */
+:root.dark .card-elevated,
+:root.dark .card-interactive,
+:root.dark .market-card,
+:root.dark .chart-container {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+:root.dark .card-interactive:hover {
+  background: var(--color-hover);
+  border-color: var(--color-focus);
+}
+
+:root.dark .input-elevated {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+:root.dark .input-elevated::placeholder {
+  color: var(--color-text-muted);
+}
+
+:root.dark .input-elevated:focus {
+  border-color: var(--color-focus);
+  box-shadow:
+    0 0 0 3px rgba(96, 165, 250, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+:root.dark .nav-item-premium {
+  color: var(--color-text-secondary);
+}
+
+:root.dark .nav-item-premium:hover {
+  color: var(--color-text-primary);
+  background: var(--color-hover);
+}
+
+:root.dark .nav-item-premium.active {
+  color: var(--color-focus);
+  background: rgba(96, 165, 250, 0.12);
+}
+
+:root.dark .nav-item-premium.active::before {
+  background: var(--color-focus);
+}
+
+:root.dark .btn-glass {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: var(--color-text-primary);
+}
+
+:root.dark .btn-glass:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+:root.dark .btn-outline {
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+:root.dark .btn-outline::before {
+  background: rgba(96, 165, 250, 0.1);
+}
+
+:root.dark .btn-outline:hover {
+  border-color: var(--color-focus);
+  color: var(--color-focus);
+}
+
+:root.dark .skeleton {
+  background: #262626;
+}
+
+:root.dark .skeleton::after {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.06) 50%,
+    transparent 100%
+  );
+}
+
+:root.dark .scrollbar-elegant {
+  scrollbar-color: #404040 transparent;
+}
+
+:root.dark .scrollbar-elegant::-webkit-scrollbar-thumb {
+  background: #404040;
+}
+
+:root.dark .scrollbar-elegant::-webkit-scrollbar-thumb:hover {
+  background: #525252;
+}
+
+:root.dark .chart-grid {
+  background-image:
+    linear-gradient(0deg, #262626 1px, transparent 1px),
+    linear-gradient(90deg, #262626 1px, transparent 1px);
+}
+
+:root.dark .glass-surface {
+  background: rgba(23, 23, 23, 0.7);
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+/* Soften the noise overlay in dark mode — at full strength on a near-black
+   background the grain looks like dead pixels. */
+:root.dark body::before {
+  opacity: 0.15;
 }