admin: automatic dark theme
Massimo Melina committed
Feb 5, 2022 at 11:42 UTC
8d4c24a855ad4942885282b823d7c6fd0eb7d815
2 files changed
+29
-4
admin/src/App.ts
+6
-4
@@ -1,19 +1,21 @@
1
import { createElement as h } from 'react';
2
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
3
-import MainMenu, { getMenuLabel, mainMenu } from './MainMenu';
4
-import { Box, Typography } from '@mui/material'
3
+import MainMenu, { getMenuLabel, mainMenu } from './MainMenu'
4
+import { Box, ThemeProvider, Typography } from '@mui/material'
5
import { Dialogs } from './dialog'
6
import logo from './logo.svg'
7
+import { useMyTheme } from './theme'
8
9
function App() {
9
- return h(BrowserRouter, {}, h(Routed))
10
+ return h(ThemeProvider, { theme: useMyTheme() },
11
+ h(BrowserRouter, {}, h(Routed)) )
12
}
13
14
function Routed() {
15
const loc = useLocation().pathname.slice(1)
16
const current = mainMenu.find(x => x.path === loc)
17
const title = current && (current.title || getMenuLabel(current))
16
- return h(Box, { display: 'flex' },
18
+ return h(Box, { display: 'flex', sx: { bgcolor:'background.default', color: 'text.primary' } },
19
h(MainMenu, { current }),
20
h(Box, {
21
component: 'main',
admin/src/theme.ts
new
+23
@@ -0,0 +1,23 @@
1
+import { createTheme, useMediaQuery } from '@mui/material'
2
+import { useMemo } from 'react'
3
+
4
+export function useMyTheme() {
5
+ const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
6
+ return useMemo(() => createTheme(!prefersDarkMode ? {} : {
7
+ palette: {
8
+ mode: 'dark',
9
+ text: { primary:'#aaa' },
10
+ primary: { main: '#357' },
11
+ },
12
+ components: {
13
+ MuiButton: {
14
+ styleOverrides: {
15
+ root: ({ ownerState }) =>
16
+ ownerState.color === 'primary' && {
17
+ color: ownerState.variant === 'contained' ? '#ddd' : '#68c'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ }), [prefersDarkMode])
23
+}