Support multiple named, saved custom themes per user

Replaces the single custom_theme_colors blob (one palette per user) with
a proper CustomTheme table -- users can now save, name, and switch
between as many custom palettes as they like, not just one.

Data model: users.active_custom_theme_id references whichever saved
CustomTheme (if any) is currently active; theme='custom' + that id
together determine what's rendered. The migration data-migrates any
already-saved single palette into a named CustomTheme row on upgrade,
and best-effort backfills the active one back into the old column shape
on downgrade.

New endpoints under /api/custom-themes: list, create, rename/recolor,
delete (falls back the user to a preset if the deleted theme was
active, so the two theme columns can never disagree), and activate.
UserRead.active_custom_theme is only populated when theme == 'custom'
even though the DB deliberately keeps the id set while a preset is
active, so switching to a preset and back doesn't lose the saved
palette.

ProfileModal now lists saved themes as swatches (click to activate,
pencil to edit -- active or not, trash to delete with a confirm), plus
a "+ New" button that creates, activates, and opens the editor for a
fresh theme immediately.

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

backend/app/schemas/custom_theme.py

@@ -0,0 +1,51 @@
+import uuid
+from datetime import datetime
+from typing import Literal
+
+from pydantic import BaseModel, ConfigDict, Field
+
+# Matches exactly the CSS custom properties frontend/src/styles/themes.css
+# overrides per built-in preset -- a saved custom theme is applied the same
+# way, just as inline styles on :root instead of a static stylesheet block
+# (see frontend/src/lib/theme.ts). Hex-only (`#rrggbb`) since that's exactly
+# what a native <input type="color"> always produces -- no alpha, no
+# shorthand -- so the pattern constraint can't reject anything the picker UI
+# itself sends.
+_HEX_COLOR = Field(pattern=r"^#[0-9a-fA-F]{6}$")
+
+
+class CustomThemeColors(BaseModel):
+    void: str = _HEX_COLOR
+    void_2: str = _HEX_COLOR
+    surface: str = _HEX_COLOR
+    surface_2: str = _HEX_COLOR
+    border: str = _HEX_COLOR
+    text: str = _HEX_COLOR
+    muted: str = _HEX_COLOR
+    accent: str = _HEX_COLOR
+    accent_2: str = _HEX_COLOR
+    accent_3: str = _HEX_COLOR
+    highlight: str = _HEX_COLOR
+    danger: str = _HEX_COLOR
+    color_scheme: Literal["light", "dark"]
+
+
+class CustomThemeCreate(BaseModel):
+    name: str = Field(min_length=1, max_length=50)
+    colors: CustomThemeColors
+
+
+class CustomThemeUpdate(BaseModel):
+    # Each field independently optional-and-settable, same convention as
+    # ProfileUpdate -- a rename shouldn't require resending all 12 colors.
+    name: str | None = Field(default=None, min_length=1, max_length=50)
+    colors: CustomThemeColors | None = Field(default=None)
+
+
+class CustomThemeRead(BaseModel):
+    model_config = ConfigDict(from_attributes=True)
+
+    id: uuid.UUID
+    name: str
+    colors: CustomThemeColors
+    created_at: datetime

backend/app/schemas/user.py

@@ -2,7 +2,9 @@ import uuid
 from datetime import datetime
 from typing import Literal
 
-from pydantic import BaseModel, ConfigDict, EmailStr, Field
+from pydantic import BaseModel, ConfigDict, EmailStr, Field, model_validator
+
+from app.schemas.custom_theme import CustomThemeRead
 
 
 class UserCreate(BaseModel):
@@ -11,31 +13,6 @@ class UserCreate(BaseModel):
     password: str = Field(min_length=8, max_length=200)
 
 
-# Matches exactly the CSS custom properties frontend/src/styles/themes.css
-# overrides per built-in preset -- a "custom" theme is applied the same way,
-# just as inline styles on :root instead of a static stylesheet block (see
-# frontend/src/lib/theme.ts). Hex-only (`#rrggbb`) since that's exactly what
-# a native <input type="color"> always produces -- no alpha, no shorthand --
-# so the pattern constraint can't reject anything the picker UI itself sends.
-_HEX_COLOR = Field(pattern=r"^#[0-9a-fA-F]{6}$")
-
-
-class CustomThemeColors(BaseModel):
-    void: str = _HEX_COLOR
-    void_2: str = _HEX_COLOR
-    surface: str = _HEX_COLOR
-    surface_2: str = _HEX_COLOR
-    border: str = _HEX_COLOR
-    text: str = _HEX_COLOR
-    muted: str = _HEX_COLOR
-    accent: str = _HEX_COLOR
-    accent_2: str = _HEX_COLOR
-    accent_3: str = _HEX_COLOR
-    highlight: str = _HEX_COLOR
-    danger: str = _HEX_COLOR
-    color_scheme: Literal["light", "dark"]
-
-
 class UserRead(BaseModel):
     model_config = ConfigDict(from_attributes=True)
 
@@ -46,11 +23,26 @@ class UserRead(BaseModel):
     is_site_admin: bool
     display_name: str | None
     theme: str | None
-    custom_theme_colors: CustomThemeColors | None
+    # Resolved, not just an id -- the frontend needs the actual palette to
+    # paint on load without a second round trip (see lib/theme.ts).
+    active_custom_theme: CustomThemeRead | None
     avatar_filename: str | None
     appear_offline: bool
     created_at: datetime
 
+    @model_validator(mode="after")
+    def _hide_custom_theme_when_not_active(self) -> "UserRead":
+        # The DB deliberately keeps active_custom_theme_id set even while
+        # theme is a preset (see custom_theme_service -- switching away from
+        # custom must not lose the saved palette), so the ORM relationship
+        # this field is populated from can be non-null even when the user
+        # isn't actually on the custom theme right now. Enforce "only
+        # meaningful when theme == 'custom'" here, in one place, rather than
+        # relying on every router endpoint to remember it.
+        if self.theme != "custom":
+            self.active_custom_theme = None
+        return self
+
 
 class ProfileUpdate(BaseModel):
     # Each field is independently optional-and-settable -- the router only
@@ -60,8 +52,11 @@ class ProfileUpdate(BaseModel):
     # their defaults, and vice versa.
     display_name: str | None = Field(default=None, max_length=50)
     # Kept in sync with frontend/src/styles/themes.css's theme blocks.
-    theme: Literal["dark", "light", "midnight", "sunset", "custom"] | None = Field(default=None)
-    custom_theme_colors: CustomThemeColors | None = Field(default=None)
+    # "custom" is deliberately not settable here -- becoming custom always
+    # means activating one specific saved theme, which needs an id and an
+    # ownership check; that's POST /api/custom-themes/{id}/activate, not a
+    # bare theme name with nothing to point it at.
+    theme: Literal["dark", "light", "midnight", "sunset"] | None = Field(default=None)
     appear_offline: bool | None = Field(default=None)