inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-08-10 05:40:55 +00:00
Code Activity

adapt theme context

Browse Source
This commit is contained in:
Matthias Mair
2024-04-15 00:45:06 +02:00
parent f5d12b8155
commit a00eed2451
1 changed files with 25 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/frontend/src/contexts/ThemeContext.tsx
View File

@@ -1,11 +1,10 @@
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
ColorScheme,
ColorSchemeProvider,
MantineProvider, MantineProvider,
MantineThemeOverride createTheme,
localStorageColorSchemeManager
} from '@mantine/core'; } from '@mantine/core';
import { useColorScheme, useLocalStorage } from '@mantine/hooks'; import { useColorScheme } from '@mantine/hooks';
import { ModalsProvider } from '@mantine/modals'; import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications'; import { Notifications } from '@mantine/notifications';
@@ -28,22 +27,16 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
// Color Scheme // Color Scheme
const preferredColorScheme = useColorScheme(); const preferredColorScheme = useColorScheme();
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({ const colorSchemeManager = localStorageColorSchemeManager({
key: 'scheme', key: 'scheme'
defaultValue: preferredColorScheme
}); });
const toggleColorScheme = (value?: ColorScheme) => {
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
myTheme.colorScheme = colorScheme;
};
// Theme // Theme
const myTheme: MantineThemeOverride = { const myTheme = createTheme({
colorScheme: colorScheme,
primaryColor: primaryColor, primaryColor: primaryColor,
white: whiteColor, white: whiteColor,
black: blackColor, black: blackColor,
loader: loader, //loader: loader,
defaultRadius: radius, defaultRadius: radius,
breakpoints: { breakpoints: {
xs: '30em', xs: '30em',
@@ -52,27 +45,26 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
lg: '74em', lg: '74em',
xl: '90em' xl: '90em'
} }
}; });
return ( return (
<ColorSchemeProvider <MantineProvider
colorScheme={colorScheme} theme={myTheme}
toggleColorScheme={toggleColorScheme} defaultColorScheme={preferredColorScheme}
colorSchemeManager={colorSchemeManager}
> >
<MantineProvider theme={myTheme} withGlobalStyles withNormalizeCSS> <Notifications />
<Notifications /> <ModalsProvider
<ModalsProvider labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
labels={{ confirm: t`Submit`, cancel: t`Cancel` }} modals={{
modals={{ qr: QrCodeModal,
qr: QrCodeModal, info: ServerInfoModal,
info: ServerInfoModal, about: AboutInvenTreeModal,
about: AboutInvenTreeModal, license: LicenseModal
license: LicenseModal }}
}} >
> {children}
{children} </ModalsProvider>
</ModalsProvider> </MantineProvider>
</MantineProvider>
</ColorSchemeProvider>
); );
} }