@material-ui/core#createMuiTheme JavaScript Examples
The following examples show how to use
@material-ui/core#createMuiTheme.
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: index.js From telar-cli with MIT License | 6 votes |
|
theme = createMuiTheme({
palette,
typography,
overrides,
zIndex: {
appBar: 1200,
drawer: 1100
}
})
Example #2
| Source File: index.js From lifebank with MIT License | 6 votes |
|
theme = createMuiTheme({
palette,
typography,
overrides,
zIndex: {
appBar: 1200,
drawer: 1100
}
})
Example #3
| Source File: themeConfig.js From oftadeh-react-admin with MIT License | 6 votes |
|
getTheme = theme => {
return createMuiTheme({
palette: {
type: theme.paletteType
// background: {
// default: theme.paletteType === "light" ? "#000" : "#fff"
// }
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: theme.paletteType === "dark" && blueGrey.A900,
color: theme.paletteType !== "dark" && grey
// background: theme.paletteType === "dark" && "#18202c"
}
},
MuiDrawer: {
paper: {
background: theme.paletteType === "dark" ? blueGrey.A900 : "#0d131d",
// this is where magic happens
"& *": {
color: theme.paletteType === "dark" && "rgba(255, 255, 255, 0.7)"
}
}
}
}
});
}
Example #4
| Source File: App.js From inventory-management-web with MIT License | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
light: '#8FB7D6',
main: '#4796bd',
dark: '#3d97A8',
},
background: {
default: '#f3f9fb',
},
},
typography: {
fontFamily: [
'Lato',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
].join(','),
},
spacing: factor => `${0.5 * factor}rem`,
text: {
color: {
veryDark: '#122e40',
dark: '#495d69',
darkGray: '#333',
},
},
})
Example #5
| Source File: ThemedApp.jsx From covid-trials-dashboard with MIT License | 6 votes |
|
ThemedApp = () => {
const globalState = useContext(store)
const { prefersDarkMode } = (globalState && globalState.state) || {}
const theme = React.useMemo(
() =>
createMuiTheme({
palette: {
type: prefersDarkMode ? 'dark' : 'light',
primary: {
main: '#00275B',
},
secondary: {
main: '#FF5761',
},
},
}),
[prefersDarkMode]
)
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Suspense fallback='Loading...'>
<Navbar />
<Content>
<Router />
</Content>
<div style={{ marginBottom: '46px' }} />
<Footer />
</Suspense>
</ThemeProvider>
)
}
Example #6
| Source File: DatePicker.js From aws-perspective with Apache License 2.0 | 6 votes |
|
materialTheme = createMuiTheme({
palette: {
primary: {
main: '#232f3e'
}
},
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: '#232f3e'
}
},
MuiPickersCalendarHeader: {
switchHeader: {
// backgroundColor: '#232f3e',
// color: "#fff",
}
},
MuiPickersDay: {
day: {
color: '#000'
},
daySelected: {
backgroundColor: '#0073bb'
},
dayDisabled: {
color: '#f2f3f3'
},
current: {
color: '#fff'
}
},
MuiPickersModal: {
dialogAction: {
color: '#fff'
}
}
}
})
Example #7
| Source File: app.js From x-admin-device-donation with MIT License | 6 votes |
|
function AsyncResources({ client }) {
let introspectionResultObjects =
client.cache?.data?.data?.ROOT_QUERY?.__schema.types
?.filter((obj) => obj.kind === "OBJECT")
?.map((elem) => elem.name);
const resources = resourceConfig;
let filteredResources = resources;
if (introspectionResultObjects) {
filteredResources = resources.filter((elem) =>
introspectionResultObjects.includes(elem.name)
);
}
if (!resources) return null;
return (
<MuiThemeProvider theme={createMuiTheme(customTheme)}>
<AdminUI disableTelemetry loginPage={false} layout={customLayout}>
{filteredResources.map((resource) => (
<Resource
key={resource.name}
name={resource.name}
list={resource.list}
edit={resource.edit}
create={resource.create}
show={resource.show}
/>
))}
</AdminUI>
</MuiThemeProvider>
);
}
Example #8
| Source File: ThemeConfig.js From pomodor with MIT License | 6 votes |
|
ThemeConfig = ({ children }) => {
const darkModeCached = +localStorage.getItem('darkMode')
const [darkTheme, setDarkTheme] = useState(darkModeCached)
const darkMode = useSelector((state) => +state.settings.darkMode)
const progress = useSelector((state) => state.progress)
const userTheme = createMuiTheme({
palette: {
type: darkTheme ? 'dark' : 'light',
primary: {
main: indigo[500],
light: indigo[200],
dark: '#272727',
},
secondary: {
main: pink[300],
},
background: {
default: darkTheme ? '#121212' : '#fafafa',
},
text: {
primary: darkTheme ? '#DDE0F4' : '#424242',
secondary: darkTheme ? '#fff9' : '#575757',
},
},
})
useEffect(() => {
if (!progress) {
localStorage.setItem('darkMode', darkMode)
setDarkTheme(darkMode)
}
}, [darkMode, progress])
return <ThemeProvider theme={userTheme}>{children || <></>}</ThemeProvider>
}
Example #9
| Source File: theme.js From hacktoberfest-participants with MIT License | 6 votes |
|
darkTheme = createMuiTheme({
palette: {
type: 'dark',
background: {
default: '#183d5e',
},
text: { primary: '#ffffff', secondary: '#c2cad2' },
primary: {
main: '#183d5e',
},
secondary: {
main: '#072540',
},
},
typography,
breakpoints,
})
Example #10
| Source File: theme.js From hacktoberfest-participants with MIT License | 6 votes |
|
lightTheme = createMuiTheme({
palette: {
type: 'light',
background: {
default: '#F1F7FA',
},
text: { primary: '#000000', secondary: '#c2cad2' },
primary: {
main: '#F1F7FA',
},
secondary: {
main: '#FFFFFF',
},
},
typography,
breakpoints,
})
Example #11
| Source File: index.js From Designer-Client with GNU General Public License v3.0 | 6 votes |
|
theme = createMuiTheme({
palette: {
},
typography: {
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
fontSize: 14
},
spacing: 8,
overrides:{}
})
Example #12
| Source File: theme.js From akashlytics-deploy with GNU General Public License v3.0 | 6 votes |
|
theme = createMuiTheme({
palette: {
background: {
default: customColors.lightBg
}
},
overrides: {
MuiCssBaseline: {
"@global": {
html: {
WebkitFontSmoothing: "auto"
}
}
},
MuiInputBase: {
input: { padding: "10px 14px" }
},
MuiOutlinedInput: {
input: { padding: "10px 14px" }
},
MuiInputLabel: {
outlined: {
transform: "translate(14px, 12px) scale(1)"
}
},
MuiTooltip: {
arrow: {
color: "rgba(0,0,0,.85)"
},
tooltip: {
backgroundColor: "rgba(0,0,0,.85)"
}
}
}
})
Example #13
| Source File: About.js From macovidvaccines.com with MIT License | 5 votes |
|
theme = createMuiTheme(themeTemplate)
Example #14
| Source File: theme.js From mfe-webpack-demo with MIT License | 5 votes |
|
theme = createMuiTheme({
palette: { primary: green }
})
Example #15
| Source File: AppOld.js From macovidvaccines.com with MIT License | 5 votes |
|
theme = createMuiTheme(themeTemplate)
Example #16
| Source File: theme.js From module-federation-examples with MIT License | 5 votes |
|
theme = createMuiTheme({
palette: { primary: green },
})
Example #17
| Source File: App.js From macovidvaccines.com with MIT License | 5 votes |
|
theme = createMuiTheme(themeTemplate)
Example #18
| Source File: YearMonthPickerStyles.js From medha-STPC with GNU Affero General Public License v3.0 | 5 votes |
|
customTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: "black"
}
},
MuiButton: {
textPrimary: {
color: "#000"
}
},
MuiPickersClock: {
pin: {
backgroundColor: "#000"
}
},
MuiPickersClockPointer: {
pointer: {
backgroundColor: "#000"
},
thumb: {
backgroundColor: "#000",
border: "14px solid #000"
},
noPoint: {
backgroundColor: "#000"
}
},
MuiPickersClockNumber: {
clockNumberSelected: {
backgroundColor: "#000"
}
},
MuiPickersDay: {
daySelected: {
backgroundColor: "#000",
color: "#fff",
"&:hover": {
backgroundColor: "#8E8E8E",
color: "#FFF"
}
},
dayDisabled: {
color: "light-gray"
},
current: {
color: ""
}
}
}
})
Example #19
| Source File: App.js From linked-in-clone with MIT License | 5 votes |
|
App = () => {
const classes = Styles();
const dispatch = useDispatch();
const { displayName } = useSelector((state) => state.user);
const mode = useSelector((state) => state.util);
const muiTheme = createMuiTheme({
palette: {
type: mode ? "dark" : "light",
},
});
useEffect(() => {
auth.onAuthStateChanged((authUser) => {
if (authUser) {
dispatch(LoginAction(authUser));
} else {
dispatch(LogoutAction());
}
});
}, []);
return (
<ThemeProvider theme={muiTheme}>
{!displayName ? (
<Login />
) : (
<Grid
container
className={classes.app}
style={{ backgroundColor: mode ? darkPrimary : LinkedInBgColor }}
>
<Grid
item
container
className={classes.app__header}
style={{
boxShadow: mode && "0px 5px 10px -10px rgba(0,0,0,0.75)",
}}
>
{/* Header */}
<Header />
</Grid>
<Grid item container className={classes.app__body}>
<Hidden smDown>
<Grid item className={classes.body__sidebar} md={2}>
{/* Sidebar */}
<Sidebar />
</Grid>
</Hidden>
<Grid item className={classes.body__feed} xs={12} sm={8} md={5}>
{/* Feed */}
<Grid item className={classes.feed__form}>
<Form />
</Grid>
<Grid item className={classes.feed__posts}>
<Posts />
</Grid>
</Grid>
<Hidden smDown>
<Grid item className={classes.body__widgets} md={3}>
{/* Widgets */}
<Widgets />
</Grid>
</Hidden>
</Grid>
</Grid>
)}
</ThemeProvider>
);
}
Example #20
| Source File: index.js From react-code-splitting-2021-04-26 with MIT License | 5 votes |
|
themes = {
default: createMuiTheme({ ...defaultTheme, ...overrides }),
}
Example #21
| Source File: index.js From turinghut-website with BSD Zero Clause License | 5 votes |
|
theme = createMuiTheme()
Example #22
| Source File: Layout.js From project-s0-t2-env with MIT License | 5 votes |
|
function Layout(props) {
const user = props.user;
const names = props.names;
const onChange = props.onChange;
const theme = createMuiTheme({
palette: {
primary: {
main: "#8ebd7b",
contrastText: "#ffffff",
},
secondary: {
main: "#758E9D",
},
},
typography: {
fontFamily: ["Lato"],
},
});
return (
<>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap"
rel="stylesheet"
></link>
<style global jsx>{`
body {
font-family: Lato;
letter-spacing: 1px;
word-spacing: 2px;
color: ${"#000000"};
}
`}</style>
<ThemeProvider theme={theme}>
<AppNavbar user={user} names={names} onChange={onChange} />
{props.children}
</ThemeProvider>
<AppFooter />
</>
);
}
Example #23
| Source File: index.js From lrc-staking-dapp with MIT License | 5 votes |
|
MuiTheme = createMuiTheme({
overrides: {
MuiButton: {
containedSizeSmall: {
paddingLeft: '14px',
paddingRight: '14px',
},
root: {
fontWeight: 'normal',
textTransform: 'none',
},
text: {
paddingLeft: '14px',
paddingRight: '14px',
},
},
MuiTooltip: {
arrow: {
color: vars.second,
},
tooltip: {
backgroundColor: vars.second,
fontSize: '13px',
padding: '8px 16px',
},
},
},
palette: {
contrastThreshold: 3,
error: {
main: vars.red,
},
grey: {
300: vars.inheritDefault1,
A100: vars.inheritDefault2,
},
helpers: {
main: 'rgba(25, 46, 91, .035)',
primary: vars.blue,
},
primary: {
main: vars.primary,
},
secondary: {
main: vars.secondary,
},
success: {
main: vars.green,
},
tonalOffset: 0.1,
warning: {
main: vars.orange,
},
},
shape: {
borderRadius: '0.5rem',
},
typography,
})
Example #24
| Source File: CustomDateTimePickerStyles.js From medha-STPC with GNU Affero General Public License v3.0 | 5 votes |
|
customTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: "black",
},
},
MuiInputBase: {
root: {
fontSize: "14px",
},
},
MuiFormLabel: {
root: {
color: "#000",
},
},
MuiButton: {
textPrimary: {
color: "#000",
},
},
MuiPickersClock: {
pin: {
backgroundColor: "#000",
},
},
MuiPickersClockPointer: {
pointer: {
backgroundColor: "#000",
},
thumb: {
backgroundColor: "#000",
border: "14px solid #000",
},
noPoint: {
backgroundColor: "#000",
},
},
MuiPickersClockNumber: {
clockNumberSelected: {
backgroundColor: "#000",
},
},
MuiPickerDTTabs: { tabs: { backgroundColor: "black" } },
MuiPickersDay: {
daySelected: {
backgroundColor: "#000",
color: "#fff",
"&:hover": {
backgroundColor: "#8E8E8E",
color: "#FFF",
},
},
dayDisabled: {
color: "light-gray",
},
current: {
color: "",
},
},
},
})
Example #25
| Source File: InlineDatePickerStyles.js From medha-STPC with GNU Affero General Public License v3.0 | 5 votes |
|
customTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: "black"
}
},
MuiButton: {
textPrimary: {
color: "#000"
}
},
MuiPickersDay: {
daySelected: {
backgroundColor: "#000",
color: "#fff",
"&:hover": {
backgroundColor: "#8E8E8E",
color: "#FFF"
}
},
dayDisabled: {
color: "light-gray"
},
current: {
color: ""
}
},
MuiOutlinedInput: {
input: {
padding: "17.5px 14px"
}
},
MuiInputBase: {
root: {
fontSize: "14px"
}
},
MuiSvgIcon: {
root: {
fontSize: "20px",
paddingTop: "5px"
}
},
MuiFormLabel: {
root: {
fontSize: "14px",
color: "#263238"
}
},
MuiFormControl: {
root: {
width: "100%"
}
}
}
})
Example #26
| Source File: theme.js From Portfolio with MIT License | 5 votes |
|
lightTheme = createMuiTheme(
(theme && theme.light && Object.keys(theme.light).length > 0) ? theme.light :
{
palette: {
type: "light"
}
}
)
Example #27
| Source File: AudioHint.js From Screencast with MIT License | 5 votes |
|
muiTheme = createMuiTheme({})
Example #28
| Source File: muiCustomTheme.js From social-media-strategy-fe with MIT License | 5 votes |
|
defaultTheme = createMuiTheme()
Example #29
| Source File: muiCustomTheme.js From social-media-strategy-fe with MIT License | 5 votes |
|
theme = createMuiTheme({
palette: {
primary: {
main: "#2196F3",
light: "#a4caea",
dark: "#0e64aa",
},
secondary: {
main: "#E10050",
},
background: {
default: "#FFFFFF",
secondary: "#F6F6F6",
},
},
navbar: {
width: {
open: Navbar.width.open,
close: Navbar.width.close,
},
height: Navbar.height,
},
kanban: {
topContainer: {
height: "75px",
},
list: {
header: {
height: "70px",
},
},
},
overrides: {
MuiDrawer: {
paper: {
top: 0,
overflowX: "hidden",
[defaultTheme.breakpoints.down("xs")]: {
top: Navbar.height,
},
},
modal: {
zIndex: "1000 !important",
},
},
MuiAppBar: {
root: {
boxShadow:
"0px 0px 1px -1px rgba(0,0,0,0.2), 0px 0px 1px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) !important",
},
},
MuiButton: {
root: {
textTransform: "none",
fontWeight: "600",
minWidth: Navbar.width.close,
},
},
MuiTypography: {
h1: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
h2: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
h3: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
h4: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
h5: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
h6: { fontWeight: "600", fontFamily: "Roboto Condensed", color: "#4E4E4E" },
},
},
})
