@material-ui/core/colors#teal JavaScript Examples
The following examples show how to use
@material-ui/core/colors#teal.
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.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
light: '#52c7b8',
main: '#009688',
dark: '#00675b',
contrastText: '#fff',
},
secondary: {
light: '#ffd95b',
main: '#ffa726',
dark: '#c77800',
contrastText: '#000',
},
openTitle: teal['700'],
protectedTitle: orange['700'],
type: 'light'
}
})
Example #2
| 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 #3
| Source File: colorHelper.js From warsinhk with MIT License | 6 votes |
|
mapColorForClassification = classification => {
const mapping = {
imported: {
main: pink[600],
contrastText: "#fff",
},
imported_close_contact: {
main: pink[700],
contrastText: "#fff",
},
local: {
main: teal[600],
contrastText: "#fff",
},
local_possibly: {
main: teal[500],
contrastText: "#fff",
},
local_unknown_source: {
main: teal[700],
contrastText: "#fff",
},
local_possibly_close_contact: {
main: teal[400],
contrastText: "#fff",
},
local_close_contact: {
main: teal[500],
contrastText: "#fff",
},
default: {
main: grey[900],
contrastText: "#fff",
},
}
if (!mapping[classification]) return mapping["default"]
return mapping[classification]
}
Example #4
| Source File: ThemeGrass.js From corona-board with MIT License | 5 votes |
|
ThemeGrass = {
palette: {
type: 'light',
// Essential
primary: green,
secondary: teal,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: green[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: green[500],
// Progress
progress: green[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
green[500],
cyan[500],
teal[500],
lightGreen[500],
lime[500],
green[600],
cyan[600],
teal[600],
lightGreen[600],
lime[600],
green[700],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: green[500], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[100], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: green[500],
color: '#ffffff',
'&:hover': {
backgroundColor: green[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[50],
color: grey[800],
}
},
},
}
Example #5
| 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 #6
| 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 #7
| Source File: ThemeSoaple.js From corona-board with MIT License | 5 votes |
|
ThemeSoaple = {
palette: {
type: 'dark',
// Essential
primary: lightGreen,
secondary: teal,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: '#7fc734',
// 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: '#ffffff',
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[200],
drawerMenuSelectedBackground: grey[500],
drawerMenuSelectedPin: '#7fc734',
// Progress
progress: '#7fc734',
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
'#7fc734',
cyan[500],
teal[500],
lightGreen[500],
lime[500],
green[600],
cyan[600],
teal[600],
lightGreen[600],
lime[600],
green[700],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: '#7fc734', // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: '#7b7b7e', // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: '#7fc734',
color: '#ffffff',
'&:hover': {
backgroundColor: green[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[50],
color: grey[800],
}
},
},
}
Example #8
| 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 #9
| 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',
}
}
},
}
