@material-ui/core/colors#blueGrey JavaScript Examples

The following examples show how to use @material-ui/core/colors#blueGrey. 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: FancySwitch.js    From Website with MIT License 6 votes vote down vote up 
FancySwitch = withStyles({
	root: {
		padding: 7,
	},
	thumb: {
		width: 24,
		height: 24,
		backgroundColor: "#fff",
		boxShadow: "0 0 12px 0 rgba(0,0,0,0.08), 0 0 8px 0 rgba(0,0,0,0.12), 0 0 4px 0 rgba(0,0,0,0.38)",
	},
	switchBase: {
		color: "rgba(0,0,0,0.38)",
		padding: 7,
	},
	track: {
		borderRadius: 20,
		backgroundColor: blueGrey[300],
	},
	checked: {
		"& $thumb": {
			backgroundColor: "#fff",
		},
		"& + $track": {
			opacity: "1 !important",
		},
	},
})(props => <Switch color="primary" {...props}/>)
Example #2
Source File: theme.js    From Full-Stack-React-Projects-Second-Edition with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
    palette: {
      primary: {
      light: '#8eacbb',
      main: '#607d8b',
      dark: '#34515e',
      contrastText: '#fff',
    },
    secondary: {
      light: '#e7ff8c',
      main: '#b2ff59',
      dark: '#7ecb20',
      contrastText: '#000',
    },
      openTitle: blueGrey['400'],
      protectedTitle: lightGreen['400'],
      type: 'light'
    }
  })
Example #3
Source File: branding.js    From aws-amplify-identity-broker with MIT License 6 votes vote down vote up 
Branding = {
	appName: "Amplify Identity Broker",

	primary: blueGrey[900], 					// #263238,
	secondary: blueGrey[300], 					// #90a4ae,
	accent: orange[500],						// #ff9800

	neutral: blueGrey[50], 						// #eceff1
	positive: green[700], 						// #689f38
	negative: red[700], 						// #d32f2f
	info: blue[700],							// #1976d2
	warning: orange[700],						// #f57c00

	cardHeaderColorPrimary: blueGrey[100],		// #cfd8dc
	cardHeaderColorAccent: orange[500],			// #ff9800

	white: '#fff',								// #fff
	black: '#000',								// #000

	opacityHover: 0.85,
}
Example #4
Source File: themeConfig.js    From oftadeh-react-admin with MIT License 6 votes vote down vote up 
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 #5
Source File: ThemeDark.js    From corona-board with MIT License 4 votes vote down vote up 
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 #6
Source File: ThemeMoonlight.js    From corona-board with MIT License 4 votes vote down vote up 
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',
            }
        }
    },
}