feat: add dark mode with persistent user preference
Add dark mode support using Mantine's built-in color scheme system, persisted via a new Zustand preferences store. Includes a quick toggle in the app header and an enabled switch in User Preferences. Also removes the "AI Health Scores" title from the dashboard to reclaim vertical space. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
26
frontend/src/stores/preferencesStore.ts
Normal file
26
frontend/src/stores/preferencesStore.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
type ColorScheme = 'light' | 'dark';
|
||||
|
||||
interface PreferencesState {
|
||||
colorScheme: ColorScheme;
|
||||
toggleColorScheme: () => void;
|
||||
setColorScheme: (scheme: ColorScheme) => void;
|
||||
}
|
||||
|
||||
export const usePreferencesStore = create<PreferencesState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
colorScheme: 'light',
|
||||
toggleColorScheme: () =>
|
||||
set((state) => ({
|
||||
colorScheme: state.colorScheme === 'light' ? 'dark' : 'light',
|
||||
})),
|
||||
setColorScheme: (scheme) => set({ colorScheme: scheme }),
|
||||
}),
|
||||
{
|
||||
name: 'ledgeriq-preferences',
|
||||
},
|
||||
),
|
||||
);
|
||||
Reference in New Issue
Block a user