feat(ui): add dark mode support for server dashboard (#450)

* feat(ui): add dark mode support with slate palette

- Add Tailwind CSS 4 dark variant (class-based via .dark toggle)
- Add system preference detection + localStorage persistence
- Add 🌙/☀️ toggle button in nav bar
- Apply dark: variants to all 14 components/pages
- Configure Recharts theme for dark mode (axis stroke, tooltip style)
- Use slate palette: slate-950 bg, slate-900 cards, slate-800 borders

Lint, typecheck, build, and all 11 tests pass.

* fix: dark mode a11y and visual polish

- Fix invisible checkmark in All Caught Up (add text-green-600/dark:text-green-400)
- Fix login page missing dark mode (add ThemeInitializer to App.tsx)
- Replace unicode toggle with animated switch + icon labels

* fix: address CodeRabbit review — deduplicate, simplify init, fix Recharts colors

- Extract confidenceColor to shared utils.ts, remove duplicate from KnowledgeUnitModal and ReviewCard
- Remove first useEffect in Layout; use lazy useState initializer for dark mode
- Make Recharts colors (axis, tooltip, legend) respond to current theme

* fix: address PR review feedback — useLayoutEffect, localStorage guard, a11y, cleanup

* fix: eliminate race condition — ThemeInitializer handles init, Layout handles toggle only

* fix(ReviewCard): add missing dark-mode text variant to neutral action-badge style

* fix(Layout): guard localStorage.setItem in toggle handler against blocked-storage contexts

* refactor(DashboardPage): extract useIsDark to shared hook under hooks/

* style(frontend): apply Biome formatting to satisfy CI lint

Biome reformats these files (import ordering and JSX line wrapping); the
committed versions were unformatted, which fails the CI lint check
(scripts/lint-frontend.sh runs git diff --exit-code under CI). No behavior
change.

* fix(Layout): seed dark-mode toggle state from the applied theme

Layout initialised its dark state to false regardless of the theme the
ThemeInitializer had already applied from localStorage or the system
preference. For users defaulting to dark, the toggle rendered the light
state and the first click only re-applied the already-present class, so it
appeared to do nothing. Seed the state from the document element's dark
class so the control reflects the active theme on first paint.

* feat(Layout): replace emoji toggle with icon button and add user menu

Swap the emoji-and-pill dark-mode switch for a single Heroicons sun/moon
icon button, and move the username and Logout into a dropdown menu so the
top-right controls read as two clear elements rather than a loose cluster.
The menu closes on outside click and Escape. Focus rings use focus-visible
so they appear on keyboard navigation but not after a mouse click.

---------

Co-authored-by: Peter Wilson <peter@mozilla.ai>

Author: concertypin

server/frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { useLayoutEffect } from "react"
 import { BrowserRouter, Navigate, Route, Routes } from "react-router"
 import { AuthProvider, useAuth } from "./auth"
 import { Layout } from "./components/Layout"
@@ -33,11 +34,32 @@ function AppRoutes() {
   )
 }
 
+function ThemeInitializer({ children }: { children: React.ReactNode }) {
+  useLayoutEffect(() => {
+    try {
+      const stored = localStorage.getItem("cq-dark-mode")
+      const dark =
+        stored !== null
+          ? stored === "true"
+          : window.matchMedia("(prefers-color-scheme: dark)").matches
+      document.documentElement.classList.toggle("dark", dark)
+    } catch {
+      // localStorage blocked (privacy mode, embedded context)
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.documentElement.classList.add("dark")
+      }
+    }
+  }, [])
+  return <>{children}</>
+}
+
 export default function App() {
   return (
     <BrowserRouter>
       <AuthProvider>
-        <AppRoutes />
+        <ThemeInitializer>
+          <AppRoutes />
+        </ThemeInitializer>
       </AuthProvider>
     </BrowserRouter>
   )

server/frontend/src/components/ConfidenceBadge.tsx

@@ -1,8 +1,10 @@
 export function ConfidenceBadge({ confidence }: { confidence: number }) {
   return (
-    <span className="text-sm text-gray-500">
+    <span className="text-sm text-gray-500 dark:text-slate-400">
       Confidence:{" "}
-      <strong className="text-gray-800">{confidence.toFixed(2)}</strong>
+      <strong className="text-gray-800 dark:text-slate-200">
+        {confidence.toFixed(2)}
+      </strong>
     </span>
   )
 }

server/frontend/src/components/DomainTags.tsx

@@ -1,10 +1,12 @@
 import type { Selection } from "../types"
 
 const TAG_STYLES: Record<string, string> = {
-  neutral: "bg-indigo-100 text-indigo-700",
-  approve: "bg-green-100 text-green-700",
-  reject: "bg-red-100 text-red-700",
-  skip: "bg-slate-100 text-slate-700",
+  neutral:
+    "bg-indigo-100 dark:bg-indigo-500/20 text-indigo-700 dark:text-indigo-300",
+  approve:
+    "bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300",
+  reject: "bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-300",
+  skip: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
 }
 
 interface Props {

server/frontend/src/components/DragIndicators.tsx

@@ -38,7 +38,7 @@ export function DragIndicators({ drag }: Props) {
         >
           {INDICATORS.approve.symbol}
         </div>
-        <span className="text-xs font-semibold text-green-600">
+        <span className="text-xs font-semibold text-green-600 dark:text-green-400">
           {INDICATORS.approve.label}
         </span>
       </div>
@@ -56,7 +56,7 @@ export function DragIndicators({ drag }: Props) {
         >
           {INDICATORS.reject.symbol}
         </div>
-        <span className="text-xs font-semibold text-red-600">
+        <span className="text-xs font-semibold text-red-600 dark:text-red-400">
           {INDICATORS.reject.label}
         </span>
       </div>
@@ -74,7 +74,7 @@ export function DragIndicators({ drag }: Props) {
         >
           {INDICATORS.skip.symbol}
         </div>
-        <span className="text-xs font-semibold text-slate-600">
+        <span className="text-xs font-semibold text-slate-600 dark:text-slate-400">
           {INDICATORS.skip.label}
         </span>
       </div>
@@ -92,7 +92,7 @@ export function DragIndicators({ drag }: Props) {
         >
           {INDICATORS.skip.symbol}
         </div>
-        <span className="text-xs font-semibold text-slate-600">
+        <span className="text-xs font-semibold text-slate-600 dark:text-slate-400">
           {INDICATORS.skip.label}
         </span>
       </div>

server/frontend/src/components/FilteredListModal.tsx

@@ -78,27 +78,27 @@ export function FilteredListModal({ filter, onClose, onSelectUnit }: Props) {
         tabIndex={-1}
         aria-hidden="true"
         onClick={onClose}
-        className="absolute inset-0 bg-black/40 cursor-default"
+        className="absolute inset-0 bg-black/40 dark:bg-black/60 cursor-default"
       />
       <div
         ref={dialogRef}
         role="dialog"
         aria-modal="true"
         aria-labelledby={MODAL_TITLE_ID}
         tabIndex={-1}
-        className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col outline-none"
+        className="relative bg-white dark:bg-slate-900 rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col outline-none"
       >
-        <div className="flex items-center justify-between p-4 border-b border-gray-200">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-slate-800">
           <h2
             id={MODAL_TITLE_ID}
-            className="text-lg font-semibold text-gray-900"
+            className="text-lg font-semibold text-gray-900 dark:text-slate-100"
           >
             {filter.title}
           </h2>
           <button
             type="button"
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 text-xl leading-none"
+            className="text-gray-400 hover:text-gray-600 dark:text-slate-400 dark:hover:text-slate-200 text-xl leading-none"
             aria-label="Close"
           >
             &times;
@@ -107,22 +107,24 @@ export function FilteredListModal({ filter, onClose, onSelectUnit }: Props) {
 
         <div className="flex-1 overflow-y-auto p-4">
           {error && (
-            <p className="text-red-600 text-sm text-center py-4">{error}</p>
+            <p className="text-red-600 dark:text-red-400 text-sm text-center py-4">
+              {error}
+            </p>
           )}
 
           {!items && !error && (
             <div className="space-y-3">
               {[1, 2, 3].map((i) => (
                 <div
                   key={i}
-                  className="h-16 animate-pulse bg-gray-100 rounded-lg"
+                  className="h-16 animate-pulse bg-gray-100 dark:bg-slate-800 rounded-lg"
                 />
               ))}
             </div>
           )}
 
           {items && items.length === 0 && (
-            <p className="text-gray-400 text-sm text-center py-8">
+            <p className="text-gray-400 dark:text-slate-500 text-sm text-center py-8">
               No knowledge units found.
             </p>
           )}
@@ -133,18 +135,18 @@ export function FilteredListModal({ filter, onClose, onSelectUnit }: Props) {
                 <button
                   type="button"
                   key={item.knowledge_unit.id}
-                  className="w-full text-left p-3 rounded-lg border border-gray-200 hover:border-indigo-300 hover:bg-indigo-50/50 transition-colors"
+                  className="w-full text-left p-3 rounded-lg border border-gray-200 dark:border-slate-800 hover:border-indigo-300 dark:hover:border-indigo-600 hover:bg-indigo-50/50 dark:hover:bg-indigo-950/30 transition-colors"
                   onClick={() => onSelectUnit(item.knowledge_unit.id)}
                 >
                   <div className="flex items-center gap-2 mb-1">
                     <StatusBadge status={item.status} />
-                    <span className="text-sm font-medium text-gray-900 truncate">
+                    <span className="text-sm font-medium text-gray-900 dark:text-slate-100 truncate">
                       {item.knowledge_unit.insight.summary}
                     </span>
                   </div>
                   <div className="flex items-center gap-3">
                     <DomainTags domains={item.knowledge_unit.domains} />
-                    <span className="text-xs text-gray-400 ml-auto shrink-0">
+                    <span className="text-xs text-gray-400 dark:text-slate-500 ml-auto shrink-0">
                       {confidenceLabel(item.knowledge_unit.evidence.confidence)}
                     </span>
                   </div>

server/frontend/src/components/KnowledgeUnitModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react"
 import { ApiError, api } from "../api"
 import type { ReviewItem } from "../types"
-import { timeAgo } from "../utils"
+import { confidenceColor, timeAgo } from "../utils"
 import { DomainTags } from "./DomainTags"
 import { StatusBadge } from "./StatusBadge"
 
@@ -10,13 +10,6 @@ interface Props {
   onClose: () => void
 }
 
-function confidenceColor(c: number): string {
-  if (c < 0.3) return "text-red-600"
-  if (c < 0.5) return "text-amber-600"
-  if (c < 0.7) return "text-yellow-500"
-  return "text-green-600"
-}
-
 const MODAL_TITLE_ID = "ku-modal-title"
 
 export function KnowledgeUnitModal({ unitId, onClose }: Props) {
@@ -71,15 +64,15 @@ export function KnowledgeUnitModal({ unitId, onClose }: Props) {
         aria-modal="true"
         aria-labelledby={item ? MODAL_TITLE_ID : undefined}
         tabIndex={-1}
-        className="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto outline-none"
+        className="relative bg-white dark:bg-slate-900 rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto outline-none"
       >
         {error && (
           <div className="p-6 text-center">
-            <p className="text-red-600 text-sm">{error}</p>
+            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
             <button
               type="button"
               onClick={onClose}
-              className="mt-3 text-sm text-gray-500 hover:text-gray-700"
+              className="mt-3 text-sm text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200"
             >
               Close
             </button>
@@ -88,9 +81,9 @@ export function KnowledgeUnitModal({ unitId, onClose }: Props) {
 
         {!item && !error && (
           <div className="p-6 space-y-3">
-            <div className="h-4 w-32 animate-pulse bg-gray-200 rounded" />
-            <div className="h-6 w-48 animate-pulse bg-gray-200 rounded" />
-            <div className="h-16 w-full animate-pulse bg-gray-200 rounded" />
+            <div className="h-4 w-32 animate-pulse bg-gray-200 dark:bg-slate-700 rounded" />
+            <div className="h-6 w-48 animate-pulse bg-gray-200 dark:bg-slate-700 rounded" />
+            <div className="h-16 w-full animate-pulse bg-gray-200 dark:bg-slate-700 rounded" />
           </div>
         )}
 
@@ -99,14 +92,14 @@ export function KnowledgeUnitModal({ unitId, onClose }: Props) {
             <div className="flex items-start justify-between gap-3">
               <h2
                 id={MODAL_TITLE_ID}
-                className="text-lg font-semibold text-gray-900"
+                className="text-lg font-semibold text-gray-900 dark:text-slate-100"
               >
                 {item.knowledge_unit.insight.summary}
               </h2>
               <button
                 type="button"
                 onClick={onClose}
-                className="text-gray-400 hover:text-gray-600 text-xl leading-none shrink-0"
+                className="text-gray-400 hover:text-gray-600 dark:text-slate-400 dark:hover:text-slate-200 text-xl leading-none shrink-0"
                 aria-label="Close"
               >
                 &times;
@@ -116,35 +109,35 @@ export function KnowledgeUnitModal({ unitId, onClose }: Props) {
             <div className="flex items-center gap-2">
               <StatusBadge status={item.status} />
               {item.reviewed_by && (
-                <span className="text-xs text-gray-500">
+                <span className="text-xs text-gray-500 dark:text-slate-400">
                   by {item.reviewed_by}
                 </span>
               )}
               {item.reviewed_at && (
-                <span className="text-xs text-gray-400">
+                <span className="text-xs text-gray-400 dark:text-slate-500">
                   {timeAgo(item.reviewed_at)}
                 </span>
               )}
             </div>
 
             <DomainTags domains={item.knowledge_unit.domains} />
 
-            <p className="text-gray-600 leading-relaxed">
+            <p className="text-gray-600 dark:text-slate-300 leading-relaxed">
               {item.knowledge_unit.insight.detail}
             </p>
 
-            <div className="border-l-3 rounded-r-lg px-4 py-3 bg-indigo-50 border-indigo-500">
-              <span className="text-xs font-semibold uppercase tracking-wide text-indigo-500">
+            <div className="border-l-3 rounded-r-lg px-4 py-3 bg-indigo-50 dark:bg-indigo-950/40 border-indigo-500">
+              <span className="text-xs font-semibold uppercase tracking-wide text-indigo-500 dark:text-indigo-400">
                 Action
               </span>
-              <p className="text-gray-800 text-sm mt-1">
+              <p className="text-gray-800 dark:text-slate-200 text-sm mt-1">
                 {item.knowledge_unit.insight.action}
               </p>
             </div>
 
             <div className="grid grid-cols-2 gap-3 text-sm">
-              <div className="bg-gray-50 rounded-lg p-3">
-                <span className="text-xs text-gray-500 uppercase">
+              <div className="bg-gray-50 dark:bg-slate-800 rounded-lg p-3">
+                <span className="text-xs text-gray-500 dark:text-slate-400 uppercase">
                   Confidence
                 </span>
                 <p
@@ -153,19 +146,19 @@ export function KnowledgeUnitModal({ unitId, onClose }: Props) {
                   {item.knowledge_unit.evidence.confidence.toFixed(2)}
                 </p>
               </div>
-              <div className="bg-gray-50 rounded-lg p-3">
-                <span className="text-xs text-gray-500 uppercase">
+              <div className="bg-gray-50 dark:bg-slate-800 rounded-lg p-3">
+                <span className="text-xs text-gray-500 dark:text-slate-400 uppercase">
                   Confirmations
                 </span>
-                <p className="font-semibold text-gray-800">
+                <p className="font-semibold text-gray-800 dark:text-slate-200">
                   {item.knowledge_unit.evidence.confirmations}
                 </p>
               </div>
             </div>
 
             {(item.knowledge_unit.context.languages.length > 0 ||
               item.knowledge_unit.context.frameworks.length > 0) && (
-              <div className="text-sm text-gray-500">
+              <div className="text-sm text-gray-500 dark:text-slate-400">
                 {item.knowledge_unit.context.languages.length > 0 && (
                   <span>
                     Languages:{" "}
@@ -185,7 +178,7 @@ export function KnowledgeUnitModal({ unitId, onClose }: Props) {
               </div>
             )}
 
-            <div className="flex items-center justify-between text-xs text-gray-400 pt-2 border-t border-gray-100">
+            <div className="flex items-center justify-between text-xs text-gray-400 dark:text-slate-500 pt-2 border-t border-gray-100 dark:border-slate-800">
               <span className="font-mono">{item.knowledge_unit.id}</span>
               {item.knowledge_unit.evidence.first_observed && (
                 <span>