yashwin/VMS-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix first define color scheme

Browse Source
This commit is contained in:
NlightN22 2024-09-01 13:23:57 +07:00
parent f760a9f745
commit 2ca9195fbf
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.tsx
View File

@ -4,12 +4,11 @@ import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications'; import { Notifications } from '@mantine/notifications';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { getCookie, setCookie } from 'cookies-next'; import { getCookie, setCookie } from 'cookies-next';
import { useState } from 'react'; import { useEffect, useState } from 'react';
import AppBody from './AppBody'; import AppBody from './AppBody';
import { FfprobeModal } from './shared/components/modal.windows/FfprobeModal'; import { FfprobeModal } from './shared/components/modal.windows/FfprobeModal';
import { VaInfoModal } from './shared/components/modal.windows/VaInfoModal'; import { VaInfoModal } from './shared/components/modal.windows/VaInfoModal';
import { useRealmAccessRoles } from './hooks/useRealmAccessRoles'; import { isProduction } from './shared/env.const';
import { useAdminRole } from './hooks/useAdminRole';
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
@ -32,13 +31,23 @@ declare module '@mantine/modals' {
function App() { function App() {
const systemColorScheme = useColorScheme() const systemColorScheme = useColorScheme()
const [colorScheme, setColorScheme] = useState<ColorScheme>(getCookie('mantine-color-scheme') as ColorScheme || systemColorScheme)
const cookieColorScheme = getCookie('mantine-color-scheme') as ColorScheme | null
const selectedColorScheme = cookieColorScheme || systemColorScheme
const [colorScheme, setColorScheme] = useState<ColorScheme>(selectedColorScheme)
const toggleColorScheme = (value?: ColorScheme) => { const toggleColorScheme = (value?: ColorScheme) => {
const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark'); const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
setColorScheme(nextColorScheme) setColorScheme(nextColorScheme)
setCookie('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 }); setCookie('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
} }
useEffect(() => {
setColorScheme(selectedColorScheme);
}, [selectedColorScheme]);
return ( return (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<div className="App"> <div className="App">