feat: add Rose/Amber/Teal color themes, default to Ocean + Square

Adds three new color themes alongside the existing Stalwart/Ocean/
Forest/Violet set so more people can find one they like, and switches
the out-of-the-box defaults to Ocean + square corners instead of the
neutral Stalwart theme + rounded corners (existing users' saved
preferences are untouched, this only changes what a fresh install
starts with).

Verified in the browser: all three new themes render with legible
primary-foreground contrast in both light and dark mode, and the
pre-hydration flash-prevention script in main.tsx (which reads
localStorage before React mounts) now recognizes the new theme names.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Steven RYDELL
2026-07-30 17:38:40 +02:00
co-authored by Claude Sonnet 5
parent 7a96fa6786
commit 8c1e826d63
4 changed files with 136 additions and 6 deletions
+8 -1
View File
@@ -25,7 +25,14 @@ import { getBasePath } from './lib/basePath';
const dark = theme === 'dark' || (theme !== 'light' && !!window.matchMedia?.('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('dark', dark);
const colorTheme = state?.colorTheme;
if (colorTheme === 'ocean' || colorTheme === 'forest' || colorTheme === 'violet') {
if (
colorTheme === 'ocean' ||
colorTheme === 'forest' ||
colorTheme === 'violet' ||
colorTheme === 'rose' ||
colorTheme === 'amber' ||
colorTheme === 'teal'
) {
document.documentElement.dataset.theme = colorTheme;
}
if (state?.radius === 'square') {