@material-ui/core#createTheme JavaScript Examples
The following examples show how to use
@material-ui/core#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: App.js From Alternative-Uniswap-Interface with GNU General Public License v3.0 | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: "#ff0000",
contrastText: "#ffffff",
},
secondary: {
main: "#9e9e9e",
contrastText: "#ffffff",
},
},
})
Example #2
| Source File: network.js From Alternative-Uniswap-Interface with GNU General Public License v3.0 | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: "#ff0000",
contrastText: "#ffffff",
},
secondary: {
main: "#9e9e9e",
contrastText: "#ffffff",
},
},
})
Example #3
| Source File: index.js From flame-coach-web with MIT License | 6 votes |
|
theme = createTheme({
palette: {
background: {
dark: "#F4F6F8",
default: colors.common.white,
paper: colors.common.white
},
primary: {
main: colors.indigo[500]
},
secondary: {
main: colors.indigo[500]
},
text: {
primary: colors.blueGrey[900],
secondary: colors.blueGrey[600]
},
button: {
success: colors.green[300],
warning: colors.yellow[500],
dangerous: colors.red[300],
neutral: colors.indigo[100]
}
},
shadows,
typography
})
Example #4
| Source File: themeTable.js From flame-coach-web with MIT License | 6 votes |
|
themeTable = createTheme({
overrides: {
MUIDataTable: {
},
MUIDataTableToolbar: {
root: {
paddingLeft: '16px'
},
titleText: {
fontWeight: 500,
fontSize: 16,
letterSpacing: '-0.05px'
}
}
}
})
Example #5
| Source File: Text.js From Winter-of-Code-2.0-frontend with MIT License | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: "#FFFFFF",
light: "#FFFFFF",
// ----> edit here to change button hover color <----
// dark: "#025560",
// -----><-----
// contrastText: "#ffff",
// main: "#616161",
// light: "#616161",
// dark: "#616161",
// contrastText: "#ffff"
},
},
})
Example #6
| Source File: App.js From animeworldz with MIT License | 5 votes |
|
function App() {
const [darkMode, setDarkMode] = useState(true);
const [schedule, setSchedule] = useState({});
const [popular, setPopular] = useState([]);
const darkTheme = createTheme({
palette: {
type: darkMode ? "dark" : "light",
},
});
useEffect(() => {
getSchedule();
getPopular();
}, []);
const getPopular = () => {
axios
.get("/api/v1/anime/popular/1", {})
.then((res) => {
setPopular(res.data);
})
.catch((err) => console.log(err));
};
const getSchedule = () => {
axios
.post("/api/v1/schedule", { day: "" })
.then((sche) => {
setSchedule(sche.data);
})
.catch((err) => console.log(err));
};
return (
<ThemeProvider theme={darkTheme}>
<Paper>
<DarkModeContext.Provider value={{ darkMode, setDarkMode }}>
<ScheduleContext.Provider value={{ schedule }}>
<PopularAnimeContext.Provider value={{ popular }}>
<Layout>
<Switch>
<Route exact path="/" component={Homepage} />
<Route exact path="/anime/:slug" component={WatchAnime} />
<Route exact path="/waifu" component={Waifu} />
</Switch>
</Layout>
</PopularAnimeContext.Provider>
</ScheduleContext.Provider>
</DarkModeContext.Provider>
</Paper>
</ThemeProvider>
);
}
Example #7
| Source File: cerpusUI.js From Edlib with GNU General Public License v3.0 | 5 votes |
|
CerpusUI = ({ children }) => {
const editorContainer = document.getElementById('theBody');
const bodyLanguageCode =
editorContainer !== null
? editorContainer.getAttribute('data-locale')
: null;
const i18nData =
bodyLanguageCode !== null ? addLanguage(bodyLanguageCode) : i18nDefault;
return (
<IntlProvider {...i18nData}>
<CerpusThemeProvider>
<ThemeProvider
theme={createTheme({
palette: {
grey: {
main: grey[300],
dark: grey[400],
},
primary: {
main: '#21456A',
dark: '#21456A',
},
secondary: {
main: '#82E066',
dark: '#1D7105',
},
},
typography: {
htmlFontSize: 10,
fontFamily: "'Lato', sans-serif",
},
})}
>
<CssBaseline />
{children}
</ThemeProvider>
</CerpusThemeProvider>
</IntlProvider>
);
}
Example #8
| Source File: ExportWrapper.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
ExportWrapper = ({ children }) => {
return (
<StyledComponentsThemeProvider
theme={{
colors: {
primary: '#1d446b',
secondary: '#82df66',
tertiary: '#2195f3',
success: '#28a745',
danger: '#dc3545',
gray: '#545454',
link: '#4DCFF3',
defaultFont: '#545454',
background: '#ffffff',
border: borderColor,
green: '#a7da19',
alert: {
primary: {
background: '#43aeff',
font: '#1d3c63',
},
warning: {
background: '#fff3cd',
font: '#856404',
},
danger: {
background: '#f8d7da',
font: '#721c24',
},
},
},
border: `1px solid ${borderColor}`,
padding: '5px',
fontSize: 16,
breakpoints: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
rem: (factor) => `${16 * factor}px`,
}}
>
<MaterialUiThemeProvider
theme={createTheme({
palette: {
primary: {
main: '#21456A',
dark: '#21456A',
},
secondary: {
main: '#82E066',
dark: '#1D7105',
},
},
typography: {
htmlFontSize: 16,
fontFamily: "'Lato', sans-serif",
},
})}
>
{children}
</MaterialUiThemeProvider>
</StyledComponentsThemeProvider>
);
}
Example #9
| Source File: SignIn.js From radio-logger with GNU General Public License v3.0 | 5 votes |
|
theme = createTheme()
Example #10
| Source File: App.js From redive_linebot with MIT License | 5 votes |
|
theme = createTheme({
palette: {
primary: cyan,
secondary: lightBlue,
},
})
Example #11
| Source File: theme.js From generator-webapp-rocket with MIT License | 5 votes |
|
theme = createTheme(themeData)
Example #12
| Source File: App.js From radio-logger with GNU General Public License v3.0 | 4 votes |
|
dark = {
palette: {
type: 'dark',
background: {
default: 'hsl(230, 17%, 14%)'
},
},
const :[theme, setTheme] = useState(true),
const :icon = !theme ? <Brightness7Icon /> : <Brightness3Icon />,
const :appliedTheme, createTheme(theme ? light : dark)
const :theme = useMemo(
() =>
createTheme({
palette: {
type: mode,
background: {
dark: "hsl(230, 17%, 14%)",
light: "hsl(0, 0%, 100%"
}
}
})
),
const :darkTheme = createTheme({
palette: {
type: 'dark',
background: {
default: 'hsl(230, 17%, 14%)'
}
}
}),
const :lightTheme = createTheme({
palette: {
type: 'light',
background: {
default: 'hsl(0, 0%, 100%)'
}
}
}),
const App = () => {
const [mode, setMode] = useState("light");
const selectedTheme = mode === "dark" ? darkTheme : lightTheme;
return (
<ThemeProvider theme={isDarkTheme} >
onClick={() => setTheme(!theme)}
onclick<ThemeProvider theme={isDarkTheme}></ThemeProvider>
<section className='App'>
<Router>
<MyNav />
<Routes>
<Route exact path='/' />
<Route exact path='/signin' element={<SignIn />} />
<Route exact path='/hamlog' element={<HamLog />} />
<Route exact path='/mwlog' element={<MwLog />} />
<Route exact path='/swllog' element={<SwlLog />} />
<Route exact path='/vhflog' element={<ScanLog />} />
<Route exact path='/contestlog' element={<SwlLog />} />
<Route exact path='/settings' element={<Settings />} />
<Route exact path='/profile' element={<Profile />} />
</Routes>
</Router>
const [mode, setMode] = useState('light'); const selectedTheme = mode === 'dark' ? darkTheme :
lightTheme; return (
<ThemeProvider theme={selectedTheme}>
<CssBaseline />
<Container maxWidth='lg'>
<h1>Hello</h1>
<Switch onChange={() => setMode(mode === 'light' ? 'dark' : 'light')} />
</Container>
</ThemeProvider>
);
</section>
);
{'}'};
export default splashScreen(App); </>
