@material-ui/core/colors#indigo JavaScript Examples
The following examples show how to use
@material-ui/core/colors#indigo.
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: ThemeProvider.js From tisn.app with GNU Affero General Public License v3.0 | 6 votes |
|
themes = {
light: createMuiTheme({
palette: {
primary: {
main: indigo[500],
},
secondary: {
main: pink['A400'],
},
},
}),
dark: createMuiTheme({
palette: {
type: 'dark',
primary: {
main: indigo[200],
},
secondary: {
main: pink[200],
},
},
}),
}
Example #2
| Source File: ThemeProvider.js From tisn.app with GNU Affero General Public License v3.0 | 6 votes |
|
ThemeProvider = ({ children }) => {
const prefersDarkMode = useMediaQuery('@media (prefers-color-scheme: dark)');
const preferredThemeType = prefersDarkMode ? 'dark' : 'light';
const [themeType, setThemeType] = useState(
storedThemeType || preferredThemeType
);
const toggleTheme = useCallback(() => {
setThemeType((themeType) => (themeType === 'light' ? 'dark' : 'light'));
}, []);
useEffect(() => {
localStorage.setItem('themeType', themeType);
const themeMetaTag = document.querySelector('meta[name="theme-color"]');
if (themeMetaTag) {
themeMetaTag.setAttribute(
'content',
themeType === 'dark' ? grey[800] : indigo[500]
);
}
}, [themeType]);
return (
<MuiThemeProvider theme={themes[themeType]}>
<ToggleThemeContext.Provider value={toggleTheme}>
{children}
</ToggleThemeContext.Provider>
</MuiThemeProvider>
);
}
Example #3
| Source File: constants.js From pomodor with MIT License | 6 votes |
|
colors = [
{
normal: blue[500],
darkMode: blue[200],
},
{
normal: indigo[500],
darkMode: indigo[200],
},
{
normal: pink[500],
darkMode: pink[200],
},
{
normal: purple[500],
darkMode: purple[200],
},
{
normal: lightGreen[500],
darkMode: lightGreen[200],
},
{
normal: teal[500],
darkMode: teal[200],
},
{
normal: orange[500],
darkMode: orange[200],
},
]
Example #4
| Source File: ThemeLight.js From corona-board with MIT License | 5 votes |
|
ThemeLight = {
palette: {
type: 'light',
// Essential
primary: amber,
secondary: orange,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: amber[500],
// dark: will be calculated from palette.sample,
// contrastText: will be calculated to contrast with palette.sample
},
},
colors: {
// Base colors
colorLight: '#ffffff',
colorDark: grey[800],
// Content
contentBackground: '#ffffff',
contentText: grey[800],
// AppBar
appBarContentText: grey[800],
// Drawer menu
drawerMenuCategoryText: grey[500],
drawerMenuSelectedBackground: grey[300],
drawerMenuSelectedPin: amber[500],
// Progress
progress: amber[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
red[500],
cyan[500],
amber[500],
teal[500],
lightBlue[500],
green[500],
blue[500],
indigo[500],
orange[500],
yellow[500],
deepPurple[500],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: grey[50], // AppBar background color
color: grey[800],
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[100], // Drawer background color
}
},
MuiIconButton: {
root: {
color: grey[800],
}
},
MuiFab: {
primary: {
backgroundColor: amber[500],
color: grey[800],
'&:hover': {
backgroundColor: amber[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[50],
color: grey[800],
}
},
},
}
Example #5
| Source File: ThemeOcean.js From corona-board with MIT License | 5 votes |
|
ThemeOcean = {
palette: {
type: 'light',
// Essential
primary: blue,
secondary: teal,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: blue[500],
// dark: will be calculated from palette.sample,
// contrastText: will be calculated to contrast with palette.sample
},
},
colors: {
// Base colors
colorLight: '#ffffff',
colorDark: grey[800],
// Content
contentBackground: '#ffffff',
contentText: grey[800],
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[500],
drawerMenuSelectedBackground: grey[300],
drawerMenuSelectedPin: blue[500],
// Progress
progress: blue[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
blue[500],
cyan[500],
indigo[500],
lightBlue[500],
blue[600],
cyan[600],
indigo[600],
lightBlue[600],
blue[700],
cyan[700],
indigo[700],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: blue[500], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[100], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: blue[500],
color: '#ffffff',
'&:hover': {
backgroundColor: blue[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[50],
color: grey[800],
}
},
},
}
Example #6
| Source File: ThemeDark.js From corona-board with MIT License | 4 votes |
|
ThemeDark = {
palette: {
type: 'dark',
// Essential
primary: grey,
secondary: blueGrey,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: amber[500],
// dark: will be calculated from palette.sample,
// contrastText: will be calculated to contrast with palette.sample
},
},
colors: {
// Base colors
colorLight: '#ffffff',
colorDark: grey[800],
// Content
contentBackground: grey[600],
contentText: '#ffffff',
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[400],
drawerMenuSelectedBackground: grey[600],
drawerMenuSelectedPin: amber[500],
// Speed dial
speedDialColor: amber[500],
// Progress
progress: amber[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
red[500],
cyan[500],
amber[500],
teal[500],
yellow[500],
green[500],
blue[500],
indigo[500],
orange[500],
deepPurple[500],
lightBlue[500],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: grey[800], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[700], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: amber[500],
color: grey[800],
'&:hover': {
backgroundColor: amber[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[800],
color: '#ffffff',
}
}
},
}
Example #7
| Source File: ThemeMoonlight.js From corona-board with MIT License | 4 votes |
|
ThemeMoonlight = {
palette: {
type: 'dark',
// Essential
primary: indigo,
secondary: blueGrey,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: indigo[900],
// dark: will be calculated from palette.sample,
// contrastText: will be calculated to contrast with palette.sample
},
},
colors: {
// Base colors
colorLight: '#ffffff',
colorDark: grey[800],
// Content
contentBackground: blueGrey[900],
contentText: '#ffffff',
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[400],
drawerMenuSelectedBackground: blueGrey[600],
drawerMenuSelectedPin: yellow[600],
// Speed dial
speedDialColor: indigo[900],
// Progress
progress: indigo[900],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
yellow[500],
indigo[500],
amber[500],
orange[500],
yellow[600],
indigo[600],
amber[600],
orange[600],
yellow[700],
indigo[700],
amber[700],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: blueGrey[700], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: blueGrey[800], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: yellow[600],
color: grey[800],
'&:hover': {
backgroundColor: yellow[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[800],
color: '#ffffff',
}
}
},
}
