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:
co-authored by
Claude Sonnet 5
parent
7a96fa6786
commit
8c1e826d63
+8
-1
@@ -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') {
|
||||
|
||||
Reference in New Issue
Block a user