Anna Sun
Initial OSS demo commit
2bd3674
raw
history blame
1.7 kB
import {createTheme} from '@mui/material/styles';
// import {red} from '@mui/material/colors';
const Z_INDEX_BASE = 9999999;
function getHtmlFontSize(): number | null {
let fontSize: number | null = null;
try {
// NOTE: Even when this is not explicitly set it still returns a value
const fontSizeString = window
.getComputedStyle(document.getElementsByTagName('html')[0])
.getPropertyValue('font-size');
fontSize = parseInt(fontSizeString, 10);
} catch (e) {
console.error('Error getting font size', e);
}
return fontSize;
}
const htmlFontSize = getHtmlFontSize();
const htmlFontSizeObject =
htmlFontSize == null ? {} : {htmlFontSize: htmlFontSize};
const themeObject = {
palette: {
background: {default: '#383838'},
primary: {
main: '#465A69',
},
info: {
main: '#0064E0',
},
text: {primary: '#1C2A33'},
},
typography: {
...htmlFontSizeObject,
fontFamily: [
'Optimistic Text',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
].join(','),
h1: {fontSize: 16, fontWeight: '500'},
body1: {fontSize: 16},
},
// Because our chrome extension uses a high z-index, we need to
// provide that base here so MUI stuff renders correctly
zIndex: {
mobileStepper: Z_INDEX_BASE + 1000,
fab: Z_INDEX_BASE + 1050,
speedDial: Z_INDEX_BASE + 1050,
appBar: Z_INDEX_BASE + 1100,
drawer: Z_INDEX_BASE + 1200,
modal: Z_INDEX_BASE + 1300,
snackbar: Z_INDEX_BASE + 1400,
tooltip: Z_INDEX_BASE + 1500,
},
};
console.log('themeObject', themeObject);
// A custom theme for this app
const theme = createTheme(themeObject);
export default theme;