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>
27 lines
651 B
TypeScript
27 lines
651 B
TypeScript
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',
|
|
},
|
|
),
|
|
);
|