fix: dark-mode form controls and gold-button contrast (#510)

Three contrast issues surfaced by reviewing the settings modal in dark
mode: native checkboxes rendered as white boxes (no color-scheme set),
gold buttons used near-white text at 3.3:1, and helper/Cancel text at
neutral-6 sat below AA. Adds color-scheme per theme, a semantic
on-primary token (dark text on gold fills in both themes), and bumps
small text to neutral-5.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: alari76

src/components/AddWorkflowModal.tsx

@@ -535,7 +535,7 @@ export function AddWorkflowModal({ token, onClose, onAdd }: Props) {
               <button
                 type="button"
                 onClick={onClose}
-                className="rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-neutral-1 hover:bg-primary-7 transition-colors"
+                className="rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-on-primary hover:bg-primary-7 transition-colors"
               >
                 Done
               </button>
@@ -611,7 +611,7 @@ export function AddWorkflowModal({ token, onClose, onAdd }: Props) {
                   type="button"
                   onClick={handleNext}
                   disabled={!canNext()}
-                  className="flex items-center gap-1.5 rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-neutral-1 hover:bg-primary-7 disabled:opacity-40 transition-colors"
+                  className="flex items-center gap-1.5 rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-on-primary hover:bg-primary-7 disabled:opacity-40 transition-colors"
                 >
                   Next
                   <IconArrowRight size={14} stroke={2} />
@@ -621,7 +621,7 @@ export function AddWorkflowModal({ token, onClose, onAdd }: Props) {
                   type="button"
                   onClick={handleSubmit}
                   disabled={saving}
-                  className="flex items-center gap-1.5 rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-neutral-1 hover:bg-primary-7 disabled:opacity-50 transition-colors"
+                  className="flex items-center gap-1.5 rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-on-primary hover:bg-primary-7 disabled:opacity-50 transition-colors"
                 >
                   {saving ? (
                     <>

src/components/EditWorkflowModal.tsx

@@ -248,7 +248,7 @@ export function EditWorkflowModal({ token, repo, onClose, onSave }: Props) {
             <button
               type="submit"
               disabled={saving}
-              className="flex-1 rounded-md bg-primary-8 py-2 text-[14px] font-medium text-neutral-1 hover:bg-primary-7 disabled:opacity-50 transition-colors flex items-center justify-center gap-1.5"
+              className="flex-1 rounded-md bg-primary-8 py-2 text-[14px] font-medium text-on-primary hover:bg-primary-7 disabled:opacity-50 transition-colors flex items-center justify-center gap-1.5"
             >
               {saving ? (
                 <>

src/components/FolderPicker.tsx

@@ -142,7 +142,7 @@ export function FolderPicker({ value, token, placeholder = '~/repos (default)',
 
       {/* Help text */}
       {helpText && !error && !browseError && (
-        <p className="mt-1 text-[12px] text-neutral-6">{helpText}</p>
+        <p className="mt-1 text-[12px] text-neutral-5">{helpText}</p>
       )}
 
       {/* Directory browser dropdown */}
@@ -174,7 +174,7 @@ export function FolderPicker({ value, token, placeholder = '~/repos (default)',
           {/* Directory list */}
           <div className="max-h-48 overflow-y-auto py-1">
             {dirs.length === 0 ? (
-              <p className="px-3 py-2 text-[12px] text-neutral-6">No subdirectories</p>
+              <p className="px-3 py-2 text-[12px] text-neutral-5">No subdirectories</p>
             ) : (
               dirs.map(dir => (
                 <button

src/components/InputBar.tsx

@@ -54,7 +54,7 @@ function SendButton({ onClick, disabled, hasContent, size = 16, rounded = 'round
 }) {
   const activeClass = accent
     ? 'bg-accent-7 text-neutral-1 hover:bg-accent-6'
-    : 'bg-primary-8 text-neutral-1 hover:bg-primary-7'
+    : 'bg-primary-8 text-on-primary hover:bg-primary-7'
   return (
     <button
       onClick={onClick}

src/components/SessionContent.tsx

@@ -170,7 +170,7 @@ export function SessionContent({
         {/* Diff view button — top-right corner, visible when files have been changed */}
         {hasFileChanges && !diffPanelOpen && (
           <button
-            className="absolute top-3 right-3 z-10 flex items-center gap-1.5 rounded-lg bg-primary-8 px-3 py-1.5 text-[13px] font-medium text-neutral-1 shadow-lg backdrop-blur-sm transition-colors hover:bg-primary-7"
+            className="absolute top-3 right-3 z-10 flex items-center gap-1.5 rounded-lg bg-primary-8 px-3 py-1.5 text-[13px] font-medium text-on-primary shadow-lg backdrop-blur-sm transition-colors hover:bg-primary-7"
             onClick={onOpenDiffPanel}
             title="Review code changes (Ctrl+Shift+D)"
           >

src/components/Settings.tsx

@@ -196,7 +196,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
               <button
                 onClick={handleVerify}
                 disabled={verifying || !tokenInput.trim()}
-                className="rounded bg-primary-8 px-3 py-2 text-[15px] font-medium text-neutral-1 hover:bg-primary-7 disabled:opacity-50"
+                className="rounded bg-primary-8 px-3 py-2 text-[15px] font-medium text-on-primary hover:bg-primary-7 disabled:opacity-50"
               >
                 {verifying ? '...' : 'Verify'}
               </button>
@@ -248,7 +248,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                     className="w-40 rounded border border-neutral-9 bg-neutral-10 px-3 py-2 text-[15px] text-neutral-2 outline-none focus:border-primary-7"
                   />
                 </div>
-                <p className="mt-1 text-[13px] text-neutral-6">Display name for the orchestrator agent in the sidebar and chat</p>
+                <p className="mt-1 text-[13px] text-neutral-5">Display name for the orchestrator agent in the sidebar and chat</p>
               </div>
 
               <div className="border-t border-neutral-9/40" />
@@ -263,7 +263,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                       onClick={() => onUpdate({ theme: 'dark' })}
                       className={`rounded px-4 py-1.5 text-[15px] font-medium transition-colors ${
                         settings.theme !== 'light'
-                          ? 'bg-primary-8 text-neutral-1'
+                          ? 'bg-primary-8 text-on-primary'
                           : 'border border-neutral-9 bg-neutral-10 text-neutral-3 hover:bg-neutral-9'
                       }`}
                     >
@@ -273,7 +273,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                       onClick={() => onUpdate({ theme: 'light' })}
                       className={`rounded px-4 py-1.5 text-[15px] font-medium transition-colors ${
                         settings.theme === 'light'
-                          ? 'bg-primary-8 text-neutral-1'
+                          ? 'bg-primary-8 text-on-primary'
                           : 'border border-neutral-9 bg-neutral-10 text-neutral-3 hover:bg-neutral-9'
                       }`}
                     >
@@ -305,7 +305,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                     />
                     <span className="text-[15px] text-neutral-5">days</span>
                   </div>
-                  <p className="mt-1 text-[13px] text-neutral-6">Auto-delete archived sessions older than this</p>
+                  <p className="mt-1 text-[13px] text-neutral-5">Auto-delete archived sessions older than this</p>
                 </div>
               </div>
 
@@ -328,7 +328,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                     Queue messages across sessions
                   </span>
                 </label>
-                <p className="mt-1 ml-[26px] text-[13px] text-neutral-6">
+                <p className="mt-1 ml-[26px] text-[13px] text-neutral-5">
                   When enabled, messages sent while another session for the same repo is processing will be queued and sent automatically when it finishes.
                 </p>
               </div>
@@ -362,7 +362,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                       Auto-enable worktrees for new sessions
                     </span>
                   </label>
-                  <p className="mt-1 ml-[26px] text-[13px] text-neutral-6">When enabled, new sessions will automatically start in a git worktree</p>
+                  <p className="mt-1 ml-[26px] text-[13px] text-neutral-5">When enabled, new sessions will automatically start in a git worktree</p>
                 </div>
 
                 <div>
@@ -380,7 +380,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                       className="w-40 rounded border border-neutral-9 bg-neutral-10 px-3 py-2 text-[15px] text-neutral-2 outline-none focus:border-primary-7"
                     />
                   </div>
-                  <p className="mt-1 text-[13px] text-neutral-6">Prefix for worktree branch names (e.g. wt/ → wt/abc12345)</p>
+                  <p className="mt-1 text-[13px] text-neutral-5">Prefix for worktree branch names (e.g. wt/ → wt/abc12345)</p>
                 </div>
               </div>
 
@@ -396,7 +396,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                   <>
                     <IconCircleCheckFilled size={16} className="text-success-6" />
                     <span className="text-[15px] text-success-5 font-medium">Active</span>
-                    <span className="text-[13px] text-neutral-6">
+                    <span className="text-[13px] text-neutral-5">
                       &middot; max {webhookConfig.maxConcurrentSessions} concurrent sessions
                     </span>
                   </>
@@ -407,7 +407,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                   </>
                 )
               ) : (
-                <span className="text-[13px] text-neutral-6">Loading...</span>
+                <span className="text-[13px] text-neutral-5">Loading...</span>
               )}
             </div>
 
@@ -456,7 +456,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                     }
                   }}
                   disabled={!healthRepo.trim() || healthLoading}
-                  className="flex items-center gap-1.5 rounded bg-primary-8 px-3 py-2 text-[13px] font-medium text-neutral-1 hover:bg-primary-7 disabled:opacity-50 transition-colors"
+                  className="flex items-center gap-1.5 rounded bg-primary-8 px-3 py-2 text-[13px] font-medium text-on-primary hover:bg-primary-7 disabled:opacity-50 transition-colors"
                 >
                   {healthLoading ? (
                     <IconRefresh size={14} className="animate-spin" />
@@ -530,7 +530,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                           setWizardStep('idle')
                         }
                       }}
-                      className="flex items-center gap-1.5 rounded bg-primary-8 px-3 py-2 text-[13px] font-medium text-neutral-1 hover:bg-primary-7 transition-colors mt-2"
+                      className="flex items-center gap-1.5 rounded bg-primary-8 px-3 py-2 text-[13px] font-medium text-on-primary hover:bg-primary-7 transition-colors mt-2"
                     >
                       <IconWand size={14} />
                       Set up automatically
@@ -617,7 +617,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                               setWizardStep('preview')
                             }
                           }}
-                          className="rounded bg-primary-8 px-3 py-1.5 text-[13px] font-medium text-neutral-1 hover:bg-primary-7 transition-colors"
+                          className="rounded bg-primary-8 px-3 py-1.5 text-[13px] font-medium text-on-primary hover:bg-primary-7 transition-colors"
                         >
                           Apply
                         </button>
@@ -706,7 +706,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
                     Under <strong className="text-neutral-3">&ldquo;Which events?&rdquo;</strong>, select <strong className="text-neutral-3">Let me select individual events</strong> and check <strong className="text-neutral-3">Workflow runs</strong> and <strong className="text-neutral-3">Pull requests</strong>
                   </span>
                 </div>
-                <p className="text-[13px] text-neutral-6 pt-1 border-t border-neutral-9/50">
+                <p className="text-[13px] text-neutral-5 pt-1 border-t border-neutral-9/50">
                   Webhook events will automatically spawn <IconRobot size={12} className="inline -mt-0.5" /> sessions for PR reviews and CI failure analysis.
                 </p>
               </div>
@@ -739,7 +739,7 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
 
             {/* Disabled hint */}
             {webhookConfig && !webhookConfig.enabled && !healthResult && (
-              <p className="mt-3 text-[13px] text-neutral-6">
+              <p className="mt-3 text-[13px] text-neutral-5">
                 Set <code className="bg-neutral-9/50 px-1 rounded text-neutral-4">GITHUB_WEBHOOK_ENABLED=true</code> and <code className="bg-neutral-9/50 px-1 rounded text-neutral-4">GITHUB_WEBHOOK_SECRET</code> on the server to enable.
               </p>
             )}
@@ -757,15 +757,15 @@ export function Settings({ open, onClose, settings, onUpdate, isMobile = false,
             {settings.token && (
               <button
                 onClick={onClose}
-                className="rounded px-4 py-2 text-[15px] text-neutral-6 hover:text-neutral-2"
+                className="rounded px-4 py-2 text-[15px] text-neutral-5 hover:text-neutral-2"
               >
                 Cancel
               </button>
             )}
             <button
               onClick={handleSave}
               disabled={!tokenInput.trim()}
-              className="rounded bg-primary-8 px-4 py-2 text-[15px] font-medium text-neutral-1 hover:bg-primary-7 disabled:opacity-50"
+              className="rounded bg-primary-8 px-4 py-2 text-[15px] font-medium text-on-primary hover:bg-primary-7 disabled:opacity-50"
             >
               Save
             </button>

src/components/WorkflowsView.tsx

@@ -128,7 +128,7 @@ export function WorkflowsView({ token, onNavigateToSession }: Props) {
         <div className="flex items-center gap-1.5">
           <button
             onClick={() => setShowAddForm(true)}
-            className="flex items-center gap-1.5 rounded-md bg-primary-8 px-3 py-1.5 text-[15px] font-medium text-neutral-1 hover:bg-primary-7 transition-colors"
+            className="flex items-center gap-1.5 rounded-md bg-primary-8 px-3 py-1.5 text-[15px] font-medium text-on-primary hover:bg-primary-7 transition-colors"
           >
             <IconPlus size={14} stroke={2} />
             New Workflow
@@ -156,7 +156,7 @@ export function WorkflowsView({ token, onNavigateToSession }: Props) {
             </div>
             <button
               onClick={() => setShowAddForm(true)}
-              className="mt-4 inline-flex items-center gap-1.5 rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-neutral-1 hover:bg-primary-7 transition-colors"
+              className="mt-4 inline-flex items-center gap-1.5 rounded-md bg-primary-8 px-4 py-2 text-[15px] font-medium text-on-primary hover:bg-primary-7 transition-colors"
             >
               <IconPlus size={14} stroke={2} />
               Create your first workflow

src/index.css

@@ -116,6 +116,7 @@
   --color-ink: var(--color-neutral-2);            /* primary text */
   --color-ink-muted: var(--color-neutral-5);      /* secondary text */
   --color-ink-faint: var(--color-neutral-6);      /* de-emphasized metadata */
+  --color-on-primary: var(--color-primary-12);    /* text on gold (primary-8) fills */
 }
 
 /* Terminal / chat area — warm gray palette.
@@ -255,6 +256,8 @@
   --color-primary-10: #fcedcc;
   --color-primary-11: #fef3dc;
   --color-primary-12: #fef8ec;
+  /* The light scale is inverted, so "dark text on gold" is primary-1 here */
+  --color-on-primary: var(--color-primary-1);
 
   /* Secondary (terracotta) — inverted */
   --color-secondary-1:  #321d14;
@@ -515,6 +518,16 @@
   --color-neutral-6: #8a8a8a;
 }
 
+/* Tell the browser which scheme native UI (checkboxes, scrollbars, number
+   spinners, pickers) should use — without this, unchecked checkboxes render
+   as stark white boxes in dark mode. */
+:root {
+  color-scheme: dark;
+}
+[data-theme="light"] {
+  color-scheme: light;
+}
+
 html, body, #root {
   height: 100%;
   margin: 0;