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/Modal.css

@@ -94,6 +94,88 @@
   margin: var(--sp-5) 0 var(--sp-4);
 }
 
+.theme-swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-4);
+}
+
+.theme-swatch {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.theme-swatch:hover {
+  border-color: var(--ds-accent);
+}
+
+.theme-swatch-selected {
+  border-color: var(--ds-accent);
+  box-shadow: 0 0 0 1px var(--ds-accent);
+}
+
+.theme-swatch-label {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ds-text);
+}
+
+/* Each swatch's preview always shows its OWN theme's colors, not whatever
+   theme is currently active -- literal per-theme values on purpose, so a
+   user can see what an option looks like before picking it. */
+.theme-swatch-preview {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.theme-swatch-accent {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.theme-swatch-dark .theme-swatch-preview {
+  background: #101030;
+}
+.theme-swatch-dark .theme-swatch-accent {
+  background: #60d8fc;
+}
+
+.theme-swatch-light .theme-swatch-preview {
+  background: #ffffff;
+}
+.theme-swatch-light .theme-swatch-accent {
+  background: #0891b2;
+}
+
+.theme-swatch-midnight .theme-swatch-preview {
+  background: #000000;
+}
+.theme-swatch-midnight .theme-swatch-accent {
+  background: #00f0ff;
+}
+
+.theme-swatch-sunset .theme-swatch-preview {
+  background: #241408;
+}
+.theme-swatch-sunset .theme-swatch-accent {
+  background: #fca050;
+}
+
 .toggle-row {
   display: flex;
   align-items: center;

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

frontend/src/components/RoomInfoPanel.css

@@ -143,7 +143,7 @@
 .role-badge-admin {
   border: 1px solid color-mix(in srgb, var(--ds-accent-2) 50%, transparent);
   background: color-mix(in srgb, var(--ds-accent-2) 14%, transparent);
-  color: #b9b3ff;
+  color: var(--ds-accent-2);
 }
 
 .role-badge-member {