feat(UI): add Night Ops dark mode with theme toggle

Add a warm charcoal dark mode ("Night Ops") using CSS variable swapping
under [data-theme="dark"]. All 23 desert palette variables are overridden
with dark-mode counterparts, and ~313 generic Tailwind classes (bg-white,
text-gray-*, border-gray-*) are replaced with semantic tokens.

Infrastructure:
- CSS variable overrides in app.css for both themes
- ThemeProvider + useTheme hook (localStorage + KV store sync)
- ThemeToggle component (moon/sun icons, "Night Ops"/"Day Ops" labels)
- FOUC prevention script in inertia_layout.edge
- Toggle placed in StyledSidebar and Footer for access on every page

Color replacements across 50 files:
- bg-white → bg-surface-primary
- bg-gray-50/100 → bg-surface-secondary
- text-gray-900/800 → text-text-primary
- text-gray-600/500 → text-text-secondary/text-text-muted
- border-gray-200/300 → border-border-subtle/border-border-default
- text-desert-white → text-white (fixes invisible text on colored bg)
- Button hover/active states use dedicated btn-green-hover/active vars

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

admin/constants/kv_store.ts

@@ -1,3 +1,3 @@
 import { KVStoreKey } from "../types/kv_store.js";
 
-export const SETTINGS_KEYS: KVStoreKey[] = ['chat.suggestionsEnabled', 'chat.lastModel', 'ui.hasVisitedEasySetup', 'system.earlyAccess', 'ai.assistantCustomName'];
+export const SETTINGS_KEYS: KVStoreKey[] = ['chat.suggestionsEnabled', 'chat.lastModel', 'ui.hasVisitedEasySetup', 'ui.theme', 'system.earlyAccess', 'ai.assistantCustomName'];

admin/inertia/app/app.tsx

@@ -11,6 +11,7 @@ import { generateUUID } from '~/lib/util'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import NotificationsProvider from '~/providers/NotificationProvider'
+import { ThemeProvider } from '~/providers/ThemeProvider'
 import { UsePageProps } from '../../types/system'
 
 const appName = import.meta.env.VITE_APP_NAME || 'Project N.O.M.A.D.'
@@ -38,14 +39,16 @@ createInertiaApp({
     const showDevtools = ['development', 'staging'].includes(environment)
     createRoot(el).render(
       <QueryClientProvider client={queryClient}>
-        <TransmitProvider baseUrl={window.location.origin} enableLogging={true}>
-          <NotificationsProvider>
-            <ModalsProvider>
-              <App {...props} />
-              {showDevtools && <ReactQueryDevtools initialIsOpen={false} buttonPosition='bottom-left' />}
-            </ModalsProvider>
-          </NotificationsProvider>
-        </TransmitProvider>
+        <ThemeProvider>
+          <TransmitProvider baseUrl={window.location.origin} enableLogging={true}>
+            <NotificationsProvider>
+              <ModalsProvider>
+                <App {...props} />
+                {showDevtools && <ReactQueryDevtools initialIsOpen={false} buttonPosition='bottom-left' />}
+              </ModalsProvider>
+            </NotificationsProvider>
+          </TransmitProvider>
+        </ThemeProvider>
       </QueryClientProvider>
     )
   },

admin/inertia/components/ActiveDownloads.tsx

@@ -32,7 +32,7 @@ const ActiveDownloads = ({ filetype, withHeader = false }: ActiveDownloadProps)
             </div>
           ))
         ) : (
-          <p className="text-gray-500">No active downloads</p>
+          <p className="text-text-muted">No active downloads</p>
         )}
       </div>
     </>

admin/inertia/components/ActiveEmbedJobs.tsx

@@ -35,7 +35,7 @@ const ActiveEmbedJobs = ({ withHeader = false }: ActiveEmbedJobsProps) => {
             </div>
           ))
         ) : (
-          <p className="text-gray-500">No files are currently being processed</p>
+          <p className="text-text-muted">No files are currently being processed</p>
         )}
       </div>
     </>

admin/inertia/components/ActiveModelDownloads.tsx

@@ -33,7 +33,7 @@ const ActiveModelDownloads = ({ withHeader = false }: ActiveModelDownloadsProps)
                         </div>
                     ))
                 ) : (
-                    <p className="text-gray-500">No active model downloads</p>
+                    <p className="text-text-muted">No active model downloads</p>
                 )}
             </div>
         </>

admin/inertia/components/Alert.tsx

@@ -43,7 +43,7 @@ export default function Alert({
   }
 
   const getIconColor = () => {
-    if (variant === 'solid') return 'text-desert-white'
+    if (variant === 'solid') return 'text-white'
     switch (type) {
       case 'warning':
         return 'text-desert-orange'
@@ -81,15 +81,15 @@ export default function Alert({
       case 'solid':
         variantStyles.push(
           type === 'warning'
-            ? 'bg-desert-orange text-desert-white border border-desert-orange-dark'
+            ? 'bg-desert-orange text-white border border-desert-orange-dark'
             : type === 'error'
-              ? 'bg-desert-red text-desert-white border border-desert-red-dark'
+              ? 'bg-desert-red text-white border border-desert-red-dark'
               : type === 'success'
-                ? 'bg-desert-olive text-desert-white border border-desert-olive-dark'
+                ? 'bg-desert-olive text-white border border-desert-olive-dark'
                 : type === 'info'
-                  ? 'bg-desert-green text-desert-white border border-desert-green-dark'
+                  ? 'bg-desert-green text-white border border-desert-green-dark'
                   : type === 'info-inverted'
-                    ? 'bg-desert-tan text-desert-white border border-desert-tan-dark'
+                    ? 'bg-desert-tan text-white border border-desert-tan-dark'
                   : ''
         )
         return classNames(baseStyles, 'shadow-lg', ...variantStyles)
@@ -112,7 +112,7 @@ export default function Alert({
   }
 
   const getTitleColor = () => {
-    if (variant === 'solid') return 'text-desert-white'
+    if (variant === 'solid') return 'text-white'
 
     switch (type) {
       case 'warning':
@@ -131,7 +131,7 @@ export default function Alert({
   }
 
   const getMessageColor = () => {
-    if (variant === 'solid') return 'text-desert-white text-opacity-90'
+    if (variant === 'solid') return 'text-white text-opacity-90'
 
     switch (type) {
       case 'warning':
@@ -149,7 +149,7 @@ export default function Alert({
 
   const getCloseButtonStyles = () => {
     if (variant === 'solid') {
-      return 'text-desert-white hover:text-desert-white hover:bg-black hover:bg-opacity-20'
+      return 'text-white hover:text-white hover:bg-black hover:bg-opacity-20'
     }
 
     switch (type) {

admin/inertia/components/BouncingDots.tsx

@@ -9,18 +9,18 @@ interface BouncingDotsProps {
 export default function BouncingDots({ text, containerClassName, textClassName }: BouncingDotsProps) {
   return (
     <div className={clsx("flex items-center justify-center gap-2", containerClassName)}>
-      <span className={clsx("text-gray-600", textClassName)}>{text}</span>
+      <span className={clsx("text-text-secondary", textClassName)}>{text}</span>
       <span className="flex gap-1 mt-1">
         <span
-          className="w-1.5 h-1.5 bg-gray-600 rounded-full animate-bounce"
+          className="w-1.5 h-1.5 bg-text-secondary rounded-full animate-bounce"
           style={{ animationDelay: '0ms' }}
         />
         <span
-          className="w-1.5 h-1.5 bg-gray-600 rounded-full animate-bounce"
+          className="w-1.5 h-1.5 bg-text-secondary rounded-full animate-bounce"
           style={{ animationDelay: '150ms' }}
         />
         <span
-          className="w-1.5 h-1.5 bg-gray-600 rounded-full animate-bounce"
+          className="w-1.5 h-1.5 bg-text-secondary rounded-full animate-bounce"
           style={{ animationDelay: '300ms' }}
         />
       </span>

admin/inertia/components/DownloadURLModal.tsx

@@ -63,7 +63,7 @@ const DownloadURLModal: React.FC<DownloadURLModalProps> = ({
       large
     >
       <div className="flex flex-col pb-4">
-        <p className="text-gray-700 mb-8">
+        <p className="text-text-secondary mb-8">
           Enter the URL of the map region file you wish to download. The URL must be publicly
           reachable and end with .pmtiles. A preflight check will be run to verify the file's
           availability, type, and approximate size.
@@ -76,11 +76,11 @@ const DownloadURLModal: React.FC<DownloadURLModalProps> = ({
           value={url}
           onChange={(e) => setUrl(e.target.value)}
         />
-        <div className="min-h-24 max-h-96 overflow-y-auto bg-gray-50 p-4 rounded border border-gray-300 text-left">
+        <div className="min-h-24 max-h-96 overflow-y-auto bg-surface-secondary p-4 rounded border border-border-default text-left">
           {messages.map((message, idx) => (
             <p
               key={idx}
-              className="text-sm text-gray-900 font-mono leading-relaxed break-words mb-3"
+              className="text-sm text-text-primary font-mono leading-relaxed break-words mb-3"
             >
               {message}
             </p>

admin/inertia/components/Footer.tsx

@@ -1,14 +1,16 @@
 import { usePage } from '@inertiajs/react'
 import { UsePageProps } from '../../types/system'
+import ThemeToggle from '~/components/ThemeToggle'
 
 export default function Footer() {
   const { appVersion } = usePage().props as unknown as UsePageProps
   return (
-    <footer className="">
-      <div className="flex justify-center border-t border-gray-900/10 py-4">
-        <p className="text-sm/6 text-gray-600">
+    <footer>
+      <div className="flex items-center justify-center gap-3 border-t border-border-subtle py-4">
+        <p className="text-sm/6 text-text-secondary">
           Project N.O.M.A.D. Command Center v{appVersion}
         </p>
+        <ThemeToggle />
       </div>
     </footer>
   )

admin/inertia/components/HorizontalBarChart.tsx

@@ -94,7 +94,7 @@ export default function HorizontalBarChart({
               className={classNames(
                 'absolute top-1/2 -translate-y-1/2 font-bold text-sm',
                 item.value > 15
-                  ? 'left-3 text-desert-white drop-shadow-md'
+                  ? 'left-3 text-white drop-shadow-md'
                   : 'right-3 text-desert-green'
               )}
             >