MUI THEME
unknown
typescript
a year ago
13 kB
4
Indexable
import { createTheme } from "@mui/material/styles";
export const muiTheme = createTheme({
palette: {
mode: "dark",
primary: {
main: "#2ea1f8",
contrastText: "#ffffff",
dark: "#1878ba",
light: "#c2e1f9"
},
secondary: {
main: "#FFF",
dark: "#1878ba"
},
common: {
darkBackground: "#1D242A",
appHeight: "60px",
contrast: "#7F8FA4"
},
background: {
default: "#26303C",
paper: "#2A3744",
backdrop: "rgba(0, 0, 0, 0.4)",
blackBackground: "#121212",
dark60: "#354052",
tableRowHover: "#546780"
},
text: {
primary: "#ffffff",
secondary: "#c2e1f9",
disabled: "#7f8fa4"
},
success: {
main: "#a5ffb9",
dark: "#71ba81",
light: "#dfffe6"
},
warning: {
main: "#ffab2b",
dark: "#726046"
},
error: {
main: "#ff4d6a",
dark: "#be4a5d",
light: "#be4a5d"
},
divider: "#364556"
},
typography: {
fontFamily: "Rubik, sans-serif",
fontWeightLight: 300,
fontSize: 14,
h1: {
fontSize: 32,
lineHeight: 3,
fontWeight: 500
},
h2: {
fontSize: 24,
lineHeight: 2.25,
fontWeight: 500
},
h3: {
fontSize: 20,
lineHeight: 2,
fontWeight: 500
},
h4: {
fontSize: 16,
lineHeight: 1.25,
fontWeight: 500
},
h5: {
fontSize: 12,
lineHeight: 1,
fontWeight: 500
},
h6: {
fontSize: 10,
lineHeight: 1,
fontWeight: 500
},
subtitle1: {
fontSize: 20,
fontWeight: 300,
lineHeight: 2
},
subtitle2: {
fontSize: 16,
fontWeight: 400,
lineHeight: 1.25
},
body1: {
fontSize: 14,
lineHeight: 1.25
},
caption: {
color: "#c2e1f9"
}
},
components: {
MuiTooltip: {
defaultProps: {
arrow: true
}
},
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
fontWeight: theme.typography.fontWeightRegular,
textTransform: 'none'
}),
disabled: ({ theme }) => ({
borderColor: theme.palette.divider
})
},
defaultProps: {
size: "small"
},
variants: [
{
props: { color: "secondary" },
style: ({ theme }) => ({
borderColor: "#586069",
fontWeight: theme.typography.fontWeightRegular,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary,
"&:hover": {
borderColor: theme.palette.text.primary,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default
}
})
}
]
},
MuiButtonGroup: {
defaultProps: {
size: "small"
}
},
MuiGrid: {
styleOverrides: {}
},
MuiCheckbox: {
styleOverrides: {
checked: ({ theme }) => ({
color: theme.palette.text.primary
})
},
defaultProps: {
size: "small"
}
},
MuiFab: {
defaultProps: {
size: "small"
}
},
MuiFormControl: {
defaultProps: {
margin: "dense",
size: "small"
}
},
MuiAutocomplete: {
styleOverrides: {
root: ({ theme }) => ({
"& .MuiFormLabel-root": {
color: theme.palette.common.contrast
}
})
}
},
MuiFormControlLabel: {
styleOverrides: {
root: {
marginRight: 0,
marginLeft: 0
},
labelPlacementStart: ({ theme }) => ({
".MuiFormControlLabel-label": {
marginRight: theme.spacing(1),
marginLeft: 0
}
})
}
},
MuiFormHelperText: {
defaultProps: {
margin: "dense"
}
},
MuiIconButton: {
defaultProps: {
size: "small"
}
},
MuiInputBase: {
styleOverrides: {
root: {
"[type='number']::-webkit-inner-spin-button": {
display: "none"
},
"[type='number']": {
MozAppearance: "textfield"
}
}
},
defaultProps: {
margin: "dense"
}
},
MuiInputLabel: {
defaultProps: {
margin: "dense"
}
},
MuiRadio: {
defaultProps: {
size: "medium",
color: "secondary"
},
styleOverrides: {
root: {}
}
},
MuiSwitch: {
styleOverrides: {
root: ({ theme }) => ({
width: 42,
height: 26,
padding: 0,
"& .MuiSwitch-switchBase": {
padding: 0,
margin: 2,
transitionDuration: "300ms",
"&.Mui-checked": {
transform: "translateX(16px)",
color: theme.palette.text.primary,
"& + .MuiSwitch-track": {
backgroundColor: theme.palette.primary.main,
opacity: 1,
border: 0
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: 0.5
}
},
"&.Mui-focusVisible .MuiSwitch-thumb": {
color: theme.palette.primary.main,
border: "6px solid #fff"
},
"&.Mui-disabled .MuiSwitch-thumb": {
color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600]
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: theme.palette.mode === "light" ? 0.7 : 0.3
}
},
"& .MuiSwitch-thumb": {
boxSizing: "border-box",
width: 22,
height: 22
},
"& .MuiSwitch-track": {
borderRadius: 26 / 2,
backgroundColor: "#546780",
opacity: 1,
transition: theme.transitions.create(["background-color"], {
duration: 500
})
}
})
},
defaultProps: {
size: "small",
disableRipple: true
}
},
MuiTextField: {
defaultProps: {
margin: "dense",
size: "small"
}
},
MuiAppBar: {
defaultProps: {
color: "primary"
}
},
MuiTab: {
styleOverrides: {
root: ({ theme }) => ({
textTransform: "none"
})
}
},
MuiTabs: {
defaultProps: {
textColor: "primary"
}
},
MuiAccordion: {
styleOverrides: {
root: {
boxShadow: "none",
"&.Mui-expanded:before": {
opacity: 1
}
}
}
},
MuiTableCell: {
styleOverrides: {
root: ({ theme }) => ({
borderColor: theme.palette.background.paper
})
}
},
MuiOutlinedInput: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
":hover:not(:focus-within) .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.text.disabled
}
})
}
},
MuiSelect: {
styleOverrides: {
standard: ({ theme }) => ({
backgroundColor: "red"
})
}
},
MuiMenuItem: {
styleOverrides: {
root: ({ theme }) => ({
padding: theme.spacing(2)
})
}
},
MuiAccordionSummary: {
styleOverrides: {
root: ({ theme }) => ({
color: theme.palette.text.secondary,
backgroundColor: theme.palette.background.default
}),
content: {
display: "flex",
alignItems: "center"
}
}
},
MuiAccordionDetails: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: "0 4px 4px 0"
})
}
},
MuiSlider: {
styleOverrides: {
thumb: {
margin: 0,
backgroundColor: "#FFF",
border: "1px solid #2EA1F8",
width: 24,
height: 24
},
valueLabel: {
fontSize: 14,
lineHeight: 1.25,
fontWeight: 300,
background: "unset",
padding: 0,
width: 30,
height: 30,
borderRadius: "50% 50% 50% 0",
backgroundColor: "#2EA1F8",
color: "#fff",
transformOrigin: "bottom",
transform: "translate(35%, -100%) rotate(-45deg) scale(0)",
"&:before": { display: "none" },
"&.MuiSlider-valueLabelOpen": {
transform: "translate(35%, -100%) rotate(-45deg) scale(1)"
},
"& > *": {
transform: "rotate(45deg)"
}
}
}
},
MuiDivider: {
variants: [
{
props: { variant: "dashed" },
style: {
display: "flex",
borderColor: "#7F8FA4",
width: "100%",
borderStyle: "dashed",
margin: "1em 0"
}
}
]
},
MuiDrawer: {
variants: [
{
props: { variant: "persistent" },
style: ({ theme }) => ({
flexShrink: 0,
whiteSpace: "nowrap",
backgroundColor: theme.palette.background.blackBackground,
"& .MuiDrawer-paper": {
boxShadow: `0 0 20px 0 ${theme.palette.background.backdrop}`,
padding: theme.spacing(2),
minWidth: 300,
backgroundColor: theme.palette.background.blackBackground,
backgroundImage: "none",
border: 0,
top: theme.palette.common.appHeight,
height: `calc(100% - (2 * ${theme.palette.common.appHeight}) - ${theme.spacing(4)})`
}
})
},
{
props: { variant: "temporary" },
style: ({ theme }) => ({
flexShrink: 0,
whiteSpace: "nowrap",
"& .MuiDrawer-paper": {
boxShadow: `0 0 20px 0 ${theme.palette.background.backdrop}`,
padding: theme.spacing(2),
minWidth: 300,
backgroundColor: theme.palette.background.blackBackground,
backgroundImage: "none",
border: 0,
top: theme.palette.common.appHeight,
height: `calc(100% - (2 * ${theme.palette.common.appHeight}) - ${theme.spacing(4)})`
}
})
}
],
defaultProps: {}
},
MuiDialogActions: {
styleOverrides: {
root: ({ theme }) => ({
marginTop: theme.spacing(3)
})
}
},
MuiDialog: {
styleOverrides: {},
variants: [
{
props: { color: "warning" },
style: ({ theme }) => ({
"& .MuiPaper-root": {
border: `1px solid ${theme.palette.warning.main}`,
backgroundColor: theme.palette.background.blackBackground,
backgroundImage: "none"
}
})
},
{
props: { color: "success" },
style: ({ theme }) => ({
"& .MuiPaper-root": {
border: `1px solid ${theme.palette.success.main}`,
backgroundColor: theme.palette.background.blackBackground,
backgroundImage: "none"
}
})
},
{
props: { color: "info" },
style: ({ theme }) => ({
"& .MuiPaper-root": {
border: `1px solid ${theme.palette.info.main}`,
backgroundColor: theme.palette.background.blackBackground,
backgroundImage: "none"
}
})
},
{
props: { color: "error" },
style: ({ theme }) => ({
"& .MuiPaper-root": {
border: `1px solid ${theme.palette.error.main}`,
backgroundColor: theme.palette.background.blackBackground,
backgroundImage: "none"
}
})
}
],
defaultProps: {
color: "primary"
}
}
},
spacing: 8,
shape: {
borderRadius: 4
}
});
declare module "@mui/material/Divider" {
interface DividerPropsVariantOverrides {
dashed: true;
}
}
declare module "@mui/material/styles/createPalette" {
interface CommonColors {
darkBackground: string;
appHeight: string;
contrast: string;
}
interface TypeBackground {
backdrop: string;
blackBackground: string;
dark60: string;
tableRowHover: string;
}
}
Editor is loading...
Leave a Comment