@mui/material#createTheme TypeScript Examples
The following examples show how to use
@mui/material#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.tsx From GTAV-NativeDB with MIT License | 6 votes |
|
function Theme({ children }: { children: ReactNode }) {
const settings = useSettings()
const systemIsDark = useMediaQuery('(prefers-color-scheme: dark)')
const dark = settings.theme === 'dark' || (settings.theme === 'system' && systemIsDark)
const theme = useMemo(
() => createTheme(dark ? darkTheme : lightTheme),
[dark]
)
useEffect(() => {
document.querySelector('meta[name="theme-color"]')
?.setAttribute('content', dark ? '#272727' :'#0e752e')
}, [dark])
return (
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
)
}
Example #2
| Source File: Theme.tsx From wallet-adapter with Apache License 2.0 | 6 votes |
|
theme = createTheme({
palette: {
mode: 'dark',
primary: {
main: deepPurple[700],
},
},
components: {
MuiButtonBase: {
styleOverrides: {
root: {
justifyContent: 'flex-start',
},
},
},
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
padding: '12px 16px',
},
startIcon: {
marginRight: 8,
},
endIcon: {
marginLeft: 8,
},
},
},
},
})
Example #3
| Source File: ContextProvider.tsx From wallet-adapter with Apache License 2.0 | 6 votes |
|
theme = createTheme({
palette: {
mode: 'dark',
primary: {
main: deepPurple[700],
},
secondary: {
main: pink[700],
},
},
components: {
MuiButtonBase: {
styleOverrides: {
root: {
justifyContent: 'flex-start',
},
},
},
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
padding: '12px 16px',
},
startIcon: {
marginRight: 8,
},
endIcon: {
marginLeft: 8,
},
},
},
},
})
Example #4
| Source File: theme.ts From sdk with MIT License | 6 votes |
|
appTheme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1300,
xl: 1860,
},
},
palette: {
primary: {
main: '#4051b5',
},
secondary: {
main: '#f50057',
},
},
})
Example #5
| Source File: RewindTheme.ts From rewind with MIT License | 6 votes |
|
RewindTheme = createTheme({
palette: {
mode: "dark",
background: {},
},
components: {
// Name of the component ⚛️
MuiButtonBase: {
defaultProps: {
// The props to apply
disableRipple: true, // No more ripple, on the whole application ?!
},
},
},
})
Example #6
| Source File: theme.ts From example with MIT License | 6 votes |
|
appTheme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1300,
xl: 1860,
},
},
palette: {
primary: {
main: '#4051b5',
},
secondary: {
main: '#f50057',
},
},
})
Example #7
| Source File: Theme.tsx From genshin-optimizer with MIT License | 5 votes |
|
defaultTheme = createTheme({
palette: {
mode: `dark`,
}
})
Example #8
| Source File: index.tsx From Search-Next with GNU General Public License v3.0 | 5 votes |
|
Table: React.FC<TableProps> = (props) => {
const {
dataSource,
columns,
height = 300,
disableSelectionOnClick = true,
exportBtn = false,
pagination,
pageinationConfig,
} = props;
const [pageConfig, setPageConfig] = useState({
current: 1,
pageSize: 10,
pageSizeOptions: [10, 20, 40],
} as PageinationConfig);
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
zhCN,
);
const CustomToolbar = () => {
return (
<GridToolbarContainer className={gridClasses.toolbarContainer}>
{exportBtn && <GridToolbarExport />}
</GridToolbarContainer>
);
};
useEffect(() => {
if (pageinationConfig) setPageConfig(pageinationConfig);
}, [pageinationConfig]);
return (
<div style={{ height }}>
<div style={{ display: 'flex', height: '100%' }}>
<div style={{ flexGrow: 1 }}>
<ThemeProvider theme={theme}>
<DataGrid
disableSelectionOnClick={disableSelectionOnClick}
rows={dataSource}
columns={columns}
components={{
Toolbar: CustomToolbar,
}}
/>
</ThemeProvider>
</div>
</div>
</div>
);
}
Example #9
| Source File: AppThemeProvider.tsx From mui-toolpad with MIT License | 5 votes |
|
export function createToolpadTheme(themeNode?: appDom.ThemeNode | null): Theme {
const options = themeNode ? createThemeOptions(appDom.fromConstPropValues(themeNode.theme)) : {};
return createTheme(options);
}
Example #10
| Source File: LegendStyleProvider.tsx From legend-studio with Apache License 2.0 | 5 votes |
|
LegendCustomMUITheme = createTheme({
transitions: {
// disable all transition
// NOTE: this is a catch-all way to remove all transitions
// We technically don't need this because we can configure transition props for each component
create: (): string => 'none',
},
})
Example #11
| Source File: _app.tsx From fluttertemplates.dev with MIT License | 5 votes |
|
function MyApp({ Component, pageProps }: AppProps) {
const [darkMode, setDarkMode] = useState<boolean>(false);
useEffect(() => {
const _item = localStorage.getItem("darkMode") ?? "false";
setDarkMode(JSON.parse(_item));
// Remove the server-side injected CSS.
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles) {
jssStyles.parentElement?.removeChild(jssStyles);
}
}, []);
const theme: Theme = useMemo(
() =>
createTheme({
palette: {
mode: darkMode ? "dark" : "light",
primary: {
main: darkMode ? "#222432" : "#ffffff",
},
secondary: {
main: darkMode ? "#0468d7" : "#0468d7",
},
background: {
default: darkMode ? "#222432" : "#ffffff",
paper: darkMode ? "#22293d" : "#f1f3f4",
},
},
}),
[darkMode]
);
return (
<ThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
<Header
isDarkMode={darkMode}
onThemeChange={() => {
localStorage.setItem("darkMode", (!darkMode).toString());
setDarkMode(!darkMode);
}}
/>
<div
style={{
minHeight: "80vh",
}}
>
<Component {...pageProps} />
</div>
<SubmitProposalSection />
<Footer />
</ThemeProvider>
);
}
Example #12
| Source File: Style.tsx From multi-downloader-nx with MIT License | 5 votes |
|
makeTheme = (mode: 'dark'|'light') : Partial<Theme> => {
console.log(mode);
return createTheme({
palette: {
mode,
},
});
}
Example #13
| Source File: theme.ts From your_spotify with GNU General Public License v3.0 | 5 votes |
|
useTheme = () => {
const dark = useSelector(selectDarkMode);
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const isDark = dark === 'dark' || (dark === 'follow' && prefersDarkMode);
const theme = useMemo(
() =>
createTheme({
palette: {
mode: isDark ? 'dark' : 'light',
primary: {
main: isDark ? '#ffffff' : '#000000',
},
},
components: {
MuiPaper: {
styleOverrides: {
root: {
backgroundImage: 'unset',
},
},
},
MuiCheckbox: {
styleOverrides: {
root: {
color: 'var(--primary) !important',
},
},
},
MuiSkeleton: {
styleOverrides: {
rectangular: {
borderRadius: '6px',
},
},
},
},
shape: {
borderRadius: 6,
},
}),
[isDark],
);
return theme;
}
Example #14
| Source File: App.tsx From abrechnung with GNU Affero General Public License v3.0 | 5 votes |
|
export default function App() {
const darkModeSystem = useMediaQuery("(prefers-color-scheme: dark)");
const userThemeSettings = useRecoilValue(themeSettings);
const useDarkMode: PaletteMode =
userThemeSettings.darkMode === "browser" ? (darkModeSystem ? "dark" : "light") : userThemeSettings.darkMode;
const theme = useMemo(
() =>
createTheme({
palette: {
mode: useDarkMode,
},
}),
[useDarkMode]
);
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
<LocalizationProvider dateAdapter={DateAdapter}>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
<Router>
<Switch>
{routes.map((route) => {
const authRoute = route.auth ? (
<AuthenticatedRoute>{route.component}</AuthenticatedRoute>
) : (
route.component
);
const layoutRoute =
route.layout === undefined || route.layout ? (
<Layout>
<Suspense fallback={<Loading />}>{authRoute}</Suspense>
</Layout>
) : (
<Suspense fallback={<Loading />}>{authRoute}</Suspense>
);
return (
<Route
key={route.path}
exact={route.exact !== undefined && route.exact}
path={route.path}
>
{layoutRoute}
</Route>
);
})}
</Switch>
</Router>
</LocalizationProvider>
</ThemeProvider>
</StyledEngineProvider>
);
}
Example #15
| Source File: theme.ts From master-frontend-lemoncode with MIT License | 5 votes |
|
defaultTheme = createTheme({
palette: {
primary: {
main: '#006A7B',
},
},
})
Example #16
| Source File: theme.tsx From ExpressLRS-Configurator with GNU General Public License v3.0 | 5 votes |
|
defaultTheme: Theme = createTheme()
Example #17
| Source File: theme.ts From firecms with MIT License | 4 votes |
|
createCMSDefaultTheme = (
{ mode, primaryColor, secondaryColor, fontFamily }: {
mode: "light" | "dark";
primaryColor?: string;
secondaryColor?: string;
fontFamily?: string;
}): Theme => {
const original = createTheme({
palette: {
mode: mode,
background: {
default: mode === "dark" ? "#242424" : "#f6f7f8"
// default: mode === "dark" ? "#242424" : "rgb(240 240 240)"
},
primary: {
main: primaryColor || "#0070f4"
},
secondary: {
main: secondaryColor || pink["400"]
},
error: {
main: red.A400
}
},
typography: {
fontFamily: fontFamily || "\"Rubik\", \"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
fontWeightMedium: 500,
h6: {
fontWeight: 500,
fontSize: "1.15rem"
}
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: 4
}
}
},
MuiTableRow: {
styleOverrides: {
root: {
"&:last-child td": {
borderBottom: 0
}
}
}
},
MuiTypography: {
styleOverrides: {
root: {
"&.mono": {
fontFamily: "'Space Mono', 'Lucida Console', monospace"
},
"&.weight-500": {
fontWeight: 500
}
}
}
},
MuiInputBase: {
styleOverrides: {
root: {
"&.mono": {
fontFamily: "'Space Mono', 'Lucida Console', monospace"
}
}
}
}
}
});
return {
...original
// shadows: original.shadows.map((value, index) => {
// if (index == 1) return "0 1px 1px 0 rgb(0 0 0 / 16%)";
// else return value;
// })
};
}
Example #18
| Source File: Theme.tsx From genshin-optimizer with MIT License | 4 votes |
|
theme = createTheme({
palette: {
mode: 'dark',
primary: defaultTheme.palette.augmentColor({
color: { main: '#1e78c8' },
name: "primary"
}),
secondary: defaultTheme.palette.augmentColor({
color: { main: '#6c757d' },
name: "secondary"
}),
success: defaultTheme.palette.augmentColor({
color: { main: '#46a046' },
name: "success"
}),
warning: defaultTheme.palette.augmentColor({
color: { main: `#ffc107` },
name: "warning"
}),
error: defaultTheme.palette.augmentColor({
color: { main: `#c83c3c` },
name: "error"
}),
background: {
default: '#0C1020',
paper: '#0C1020',
},
info: defaultTheme.palette.augmentColor({
color: { main: '#17a2b8' },
name: "info"
}),
text: {
primary: 'rgba(255,255,255,0.9)',
},
contentDark: defaultTheme.palette.augmentColor({
color: { main: "#1b263b" },
name: "contentDark"
}),
contentDarker: defaultTheme.palette.augmentColor({
color: { main: "#172032" },
name: "contentDarker"
}),
contentLight: defaultTheme.palette.augmentColor({
color: { main: "#2a364d" },
name: "contentLight"
}),
roll1: defaultTheme.palette.augmentColor({
color: { main: "#a3a7a9" },
name: "roll1"
}),
roll2: defaultTheme.palette.augmentColor({
color: { main: "#6fa376", },
name: "roll2"
}),
roll3: defaultTheme.palette.augmentColor({
color: { main: "#8eea83", },
name: "roll3"
}),
roll4: defaultTheme.palette.augmentColor({
color: { main: "#31e09d", },
name: "roll4"
}),
roll5: defaultTheme.palette.augmentColor({
color: { main: "#27bbe4", },
name: "roll5"
}),
roll6: defaultTheme.palette.augmentColor({
color: { main: "#de79f0", },
name: "roll6"
}),
geo: defaultTheme.palette.augmentColor({
color: { main: "#f8ba4e", contrastText: "#fff" },
name: "geo"
}),
dendro: defaultTheme.palette.augmentColor({
color: { main: "#b1ea29", },
name: "dendro"
}),
pyro: defaultTheme.palette.augmentColor({
color: { main: "#bf2818", },
name: "pyro"
}),
hydro: defaultTheme.palette.augmentColor({
color: { main: "#2f63d4", },
name: "hydro"
}),
cryo: defaultTheme.palette.augmentColor({
color: { main: "#77a2e6", contrastText: "#fff" },
name: "cryo"
}),
electro: defaultTheme.palette.augmentColor({
color: { main: "#b25dcd", },
name: "electro"
}),
anemo: defaultTheme.palette.augmentColor({
color: { main: "#61dbbb", contrastText: "#fff" },
name: "anemo"
}),
physical: defaultTheme.palette.augmentColor({
color: { main: "#aaaaaa", },
name: "physical"
}),
vaporize: defaultTheme.palette.augmentColor({
color: { main: "#ffcb65", },
name: "vaporize"
}),
melt: defaultTheme.palette.augmentColor({
color: { main: "#ffcb65", },
name: "melt"
}),
overloaded: defaultTheme.palette.augmentColor({
color: { main: "#ff7e9a", },
name: "overloaded"
}),
superconduct: defaultTheme.palette.augmentColor({
color: { main: "#b7b1ff", },
name: "superconduct"
}),
electrocharged: defaultTheme.palette.augmentColor({
color: { main: "#e299fd", },
name: "electrocharged"
}),
shattered: defaultTheme.palette.augmentColor({
color: { main: "#98fffd", },
name: "shattered"
}),
swirl: defaultTheme.palette.augmentColor({
color: { main: "#66ffcb", },
name: "swirl"
}),
burning: defaultTheme.palette.augmentColor({
color: { main: "#bf2818", },
name: "burning"
}),
crystallize: defaultTheme.palette.augmentColor({
color: { main: "#f8ba4e", },
name: "crystallize"
}),
},
typography: {
button: {
textTransform: 'none'
}
},
components: {
MuiCssBaseline: {
styleOverrides: {
body: defaultTheme.palette.mode === 'dark' ? darkScrollbar() : null,
},
},
MuiAppBar: {
defaultProps: {
enableColorOnDark: true,
},
},
MuiPaper: {
defaultProps: {
elevation: 0
}
},
MuiButton: {
defaultProps: {
variant: "contained"
}
},
MuiButtonGroup: {
defaultProps: {
variant: "contained"
}
},
MuiList: {
styleOverrides: {
root: {
padding: 0,
marginTop: defaultTheme.spacing(1),
marginBottom: defaultTheme.spacing(1),
}
}
},
MuiTypography: {
styleOverrides: {
root: {
"& ul": {
margin: 0,
paddingLeft: defaultTheme.spacing(3)
}
}
}
},
MuiCardContent: {
styleOverrides: {
root: {
[defaultTheme.breakpoints.down('sm')]: {
padding: defaultTheme.spacing(1),
"&:last-child": {
paddingBottom: defaultTheme.spacing(1),
}
},
[defaultTheme.breakpoints.up('sm')]: {
"&:last-child": {
paddingBottom: defaultTheme.spacing(2),
}
}
}
}
}
},
})
Example #19
| Source File: main.ts From console with GNU Affero General Public License v3.0 | 4 votes |
|
theme = createTheme({
palette: {
primary: {
light: "#073052",
main: "#081C42",
dark: "#05122B",
contrastText: "#fff",
},
secondary: {
light: "#ff7961",
main: "#f44336",
dark: "#ba000d",
contrastText: "#000",
},
grey: {
100: "#f0f0f0",
200: "#e6e6e6",
300: "#cccccc",
400: "#999999",
500: "#8c8c8c",
600: "#737373",
700: "#666666",
800: "#4d4d4d",
900: "#333333",
},
background: {
default: "#fff",
},
success: {
main: "#4ccb92",
},
warning: {
main: "#FFBD62",
},
error: {
light: "#e03a48",
main: "#C83B51",
contrastText: "#fff",
},
},
typography: {
fontFamily: ["Lato", "sans-serif"].join(","),
h1: {
fontWeight: "bold",
color: "#081C42",
},
h2: {
fontWeight: "bold",
color: "#081C42",
},
h3: {
fontWeight: "bold",
color: "#081C42",
},
h4: {
fontWeight: "bold",
color: "#081C42",
},
h5: {
fontWeight: "bold",
color: "#081C42",
},
h6: {
fontWeight: "bold",
color: "#000000",
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: "none",
borderRadius: 3,
height: 40,
padding: "0 20px",
fontSize: 14,
fontWeight: 600,
boxShadow: "none",
"& .min-icon": {
maxHeight: 18,
},
"&.MuiButton-contained.Mui-disabled": {
backgroundColor: "#EAEDEE",
fontWeight: 600,
color: "#767676",
},
"& .MuiButton-iconSizeMedium > *:first-of-type": {
fontSize: 12,
},
},
},
},
MuiPaper: {
styleOverrides: {
elevation1: {
boxShadow: "none",
border: "#EAEDEE 1px solid",
borderRadius: 3,
},
},
},
MuiListItem: {
styleOverrides: {
root: {
"&.MuiListItem-root.Mui-selected": {
background: "inherit",
"& .MuiTypography-root": {
fontWeight: "bold",
},
},
},
},
},
MuiTab: {
styleOverrides: {
root: {
textTransform: "none",
},
},
},
},
colors: {
link: "#2781B0",
},
})
Example #20
| Source File: select.tsx From Search-Next with GNU General Public License v3.0 | 4 votes |
|
Select: React.FC<SelectProps> = ({
label,
size = 'small',
options,
optionsConfig,
helperText,
error,
inputRef,
...props
}) => {
const theme = createTheme();
return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel
id={`mui-select-label-${label}`}
className={css`
&.MuiFormLabel-root {
transform: translate(14px, 9px) scale(1);
}
&.Mui-focused,
&.MuiFormLabel-filled {
transform: translate(14px, -9px) scale(0.75);
}
`}
>
{label}
</InputLabel>
<StyledSelect
{...props}
labelId={`mui-select-label-${label}`}
id={`mui-select-${label}`}
inputRef={inputRef}
label={label}
size={size}
error={error}
onClose={(e) => e.stopPropagation()}
MenuProps={{
sx: {
'& .MuiPaper-root': {
backgroundColor: 'rgba(253, 253, 253, 0.8)',
backdropFilter: 'blur(8px)',
borderRadius: '4px',
marginTop: theme.spacing(1),
minWidth: 140,
color:
theme.palette.mode === 'light'
? 'rgb(55, 65, 81)'
: theme.palette.grey[300],
boxShadow:
'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
'& .MuiMenu-list': {
padding: '0 4px',
},
'& .MuiMenuItem-root': {
borderRadius: '4px',
padding: '4px 8px',
margin: '4px 0',
fontSize: '14px',
transition: 'all 0.3s',
'& .MuiSvgIcon-root': {
fontSize: '14px',
},
'&:active': {
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity,
),
},
},
},
},
}}
>
{options.map((i) => {
const label =
optionsConfig && optionsConfig.label
? i[optionsConfig.label]
: i.label;
const value =
optionsConfig && optionsConfig.value
? i[optionsConfig.value]
: i.value;
return (
<MenuItem key={value} value={value}>
{label}
</MenuItem>
);
})}
</StyledSelect>
<FormHelperText error={error}>{helperText}</FormHelperText>
</FormControl>
</Box>
);
}
