gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feature/website mobile version (#52)

Browse Source
This commit is contained in:
Daniel Lautzenheiser
2022-10-30 10:38:28 -04:00
committed by GitHub
parent 8c8a59093d
commit 1b522152d0
23 changed files with 1053 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
website/src/styles/theme.ts
View File

@ -2,71 +2,93 @@ import darkScrollbar from '@mui/material/darkScrollbar';
import { createTheme } from '@mui/material/styles';
import { useMemo } from 'react';
import type { PaletteMode, ThemeOptions } from '@mui/material';
const commonThemeProps: ThemeOptions = {};
import type { Components, PaletteMode, PaletteOptions, Theme } from '@mui/material';
const useCreateTheme = (mode: PaletteMode) => {
return useMemo(
const theme = useMemo(() => createTheme(), []);
const palette: PaletteOptions = useMemo(
() =>
mode === 'light'
? createTheme({
...commonThemeProps,
palette: {
mode,
primary: {
main: '#3764be',
},
secondary: {
main: '#3764be',
},
background: {
default: '#f9f9f9',
paper: '#f9f9f9',
},
? {
mode,
primary: {
main: '#3764be',
},
typography: {
fontFamily:
"'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
h1: {
fontSize: '42px',
fontWeight: 'bold',
},
secondary: {
main: '#3764be',
},
})
: createTheme({
...commonThemeProps,
components: {
MuiCssBaseline: {
styleOverrides: {
body: darkScrollbar(),
},
},
background: {
default: '#f9f9f9',
paper: '#f9f9f9',
},
palette: {
mode,
primary: {
main: '#3A69C7',
},
secondary: {
main: '#5ecffb',
},
background: {
default: '#2e3034',
paper: '#2e3034',
},
}
: {
mode,
primary: {
main: '#3A69C7',
},
typography: {
fontFamily:
"'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
h1: {
fontSize: '42px',
fontWeight: 'bold',
},
secondary: {
main: '#5ecffb',
},
}),
background: {
default: '#2e3034',
paper: '#2e3034',
},
},
[mode],
);
const components: Components<Omit<Theme, 'components'>> | undefined = useMemo(
() =>
mode === 'light'
? {}
: {
MuiCssBaseline: {
styleOverrides: {
body: darkScrollbar(),
},
},
},
[mode],
);
return useMemo(
() =>
createTheme({
palette,
typography: {
fontFamily: "'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
h1: {
fontSize: '42px',
fontWeight: 'bold',
lineHeight: 1.3,
marginBottom: '16px',
[theme.breakpoints.down('md')]: {
fontSize: '30px',
},
},
h2: {
fontSize: '24px',
lineHeight: 1.3,
position: 'relative',
[theme.breakpoints.down('md')]: {
fontSize: '20px',
},
},
h3: {
fontSize: '20px',
lineHeight: 1.3,
position: 'relative',
[theme.breakpoints.down('md')]: {
fontSize: '18px',
},
},
},
components,
}),
[components, palette, theme.breakpoints],
);
};
export default useCreateTheme;