Theme Settings UI

How users control themes — one global selector with optional per-surface overrides

Settings Panel — Theme Section
Appearance
Global Theme
Dark
Light
Glass style
Frosted glass cards, blur effects, iOS-style accent colors
Serif headings
Use Fraunces serif font for headings (default: on)
Per-Surface Overrides
Optional — leave blank to use global
Dashboard
Blog
Songbook

How It Composes

Setting Stored as Effect
Color mode theme_mode: "dark" | "light" Switches all color tokens
Glass style theme_glass: "true" | "false" Adds .theme-glass class → blur, rgba surfaces, iOS accents, pill shapes
Serif headings theme_serif: "true" | "false" Adds .theme-serif class → Fraunces for headings
Per-surface override theme_blog_mode, theme_dashboard_mode Override color mode for one surface only