olsch01
4759374883
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>
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { MantineProvider } from '@mantine/core';
|
|
import { Notifications } from '@mantine/notifications';
|
|
import { ModalsProvider } from '@mantine/modals';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import '@mantine/core/styles.css';
|
|
import '@mantine/dates/styles.css';
|
|
import '@mantine/notifications/styles.css';
|
|
import { App } from './App';
|
|
import { theme } from './theme/theme';
|
|
import { usePreferencesStore } from './stores/preferencesStore';
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: 1,
|
|
refetchOnWindowFocus: false,
|
|
staleTime: 30_000,
|
|
},
|
|
},
|
|
});
|
|
|
|
function Root() {
|
|
const colorScheme = usePreferencesStore((s) => s.colorScheme);
|
|
|
|
return (
|
|
<MantineProvider theme={theme} forceColorScheme={colorScheme}>
|
|
<Notifications position="top-right" />
|
|
<ModalsProvider>
|
|
<QueryClientProvider client={queryClient}>
|
|
<BrowserRouter>
|
|
<App />
|
|
</BrowserRouter>
|
|
</QueryClientProvider>
|
|
</ModalsProvider>
|
|
</MantineProvider>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
<React.StrictMode>
|
|
<Root />
|
|
</React.StrictMode>,
|
|
);
|