Add theming system: custom palettes, per-user colour mode, admin appearance page

- 4 built-in themes (Default, Pastel, High Contrast, Ocean Blue) seeded as JSON files in /config/themes/ on startup; custom themes can be created, edited, and deleted via the new admin Appearance page - All theme tokens applied via JS inline CSS properties (no hardcoded CSS blocks) - New `color_mode` column on users table (migration dd6ad2f2c211); users can override the admin-set global default in Settings - Backend: GET/PATCH /settings/appearance, full CRUD on /settings/themes - Frontend: AdminAppearancePage with theme grid + colour pickers, SettingsPage replaces placeholder with mode selector, useTheme rewritten to fetch from API Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-18 01:46:17 +02:00
parent da9b911f1e
commit 608b0b7fe8
15 changed files with 1063 additions and 34 deletions
@@ -5,6 +5,7 @@ All endpoints require the caller to be an admin (Depends(get_current_admin)).
 Config files live on the shared app_config volume (/config/).
 """
 import asyncio
+import json

 import httpx
 from fastapi import APIRouter, Depends, HTTPException
@@ -12,18 +13,24 @@ from pydantic import BaseModel

 from app.core.app_config import (
    SYSTEM_PROMPT_SERVICES,
+    AppearanceConfig,
    _merge_api_key,
+    delete_theme,
    load_ai_service_config,
    load_ai_service_config_masked,
    load_all_system_prompts,
+    load_all_themes,
+    load_appearance_config,
    load_doc_service_config,
    load_doc_service_config_masked,
    save_ai_service_config,
    save_doc_service_config,
    save_service_system_prompts,
+    save_theme,
+    validate_theme_tokens,
 )
 from app.core.config import settings
-from app.deps import get_current_admin
+from app.deps import get_current_admin, get_current_user
 from app.models.user import User

 router = APIRouter()
@@ -53,6 +60,36 @@ class SystemPromptUpdate(BaseModel):
    user_template: str


+class AppearanceUpdate(BaseModel):
+    theme: str
+    default_mode: str
+
+
+class ThemeColors(BaseModel):
+    primary: str
+    primary_hover: str
+    accent: str
+    accent_hover: str
+    background: str
+    surface: str
+    border: str
+    text_primary: str
+    text_muted: str
+
+
+class ThemeCreate(BaseModel):
+    id: str
+    label: str
+    light: ThemeColors
+    dark: ThemeColors
+
+
+class ThemeUpdate(BaseModel):
+    label: str | None = None
+    light: ThemeColors | None = None
+    dark: ThemeColors | None = None
+
+
 # ── AI settings ────────────────────────────────────────────────────────────────


@@ -176,3 +213,108 @@ async def update_system_prompt(
        save_service_system_prompts, service_id, body.system, body.user_template
    )
    return await asyncio.to_thread(load_all_system_prompts)
+
+
+# ── Appearance (global default — auth read, admin write) ───────────────────────
+
+import re as _re
+_THEME_ID_RE = _re.compile(r"^[a-z0-9_-]{1,64}$")
+
+
+@router.get("/appearance")
+async def get_appearance(
+    _: User = Depends(get_current_user),
+) -> dict:
+    config = await asyncio.to_thread(load_appearance_config)
+    return config.model_dump()
+
+
+@router.patch("/appearance")
+async def update_appearance(
+    body: AppearanceUpdate,
+    _: User = Depends(get_current_admin),
+) -> dict:
+    if body.default_mode not in ("light", "dark", "system"):
+        raise HTTPException(status_code=422, detail="default_mode must be 'light', 'dark', or 'system'")
+    themes = await asyncio.to_thread(load_all_themes)
+    theme_ids = {t["id"] for t in themes}
+    if body.theme not in theme_ids:
+        raise HTTPException(status_code=422, detail=f"Unknown theme: {body.theme!r}")
+    config = AppearanceConfig(theme=body.theme, default_mode=body.default_mode)
+    await asyncio.to_thread(save_appearance_config, config)
+    return config.model_dump()
+
+
+# ── Theme CRUD ─────────────────────────────────────────────────────────────────
+
+
+@router.get("/themes")
+async def list_themes(
+    _: User = Depends(get_current_user),
+) -> list:
+    return await asyncio.to_thread(load_all_themes)
+
+
+@router.post("/themes", status_code=201)
+async def create_theme(
+    body: ThemeCreate,
+    _: User = Depends(get_current_admin),
+) -> dict:
+    if not _THEME_ID_RE.match(body.id):
+        raise HTTPException(status_code=422, detail="Theme ID must match [a-z0-9_-]{1,64}")
+    existing = {t["id"] for t in await asyncio.to_thread(load_all_themes)}
+    if body.id in existing:
+        raise HTTPException(status_code=400, detail=f"Theme ID already in use: {body.id!r}")
+    light = body.light.model_dump()
+    dark = body.dark.model_dump()
+    for mode, colors in (("light", light), ("dark", dark)):
+        errors = validate_theme_tokens(colors)
+        if errors:
+            raise HTTPException(status_code=422, detail=f"{mode}: {'; '.join(errors)}")
+    theme = {"id": body.id, "label": body.label, "builtin": False, "light": light, "dark": dark}
+    await asyncio.to_thread(save_theme, theme)
+    return theme
+
+
+@router.patch("/themes/{theme_id}")
+async def update_theme(
+    theme_id: str,
+    body: ThemeUpdate,
+    _: User = Depends(get_current_admin),
+) -> dict:
+    from app.core.app_config import _THEMES_DIR
+    path = _THEMES_DIR / f"{theme_id}.json"
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="Theme not found")
+    theme = json.loads(path.read_text())
+    if theme.get("builtin"):
+        raise HTTPException(status_code=400, detail="Cannot edit a built-in theme")
+    if body.label is not None:
+        theme["label"] = body.label
+    if body.light is not None:
+        light = body.light.model_dump()
+        errors = validate_theme_tokens(light)
+        if errors:
+            raise HTTPException(status_code=422, detail=f"light: {'; '.join(errors)}")
+        theme["light"] = light
+    if body.dark is not None:
+        dark = body.dark.model_dump()
+        errors = validate_theme_tokens(dark)
+        if errors:
+            raise HTTPException(status_code=422, detail=f"dark: {'; '.join(errors)}")
+        theme["dark"] = dark
+    await asyncio.to_thread(save_theme, theme)
+    return theme
+
+
+@router.delete("/themes/{theme_id}", status_code=204)
+async def remove_theme(
+    theme_id: str,
+    _: User = Depends(get_current_admin),
+) -> None:
+    try:
+        await asyncio.to_thread(delete_theme, theme_id)
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Theme not found")
+    except ValueError as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
@@ -1,10 +1,10 @@
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException
 from sqlalchemy.ext.asyncio import AsyncSession

 from app.database import get_db
 from app.deps import get_current_user
 from app.models.user import User
-from app.schemas.user import DashboardPrefsOut, DashboardPrefsUpdate, UserOut
+from app.schemas.user import ColorModeUpdate, DashboardPrefsOut, DashboardPrefsUpdate, UserOut

 router = APIRouter()

@@ -29,3 +29,15 @@ async def update_preferences(
    await db.commit()
    await db.refresh(current_user)
    return DashboardPrefsOut(app_ids=current_user.dashboard_app_ids or [])
+
+
+@router.patch("/me/color-mode", response_model=UserOut)
+async def update_color_mode(
+    body: ColorModeUpdate,
+    current_user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+):
+    current_user.color_mode = body.color_mode
+    await db.commit()
+    await db.refresh(current_user)
+    return current_user