Add UI themes (Dark, Light, Midnight, Sunset)

Four preset color themes, switchable from Profile settings with instant
preview and server-side persistence (User.theme, applied via a data-theme
attribute the CSS custom-property overrides in themes.css key off). Dark
stays the existing DarkSingularity palette and default. Light is a genuine
new light-mode design; Midnight is a higher-contrast OLED-friendly dark
variant; Sunset swaps in a warm amber/coral accent family.

Custom theme building (pick-your-own-colors) is out of scope for this
pass -- presets only.

Also: fixed the PATCH /api/auth/me handler to only apply fields actually
present in the request body. It previously always overwrote display_name
unconditionally, which happened to be harmless when it was the only
field on ProfileUpdate but would have silently cleared it on any
theme-only update. And switched two hardcoded hex colors
(.btn-primary:hover, .role-badge-admin) to token-derived color-mix()
values so they adapt across themes instead of staying fixed to the
original cyan/violet palette.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/ProfileModal.tsx

@@ -1,12 +1,20 @@
 import { useRef, useState, type ChangeEvent, type FormEvent } from 'react'
-import { changePassword, removeAvatar, updateProfile, uploadAvatar } from '../api/auth'
+import { changePassword, removeAvatar, updateProfile, updateTheme, uploadAvatar } from '../api/auth'
 import { ApiError } from '../api/client'
 import { getUserAvatarUrl } from '../api/users'
 import { useAuth } from '../context/AuthContext'
 import { hashIndex } from '../lib/avatar'
+import type { ThemeName } from '../types'
 import { UserAvatar } from './UserAvatar'
 import './Modal.css'
 
+const THEME_OPTIONS: { name: ThemeName; label: string }[] = [
+  { name: 'dark', label: 'Dark' },
+  { name: 'light', label: 'Light' },
+  { name: 'midnight', label: 'Midnight' },
+  { name: 'sunset', label: 'Sunset' },
+]
+
 interface ProfileModalProps {
   onClose: () => void
 }
@@ -18,6 +26,7 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
   const [savingName, setSavingName] = useState(false)
   const [uploadingAvatar, setUploadingAvatar] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const [themeError, setThemeError] = useState<string | null>(null)
 
   const [currentPassword, setCurrentPassword] = useState('')
   const [newPassword, setNewPassword] = useState('')
@@ -68,6 +77,21 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
     }
   }
 
+  async function handleSelectTheme(theme: ThemeName) {
+    // Instant visual feedback, then persist -- mirrors avatar upload's
+    // apply-immediately pattern rather than requiring a separate Save.
+    document.documentElement.setAttribute('data-theme', theme)
+    setThemeError(null)
+    try {
+      const updated = await updateTheme(theme)
+      updateUser(updated)
+    } catch (err) {
+      // Revert the optimistic DOM change if it didn't actually persist.
+      document.documentElement.setAttribute('data-theme', user?.theme ?? 'dark')
+      setThemeError(err instanceof ApiError ? err.message : String(err))
+    }
+  }
+
   async function handleChangePassword(e: FormEvent) {
     e.preventDefault()
     setPasswordError(null)
@@ -133,6 +157,31 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
           </div>
         </div>
 
+        <hr className="modal-divider" />
+
+        <div className="modal-field-label">Theme</div>
+        <div className="theme-swatch-grid">
+          {THEME_OPTIONS.map((option) => (
+            <button
+              key={option.name}
+              type="button"
+              className={`theme-swatch theme-swatch-${option.name}${
+                (user.theme ?? 'dark') === option.name ? ' theme-swatch-selected' : ''
+              }`}
+              onClick={() => handleSelectTheme(option.name)}
+              aria-pressed={(user.theme ?? 'dark') === option.name}
+            >
+              <span className="theme-swatch-preview" aria-hidden="true">
+                <span className="theme-swatch-accent" />
+              </span>
+              <span className="theme-swatch-label">{option.label}</span>
+            </button>
+          ))}
+        </div>
+        {themeError && <p className="modal-error">{themeError}</p>}
+
+        <hr className="modal-divider" />
+
         <form onSubmit={handleSaveName}>
           <div className="modal-field-label">Display name</div>
           <input