@mui/material/styles#createTheme TypeScript Examples
The following examples show how to use
@mui/material/styles#createTheme.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: theme.ts From Cromwell with MIT License | 6 votes |
|
getTheme = (palette?: TPalette | null) => {
const primary = palette?.primaryColor ?? "#9900CC";
const secondary = palette?.secondaryColor ?? "#333333";
return createTheme({
palette: {
primary: {
main: primary,
light: primary,
dark: primary,
},
secondary: {
main: secondary,
light: secondary,
dark: secondary,
},
},
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
},
});
}
Example #2
| Source File: theme.tsx From cli with Apache License 2.0 | 6 votes |
|
theme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#2e45ba',
},
secondary: {
main: '#004990',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
typography: {
fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
// Material-UI uses rem units for the font size. This will change the base size for the entire search page
// More info at https://material-ui.com/customization/typography/#font-size
fontSize: 17,
},
})
Example #3
| Source File: theme.ts From react-hook-form-mui with MIT License | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: '#556cd6'
},
secondary: {
main: '#19857b'
},
error: {
main: red.A400
}
}
})
Example #4
| Source File: index.ts From houston with MIT License | 6 votes |
|
export default function generateTheme(theme?: IHoustonTheme) {
const newPalette = palette(theme);
const muiTheme = createTheme({
palette: newPalette,
components: components(newPalette, theme),
typography: typography(theme),
spacing: theme.spacing.fn,
breakpoints: {
values: Object.keys(theme.breakpoints).reduce((acc, key) => {
if (['up', 'down'].includes(key)) return acc;
return { ...acc, [key]: Number(theme.breakpoints[key].replace('px', '')) };
}, {}) as any
}
});
Object.keys(theme).forEach(key => {
if (!muiTheme[key]) {
muiTheme[key] = theme[key];
return;
}
Object.keys(theme[key]).forEach(childKey => {
if (key === 'breakpoints' && ['up', 'down'].includes(childKey)) return;
muiTheme[key][childKey] = theme[key][childKey];
});
});
return muiTheme;
}
Example #5
| Source File: index.ts From next-typescript-materialui-jest-starter with MIT License | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: "#DE6A0A",
},
secondary: {
main: "#0BDE7D",
},
background: {
default: "#fff",
},
},
})
Example #6
| Source File: App.tsx From NekoMaid with MIT License | 6 votes |
|
AppWrap: React.FC = () => {
const isDark = useMediaQuery('(prefers-color-scheme: dark)')
const mode = localStorage.getItem('NekoMaid:colorMode')
const [darkMode, setDarkMode] = useState(mode ? mode === 'dark' : isDark)
const primary = (colors as any)[localStorage.getItem('NekoMaid:color') || 'blue']
;(document.getElementById('theme-color-meta') as HTMLMetaElement)?.setAttribute('content', primary[500])
const theme = React.useMemo(() => createTheme({
typography,
components: {
MuiCssBaseline: {
styleOverrides: {
body: darkMode ? darkScrollbar() : null
}
}
},
palette: {
primary,
mode: darkMode ? 'dark' : 'light',
background: darkMode ? { default: '#212121', paper: '#212121' } : { default: '#f4f6f8', paper: '#ffffff' }
}
}, (muiLanguages as any)[lang.muiName]), [darkMode])
return <ThemeProvider theme={theme}>
<DialogWrapper />
<Snackbars />
<App darkMode={darkMode} setDarkMode={setDarkMode} />
</ThemeProvider>
}
Example #7
| Source File: theme.ts From bouncecode-cms with GNU General Public License v3.0 | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
})
Example #8
| Source File: theme.ts From professor-prebid with Apache License 2.0 | 6 votes |
|
overlayTheme = createTheme({
palette,
typography,
breakpoints: {
values: {
xs: 0,
sm: 152,
md: 292,
lg: 720,
xl: 975,
},
},
})
Example #9
| Source File: theme.ts From professor-prebid with Apache License 2.0 | 6 votes |
|
popupTheme = createTheme({
palette,
typography,
breakpoints: {
values: {
xs: 0,
sm: 536,
md: 800,
lg: 1200,
xl: 2400,
},
},
})
Example #10
| Source File: theme.ts From ui-schema with MIT License | 6 votes |
|
themeDark = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#05aeca',
dark: '#033944',
},
secondary: {
// light: '#d8eed4',
main: '#bd90e0',
// dark: '#002634',
},
background: {
// paper: '#111017',
paper: '#121015',
// default: '#070b13',
default: '#06050d',
},
text: {
// primary: '#abb8b9',
primary: '#b0bebf',
secondary: '#9b88ad',
},
action: {
hoverOpacity: 0.2,
},
},
...universal,
components: {
// ...universal.components,
MuiPaper: {
styleOverrides: {root: {backgroundImage: 'unset'}},
},
MuiLink: {
styleOverrides: {underlineAlways: {textDecoration: 'none'}},
},
},
})
Example #11
| Source File: theme.ts From ui-schema with MIT License | 6 votes |
|
themeLight = createTheme({
palette: {
mode: 'light',
primary: {
main: '#0590a7',
dark: '#033944',
},
secondary: {
// light: '#d8eed4',
main: '#bd90e0',
// dark: '#002634',
},
background: {
paper: '#fcfcfc',
default: '#e7e7e8',
},
text: {
primary: '#2f2f3d',
secondary: '#6d388a',
},
action: {
hoverOpacity: 0.2,
},
},
...universal,
components: {
// ...universal.components,
MuiLink: {
styleOverrides: {underlineAlways: {textDecoration: 'none'}},
},
},
})
Example #12
| Source File: darkTheme.ts From react-flight-tracker with MIT License | 6 votes |
|
rawDarkTheme = createTheme({
map: {
style: 'mapbox://styles/mapbox/dark-v10'
},
typography: {
htmlFontSize: 10,
},
palette: {
mode: 'dark',
primary: {
main: blue[500],
},
secondary: {
main: pink[500],
},
background: {
paper: grey[800]
},
command: {
main: purple[500],
light: purple[400],
dark: purple[600],
}
},
})
Example #13
| Source File: lightTheme.ts From react-flight-tracker with MIT License | 6 votes |
|
rawLightTheme = createTheme({
map: {
style: 'mapbox://styles/mapbox/light-v10'
},
typography: {
htmlFontSize: 10,
},
palette: {
mode: 'light',
primary: {
main: blue[500],
},
secondary: {
main: pink[500],
},
background: {
paper: grey[200]
},
command: {
main: purple[500],
light: purple[400],
dark: purple[600],
}
},
})
Example #14
| Source File: pineappleTheme.ts From react-flight-tracker with MIT License | 6 votes |
|
rawPineappleTheme = createTheme({
map: {
style: 'mapbox://styles/mapbox/dark-v10'
},
typography: {
htmlFontSize: 10,
},
palette: {
mode: 'dark',
primary: {
main: teal[500],
},
secondary: {
main: amber[500],
},
background: {
paper: grey[800]
},
command: {
main: purple[500],
light: purple[400],
dark: purple[600],
}
},
})
Example #15
| Source File: theme.ts From Cromwell with MIT License | 6 votes |
|
getTheme = (palette?: TPalette | null) => {
const primary = palette?.primaryColor ?? primaryColor;
const secondary = palette?.secondaryColor ?? secondaryColor;
return createTheme({
palette: {
primary: {
main: primary,
light: primary,
dark: primary,
},
secondary: {
main: secondary,
light: secondary,
dark: secondary,
},
},
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
},
},
});
}
Example #16
| Source File: Provider.tsx From react-pwa with MIT License | 5 votes |
|
function CustomThemeProvider({ children }: CustomThemeProviderProps) {
const [theme] = useTheme();
return <ThemeProvider theme={createTheme(themes[theme])}>{children}</ThemeProvider>;
}
Example #17
| Source File: theme.ts From frontend with MIT License | 5 votes |
|
theme: Theme = createTheme(themeOptions)
Example #18
| Source File: theme.ts From mui-toolpad with MIT License | 5 votes |
|
theme = createTheme({
components: {
MuiTextField: {
defaultProps: {
size: 'small',
},
},
MuiButton: {
defaultProps: {
size: 'small',
},
},
MuiIconButton: {
defaultProps: {
size: 'small',
},
},
MuiCheckbox: {
defaultProps: {
size: 'small',
},
},
MuiFormControl: {
defaultProps: {
size: 'small',
},
},
MuiSelect: {
defaultProps: {
size: 'small',
},
},
MuiToggleButtonGroup: {
defaultProps: {
size: 'small',
},
},
MuiAutocomplete: {
defaultProps: {
size: 'small',
},
},
MuiToolbar: {
defaultProps: {
variant: 'dense',
},
},
MuiList: {
defaultProps: {
dense: true,
},
},
MuiDataGrid: {
defaultProps: {
density: 'compact',
},
},
MuiSvgIcon: {
defaultProps: {
fontSize: 'small',
},
},
},
palette: {
// mode: 'dark',
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
},
})
Example #19
| Source File: App.tsx From metaplex with Apache License 2.0 | 5 votes |
|
function App() {
const colorModeCtx = useColorMode();
React.useEffect(() => {}, [colorModeCtx.mode]);
const theme = React.useMemo(() => {
let mode;
if (colorModeCtx.mode === 'dark' || !colorModeCtx.mode) {
mode = 'dark';
} else {
mode = 'light';
}
return createTheme({
palette: {
mode,
},
});
}, [colorModeCtx.mode]);
const { width } = useWindowDimensions();
return (
<div className="App" style={{ backgroundColor: 'transparent' }}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<CssBaseline />
<Header narrow={width < 670} />
<Box
maxWidth="60ch"
width="calc(100% - 60px)"
style={{
marginLeft: 'auto',
marginRight: 'auto',
}}
>
<Box height="40px" />
<Switch>
<Route path="/entanglement/create" component={Create} />
<Route path="/entanglement/show" component={Show} />
<Route path="/entanglement/swap" component={Swap} />
<Route path="/entanglement/search" component={Search} />
<Route path="/entanglement/wizard" component={Wizard} />
<Route path="/entanglement/" component={About} />
</Switch>
<Box height="80px" />
</Box>
</BrowserRouter>
</ThemeProvider>
</div>
);
}
Example #20
| Source File: theme.ts From usehooks-ts with MIT License | 5 votes |
|
makeTheme = (variant: ThemeOptions): Theme => {
const common: ThemeOptions = {
palette: {
error: {
main: red.A400,
},
dracula,
gradient: {
primary:
'linear-gradient(140deg, rgb(57, 45, 209) 0%, rgb(142, 41, 149) 100%);',
},
},
shape: {
borderRadius: 8,
},
typography: {
fontFamily: [
'Fira Sans Regular',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
},
components: {
MuiCssBaseline: {
styleOverrides: `
@font-face {
font-family: Fira Sans Regular;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(${FiraRegular}) format(truetype);
}
@font-face {
font-family: Fira Code;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(${FiraCode}) format('woOpenTypeff2')
local('Open Sans Regular'),
local('OpenSans-Regular');
}
`,
},
MuiLink: {
defaultProps: {
underline: 'hover',
},
},
},
}
const theme = createTheme(deepMerge(common, variant))
return responsiveFontSizes(theme)
}
Example #21
| Source File: ToolbarMenu.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
theme = createTheme(BLUIThemes.blue)
Example #22
| Source File: Spacer.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
theme = createTheme(BLUIThemes.blue)
Example #23
| Source File: Drawer.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
theme = createTheme(BLUIThemes.blue)
Example #24
| Source File: renderCurrency.tsx From abrechnung with GNU Affero General Public License v3.0 | 5 votes |
|
defaultTheme = createTheme()
Example #25
| Source File: theme.ts From tams-club-cal with MIT License | 5 votes |
|
theme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#00c853',
light: '#96ed98',
dark: '#31893d',
},
secondary: {
main: '#ffcc80',
light: '#ffffb0',
dark: '#ca9b52',
},
background: {
default: '#f3f8f5',
paper: '#ffffff',
},
},
typography: {
h1: {
fontSize: '2rem',
},
h2: {
fontSize: '2.5rem',
lineHeight: 1.167,
},
h3: {
fontSize: '1.25rem',
fontWeight: '500',
},
h4: {
fontSize: '1.2rem',
fontWeight: '500',
color: '#555555',
},
h5: {
fontFamily: ['Bubblegum Sans', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
fontSize: '1.5rem',
},
h6: {
fontWeight: '600',
},
},
})
Example #26
| Source File: darkTheme.ts From tams-club-cal with MIT License | 5 votes |
|
theme = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#00c853',
light: '#96ed98',
dark: '#31893d',
},
secondary: {
main: '#ffcc80',
light: '#ffffb0',
dark: '#ca9b52',
},
background: {
default: '#303030',
paper: '#303030',
},
},
typography: {
h1: {
fontSize: '2rem',
},
h2: {
fontSize: '2.5rem',
lineHeight: 1.167,
},
h3: {
fontSize: '1.25rem',
fontWeight: '500',
},
h4: {
fontSize: '1.2rem',
fontWeight: '500',
color: '#aaaaaa',
},
h5: {
fontFamily: ['Bubblegum Sans', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
fontSize: '1.5rem',
},
h6: {
fontWeight: '600',
},
},
})
Example #27
| Source File: AppTheme.tsx From airmessage-web with Apache License 2.0 | 5 votes |
|
export default function AppTheme(props: {children: React.ReactNode}) {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const theme = React.useMemo(() => createTheme({
typography: {
fontFamily: [
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(","),
},
palette: {
mode: prefersDarkMode ? "dark" : "light",
primary: {
main: "#448AFF",
dark: "#366FCC",
light: "#52A7FF",
},
messageIncoming: prefersDarkMode ? {
main: "#393939",
contrastText: "#FFF"
} : {
main: "#EDEDED",
contrastText: "rgba(0, 0, 0, 0.87)"
},
messageOutgoing: {
main: "#448AFF",
contrastText: "#FFF",
},
messageOutgoingTextMessage: {
main: "#2ECC71",
contrastText: "#FFF",
},
divider: prefersDarkMode ? "rgba(255, 255, 255, 0.1)" : "#EEEEEE",
background: {
default: prefersDarkMode ? "#1E1E1E" : "#FFFFFF",
sidebar: prefersDarkMode ? "#272727" : "#FAFAFA"
}
},
components: {
MuiCssBaseline: {
styleOverrides: {
"@global": {
html: {
scrollbarColor: prefersDarkMode ? "#303030 #424242" : undefined
}
}
}
}
}
}), [prefersDarkMode]);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{props.children}
</ThemeProvider>
);
}
Example #28
| Source File: MessageAttachmentImage.tsx From airmessage-web with Apache License 2.0 | 5 votes |
|
export default function MessageAttachmentImage(props: {data: ArrayBuffer | Blob, name: string, type: string, partProps: MessagePartProps, tapbacks?: TapbackItem[], stickers?: StickerItem[]}) {
const [imageURL, setImageURL] = useState<string | undefined>(undefined);
const [previewOpen, setPreviewOpen] = useState(false);
const theme = createTheme({
palette: {
mode: "dark",
messageIncoming: undefined,
messageOutgoing: undefined,
messageOutgoingTextMessage: undefined
}
});
useEffect(() => {
//Creating a new image URL
const imageURL = URL.createObjectURL(props.data instanceof Blob ? props.data : new Blob([props.data], {type: props.type}));
//Setting the image URL
setImageURL(imageURL);
//Cleaning up the URL
return () => URL.revokeObjectURL(imageURL);
}, [props.data, props.type, setImageURL]);
function downloadFile(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
//So that we don't dismiss the backdrop
event.stopPropagation();
if(!imageURL) return;
downloadURL(imageURL, props.type, props.name);
}
//All of the styles, without the border radius
const buttonStyle: Partial<MessagePartProps> = {...props.partProps};
delete buttonStyle["borderRadius"];
return (
<React.Fragment>
<ThemeProvider theme={theme}>
<Backdrop className={stylesImage.lightboxBackdrop} open={previewOpen} onClick={() => setPreviewOpen(false)}>
<Toolbar className={stylesImage.lightboxToolbar}>
<IconButton edge="start">
<ArrowBack />
</IconButton>
<Typography variant="h6" color="textPrimary" style={{flexGrow: 1}}>{props.name}</Typography>
<Tooltip title="Save">
<IconButton onClick={downloadFile}>
<SaveAlt />
</IconButton>
</Tooltip>
</Toolbar>
<div className={stylesImage.lightboxContainer}>
<div style={{width: "100%", height: "100%", backgroundImage: `url("${imageURL}")`, backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundSize: "contain"}} />
</div>
</Backdrop>
</ThemeProvider>
<DecorativeMessageBubble element={ButtonBase} className={styles.contentBubble} style={props.partProps} onClick={() => setPreviewOpen(true)} tapbacks={props.tapbacks} stickers={props.stickers}>
<img src={imageURL} style={{borderRadius: props.partProps.borderRadius}} alt="" />
</DecorativeMessageBubble>
{/*<ButtonBase className={styles.contentBubble} style={props.partProps} onClick={() => setPreviewOpen(true)}>*/}
{/* <img src={imageURL} style={{borderRadius: props.partProps.borderRadius}} alt="" />*/}
{/*</ButtonBase>*/}
</React.Fragment>
);
}
Example #29
| Source File: AppBar.test.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
theme = createTheme(BLUIThemes.blue)
