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>
This commit is contained in:
2026-08-17 07:53:05 -06:00
co-authored by Claude Sonnet 5
parent 73020fa39f
commit bd3e621e9f
21 changed files with 972 additions and 203 deletions
+24 -29
View File
@@ -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)