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:
@@ -414,7 +414,6 @@ export function DashboardPage() {
|
||||
<Center h={200}><Loader /></Center>
|
||||
) : (
|
||||
<>
|
||||
<Text size="sm" fw={600} c="dimmed">AI Health Scores</Text>
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }}>
|
||||
<HealthScoreCard
|
||||
score={healthScores?.operating || null}
|
||||
|
||||
@@ -6,9 +6,11 @@ import {
|
||||
IconUser, IconPalette, IconClock, IconBell, IconEye,
|
||||
} from '@tabler/icons-react';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
import { usePreferencesStore } from '../../stores/preferencesStore';
|
||||
|
||||
export function UserPreferencesPage() {
|
||||
const { user, currentOrg } = useAuthStore();
|
||||
const { colorScheme, toggleColorScheme } = usePreferencesStore();
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
@@ -66,7 +68,10 @@ export function UserPreferencesPage() {
|
||||
<Text size="sm">Dark Mode</Text>
|
||||
<Text size="xs" c="dimmed">Switch to dark color theme</Text>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
<Switch
|
||||
checked={colorScheme === 'dark'}
|
||||
onChange={toggleColorScheme}
|
||||
/>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
@@ -76,7 +81,7 @@ export function UserPreferencesPage() {
|
||||
<Switch disabled />
|
||||
</Group>
|
||||
<Divider />
|
||||
<Text size="xs" c="dimmed" ta="center">Display preferences coming in a future release</Text>
|
||||
<Text size="xs" c="dimmed" ta="center">More display preferences coming in a future release</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user