Light / Dark / AMOLED
Three themes ship by default — Light, Dark, AMOLED. Each combines with one of six accent colours.
How it works
The theme is a CSS class on <html> (light, dark, amoled). The accent is a second class (gray, orange, green, red, lila, or none = blue). The combination selector is :root:is(.light,.dark,.amoled).<accent> — see res/css/variables.css in the admin.
Accent palette
| Class | Colour |
|---|---|
| (none) | Blue (default) |
gray | Neutral gray |
orange | #f97316 |
green | #22c55e |
red | #ef4444 |
lila | #a855f7 |
Persistence
Theme and accent are stored per-user in the preferences table (mode and color columns). The admin reads them on page load and applies the classes server-side, so there's no FOUC.
Custom themes
A themes marketplace is on the roadmap. For now: override the CSS variables on :root in your own stylesheet or fork the frontend templates.