130 lines
2.9 KiB
TypeScript
130 lines
2.9 KiB
TypeScript
import { render } from 'preact';
|
|
import Button from '@mui/material/Button';
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Typography from '@mui/material/Typography';
|
|
import Container from '@mui/material/Container';
|
|
import { useState } from 'preact/compat';
|
|
import { createTheme, Theme, ThemeProvider } from '@mui/material/styles';
|
|
import DarkMode from '@mui/icons-material/DarkMode';
|
|
import LightMode from '@mui/icons-material/LightMode';
|
|
import { CssBaseline, Tooltip } from '@mui/material';
|
|
import Header, { ThemeWrapper } from './components/header';
|
|
import Results from './components/results';
|
|
|
|
function prefersDarkMode() {
|
|
const darkModeMql = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
|
|
return darkModeMql && darkModeMql.matches;
|
|
}
|
|
|
|
const darkTheme = createTheme({
|
|
palette: {
|
|
mode: 'dark',
|
|
primary: {
|
|
light: '#B79AD5',
|
|
main: '#A27EC9',
|
|
dark: '#8D61BD'
|
|
},
|
|
secondary: {
|
|
light: '#70DBFF',
|
|
main: '#47D1FF',
|
|
dark: '#1FC7FF'
|
|
},
|
|
error: {
|
|
light: '#E73936',
|
|
main: '#DD1C1A',
|
|
dark: '#B71815'
|
|
},
|
|
warning: {
|
|
light: '#FA804C',
|
|
main: '#F9611F',
|
|
dark: '#EF4C06'
|
|
},
|
|
info : {
|
|
light: '#FFEB99',
|
|
main: '#FFE066',
|
|
dark: '#FFDA47'
|
|
},
|
|
success: {
|
|
light: '#6ADC98',
|
|
main: '#48D480',
|
|
dark: '#2FC66B'
|
|
},
|
|
background: {
|
|
default: '#1D2535',
|
|
paper: '#242E42'
|
|
}
|
|
}
|
|
});
|
|
|
|
const lightTheme = createTheme({
|
|
palette: {
|
|
mode: 'light',
|
|
primary: {
|
|
light: '#B79AD5',
|
|
main: '#A27EC9',
|
|
dark: '#8D61BD'
|
|
},
|
|
secondary: {
|
|
light: '#70DBFF',
|
|
main: '#47D1FF',
|
|
dark: '#1FC7FF'
|
|
},
|
|
error: {
|
|
light: '#E73936',
|
|
main: '#DD1C1A',
|
|
dark: '#B71815'
|
|
},
|
|
warning: {
|
|
light: '#FA804C',
|
|
main: '#F9611F',
|
|
dark: '#EF4C06'
|
|
},
|
|
info : {
|
|
light: '#FFEB99',
|
|
main: '#FFE066',
|
|
dark: '#FFDA47'
|
|
},
|
|
success: {
|
|
light: '#6ADC98',
|
|
main: '#48D480',
|
|
dark: '#2FC66B'
|
|
},
|
|
background: {
|
|
default: '#EFFFFF',
|
|
paper: '#e8f1f1'
|
|
}
|
|
}
|
|
});
|
|
|
|
export function App() {
|
|
const [value, setValue] = useState(0);
|
|
const [theme, setTheme] = useState<ThemeWrapper>({
|
|
theme : prefersDarkMode() ? darkTheme : lightTheme,
|
|
value : prefersDarkMode() ? 'dark' : 'light'
|
|
});
|
|
|
|
const handleChange = (event: any, newValue: number) => {
|
|
setValue(newValue);
|
|
};
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(theme.value == 'dark'
|
|
? { theme : lightTheme, value : 'light' }
|
|
: { theme : darkTheme, value : 'dark' });
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider theme={theme.theme}>
|
|
<CssBaseline />
|
|
<Header theme={theme} toggleTheme={toggleTheme} />
|
|
<Container maxWidth="lg" sx={{marginTop: '10px'}}>
|
|
<Results />
|
|
</Container>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
render(<App />, document.getElementById('app'));
|