Private
Public Access
Add custom theme colors, full per-token control (#30)
Adds a 5th "Custom" option to the theme swatch grid alongside the existing 4 presets, opening a picker for all ~12 CSS custom properties (backgrounds, borders, text, three accent tiers, highlight, danger) plus a light/dark toggle for native control rendering. Persisted as a new users.custom_theme_colors JSONB column, validated server-side against exactly what a native <input type="color"> can ever produce. Colors survive switching to a preset and back, since there's no reason picking a preset for a moment should force redoing every color pick. Applied at runtime as inline custom properties on :root (presets stay static CSS) via a shared applyTheme() helper, which is also responsible for clearing those inline overrides when switching away -- otherwise they'd silently keep winning over whatever preset's own stylesheet values should apply next. Live preview on every color change; persists only on explicit "Save colors" (not per keystroke, since a color input fires continuously while dragging), and closing the modal without saving reverts the preview back to whatever's actually persisted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { apiFetch, ApiError, NetworkError } from './client'
|
||||
import type { ThemeName, User } from '../types'
|
||||
import type { CustomThemeColors, ThemeName, User } from '../types'
|
||||
|
||||
// No register() here: this is an invite-only site. Accounts are created by
|
||||
// an operator via the backend CLI (`python -m app.cli create-user`), not
|
||||
@@ -27,13 +27,14 @@ export function updateProfile(displayName: string | null): Promise<User> {
|
||||
})
|
||||
}
|
||||
|
||||
// Deliberately its own call sending only `theme` -- the backend only
|
||||
// applies fields actually present in the request body, so this can't
|
||||
// clobber display_name (and updateProfile above can't clobber theme).
|
||||
export function updateTheme(theme: ThemeName): Promise<User> {
|
||||
// Deliberately its own call sending only `theme` (and, for 'custom',
|
||||
// `custom_theme_colors` alongside it) -- the backend only applies fields
|
||||
// actually present in the request body, so this can't clobber display_name
|
||||
// (and updateProfile above can't clobber theme).
|
||||
export function updateTheme(theme: ThemeName, customThemeColors?: CustomThemeColors): Promise<User> {
|
||||
return apiFetch<User>('/api/auth/me', {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ theme }),
|
||||
body: JSON.stringify({ theme, custom_theme_colors: customThemeColors }),
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user