timetable-app

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

getMuiTheme.ts (1207B)

      1 import { grey } from '@mui/material/colors';
      2 import { createTheme } from '@mui/material/styles';
      3 
      4 const secondaryColor = {
      5 	main: '#e91e63',
      6 	light: '#ff6090',
      7 	dark: '#c2185b',
      8 	contrastText: '#fff',
      9 };
     10 
     11 const getMuiTheme = () => {
     12 	const theme = createTheme({
     13 		cssVariables: {
     14 			colorSchemeSelector: 'class',
     15 		},
     16 		colorSchemes: {
     17 			light: {
     18 				palette: {
     19 					primary: {
     20 						main: '#029494',
     21 						light: '#34A9A9',
     22 						dark: '#016767',
     23 						contrastText: '#fff',
     24 					},
     25 					secondary: secondaryColor,
     26 					background: {
     27 						default: grey[50],
     28 					},
     29 				},
     30 			},
     31 			dark: {
     32 				palette: {
     33 					primary: {
     34 						main: '#4db6ac',
     35 						light: '#70c4bc',
     36 						dark: '#357f78',
     37 						contrastText: '#000',
     38 					},
     39 					secondary: secondaryColor,
     40 				},
     41 			},
     42 		},
     43 		typography: {
     44 			fontFamily: [
     45 				'"Helvetica Neue"',
     46 				'Arial',
     47 				'"Hiragino Kaku Gothic ProN"',
     48 				'"Hiragino Sans"',
     49 				'"Noto Sans JP"',
     50 				'Meiryo',
     51 				'sans-serif',
     52 			].join(','),
     53 			h2: { fontSize: '1.5rem', fontWeight: 500 },
     54 			h3: { fontSize: '1.5rem' },
     55 		},
     56 		components: {
     57 			MuiStack: {
     58 				defaultProps: {
     59 					useFlexGap: true,
     60 				},
     61 			},
     62 		},
     63 	});
     64 
     65 	return theme;
     66 };
     67 
     68 export default getMuiTheme;