diff --git a/gitnexus-web/src/components/RightPanel.tsx b/gitnexus-web/src/components/RightPanel.tsx
index 3e063a168..5899eca09 100644
--- a/gitnexus-web/src/components/RightPanel.tsx
+++ b/gitnexus-web/src/components/RightPanel.tsx
@@ -269,7 +269,7 @@ export const RightPanel = () => {
           <div className="flex items-center gap-2.5 border-b border-border-subtle bg-elevated/50 px-4 py-3">
             <div className="ml-auto flex items-center gap-2">
               {!isAgentReady && (
-                <span className="rounded-full border border-amber-500/30 bg-amber-500/15 px-2 py-1 text-[11px] text-amber-300">
+                <span className="rounded-full border border-amber-500/30 bg-amber-500/15 px-2 py-1 text-[11px] text-amber-700 dark:text-amber-300">
                   Configure AI
                 </span>
               )}
@@ -283,7 +283,7 @@ export const RightPanel = () => {
 
           {/* Status / errors */}
           {agentError && (
-            <div className="flex items-center gap-2 border-b border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
+            <div className="flex items-center gap-2 border-b border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-700 dark:text-rose-100">
               <AlertTriangle className="h-4 w-4" />
               <span>{agentError}</span>
             </div>
@@ -445,7 +445,7 @@ export const RightPanel = () => {
               )}
             </div>
             {!isAgentReady && !isAgentInitializing && (
-              <div className="mt-2 flex items-center gap-2 text-xs text-amber-200">
+              <div className="mt-2 flex items-center gap-2 text-xs text-amber-700 dark:text-amber-200">
                 <AlertTriangle className="h-3.5 w-3.5" />
                 <span>
                   {isProviderConfigured()
diff --git a/gitnexus-web/src/components/SettingsPanel.tsx b/gitnexus-web/src/components/SettingsPanel.tsx
index eafdb5210..1bc8e19b5 100644
--- a/gitnexus-web/src/components/SettingsPanel.tsx
+++ b/gitnexus-web/src/components/SettingsPanel.tsx
@@ -444,7 +444,7 @@ export const SettingsPanel = ({
             </div>
           </div>
 
-          <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200">
+          <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-800 dark:text-amber-200">
             API keys are stored in session storage and will be cleared when you close this tab.
           </div>
 
diff --git a/gitnexus-web/src/index.css b/gitnexus-web/src/index.css
index 67962d776..f1de1c2b4 100644
--- a/gitnexus-web/src/index.css
+++ b/gitnexus-web/src/index.css
@@ -1,5 +1,11 @@
 @import 'tailwindcss';
 
+/* `dark:` modifier follows our explicit theme attribute, not the OS
+   media query. The boot script and `useTheme` hook always write a
+   resolved value (`light` | `dark`) to `<html data-theme>`, so this
+   keeps the variant consistent with the runtime preference. */
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
 /* ═══════════════════════════════════════════════════════════════
    TAILWIND V4 THEME CONFIGURATION
 ═══════════════════════════════════════════════════════════════ */