@material-ui/core/colors#deepPurple JavaScript Examples
The following examples show how to use
@material-ui/core/colors#deepPurple.
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: DashboardSidebar.js From eSim-Cloud with GNU General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme) => ({
toolbar: {
minHeight: '45px'
},
purple: {
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500]
},
sideItem: {
padding: theme.spacing(1.5, 2)
},
nested: {
paddingLeft: theme.spacing(2),
overflow: 'auto',
width: '100%',
maxHeight: 200
},
nestedSearch: {
padding: theme.spacing(0),
border: '1px solid #cccccc',
margin: theme.spacing(1, 2),
borderRadius: '5px'
},
input: {
marginLeft: theme.spacing(1),
flex: 1
}
}))
Example #2
| Source File: Header.js From eSim-Cloud with GNU General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme) => ({
toolbarTitle: {
marginRight: theme.spacing(2)
},
input: {
marginLeft: theme.spacing(1),
width: '200px',
color: '#595959'
},
rightBlock: {
marginLeft: 'auto',
marginRight: theme.spacing(2)
},
button: {
marginRight: theme.spacing(0.7)
},
small: {
width: theme.spacing(3.7),
height: theme.spacing(3.7)
},
tools: {
padding: theme.spacing(1),
margin: theme.spacing(0, 0.8),
color: '#262626'
},
purple: {
width: theme.spacing(3.75),
height: theme.spacing(3.75),
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500],
fontSize: '17px'
},
backDrop: {
backdropFilter: 'blur(10px)'
}
}))
Example #3
| Source File: Navbar.js From eSim-Cloud with GNU General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme) => ({
appBar: {
borderBottom: `1px solid ${theme.palette.divider}`
},
root: {
width: 500
},
toolbar: {
flexWrap: 'wrap'
},
toolbarTitle: {
flexGrow: 1
},
link: {
margin: theme.spacing(1, 1.5)
},
button: {
marginRight: theme.spacing(0.7)
},
small: {
width: theme.spacing(3.7),
height: theme.spacing(3.7)
},
purple: {
width: theme.spacing(3.75),
height: theme.spacing(3.75),
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500],
fontSize: '17px'
},
typography: {
padding: theme.spacing(2)
}
}))
Example #4
| Source File: Categories.js From Doto with MIT License | 6 votes |
|
categoryData = [
{
text: "Homework",
id: 1,
color: pink,
},
{
text: "Work",
id: 2,
color: deepPurple,
},
{
text: "Household",
id: 3,
color: blue,
},
{
text: "Personal",
id: 4,
color: green,
},
]
Example #5
| Source File: Setup.jsx From mediumx with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
marginBottom: "20px",
"& > *": {
margin: theme.spacing(1)
}
},
avatar: {
width: theme.spacing(7),
height: theme.spacing(7),
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500]
},
exportContainer: {
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
"& > *": {
marginRight: "10px",
padding: "5px 0",
border: "1px solid #333;",
width: "72px",
borderRadius: "4px",
textAlign: "center",
cursor: "pointer"
}
}
}))
Example #6
| 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 #7
| Source File: ThemeCorona.js From corona-board with MIT License | 4 votes |
|
ThemeCorona = {
palette: {
type: 'light',
// Essential
primary: deepPurple,
secondary: purple,
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[50],
contentText: grey[800],
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[500],
drawerMenuSelectedBackground: deepPurple[100],
drawerMenuSelectedPin: deepPurple[500],
// Speed dial
speedDialColor: deepPurple[500],
// Progress
progress: deepPurple[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
deepPurple[500],
pink[500],
teal[500],
deepPurple[700],
pink[700],
teal[700],
deepPurple[300],
pink[300],
teal[300],
deepPurple[900],
pink[900],
teal[900],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: purple[900], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[300], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: deepPurple[500],
color: grey[200],
'&:hover': {
backgroundColor: deepPurple[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[800],
color: '#ffffff',
}
}
},
}
Example #8
| 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',
}
}
},
}
