gawells/Stalwart-webui
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/stores/uiStore.ts
+8 -5
View File
@@ -9,7 +9,7 @@ import { persist } from 'zustand/middleware';
import { getApiBaseUrl } from '@/services/api';
export type Theme = 'light' | 'dark';
export type ColorTheme = 'stalwart' | 'ocean' | 'forest' | 'violet';
export type ColorTheme = 'stalwart' | 'ocean' | 'forest' | 'violet' | 'rose' | 'amber' | 'teal';
export type Radius = 'rounded' | 'square';
let logoAbortController: AbortController | null = null;
@@ -73,6 +73,9 @@ export const COLOR_THEMES: { value: ColorTheme; labelKey: string; fallback: stri
{ value: 'ocean', labelKey: 'appearance.theme.ocean', fallback: 'Ocean', swatch: 'oklch(0.546 0.215 262.9)' },
{ value: 'forest', labelKey: 'appearance.theme.forest', fallback: 'Forest', swatch: 'oklch(0.527 0.137 150.1)' },
{ value: 'violet', labelKey: 'appearance.theme.violet', fallback: 'Violet', swatch: 'oklch(0.541 0.281 293)' },
{ value: 'rose', labelKey: 'appearance.theme.rose', fallback: 'Rose', swatch: 'oklch(0.577 0.245 12)' },
{ value: 'amber', labelKey: 'appearance.theme.amber', fallback: 'Amber', swatch: 'oklch(0.65 0.16 70)' },
{ value: 'teal', labelKey: 'appearance.theme.teal', fallback: 'Teal', swatch: 'oklch(0.55 0.13 195)' },
];
export const useUIStore = create<UIState>()(
@@ -80,8 +83,8 @@ export const useUIStore = create<UIState>()(
(set, get) => ({
theme:
typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
colorTheme: 'stalwart',
radius: 'rounded',
colorTheme: 'ocean',
radius: 'square',
sidebarOpen: typeof window !== 'undefined' ? (window.matchMedia?.('(min-width: 768px)').matches ?? true) : true,
activeSection: '',
logoUrl: null,
@@ -166,8 +169,8 @@ export const useUIStore = create<UIState>()(
return (state) => {
if (state) {
applyThemeClass(state.theme);
applyColorThemeAttribute(state.colorTheme ?? 'stalwart');
applyRadiusAttribute(state.radius ?? 'rounded');
applyColorThemeAttribute(state.colorTheme ?? 'ocean');
applyRadiusAttribute(state.radius ?? 'square');
}
};
},