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 parent
68e487e5ec
commit
53d16973fb
11 files changed
+443
-18
No files matched your search
@@ -3,6 +3,7 @@ import * as authApi from '../api/auth'
|
||||
import { ApiError, NetworkError } from '../api/client'
|
||||
import { clearLastUser, loadLastUser, saveLastUser } from '../lib/lastUser'
|
||||
import { unsubscribeFromPush } from '../lib/push'
|
||||
import { applyTheme } from '../lib/theme'
|
||||
import type { User } from '../types'
|
||||
|
||||
interface AuthContextValue {
|
||||
@@ -22,8 +23,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [offline, setOffline] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute('data-theme', user?.theme ?? 'dark')
|
||||
}, [user?.theme])
|
||||
applyTheme(user?.theme ?? null, user?.custom_theme_colors ?? null)
|
||||
}, [user?.theme, user?.custom_theme_colors])
|
||||
|
||||
useEffect(() => {
|
||||
authApi
|
||||
|
||||
Reference in new issue
Block a user