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

The following examples show how to use @material-ui/core/colors#deepOrange. 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: profile.jsx    From react-03.03 with MIT License 6 votes vote down vote up 
useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  small: {
    width: theme.spacing(3),
    height: theme.spacing(3),
  },
  large: {
    width: theme.spacing(6),
    height: theme.spacing(6),
    color: theme.palette.getContrastText(deepOrange[500]),
    backgroundColor: deepOrange[500],
  },
}))
Example #2
Source File: Component.jsx    From dashboard-for-socialmedia-trend with MIT License 6 votes vote down vote up 
useStyles = makeStyles((theme) => ({
  drawerPaper: {
    width: 300,
  },
  avatar: {
    color: theme.palette.getContrastText(deepOrange[500]),
    backgroundColor: deepOrange[500],
    width: theme.spacing(10),
    height: theme.spacing(10),
  },
  user: {
    width: "100%",
    height: theme.spacing(30),
    display: "flex",
    flexFlow: "column",
    justifyContent: "center",
    alignItems: "center",
  },
  name: {
    marginTop: theme.spacing(2)
  }
}))
Example #3
Source File: ThemeSunset.js    From corona-board with MIT License 5 votes vote down vote up 
ThemeSunset = {
    palette: {
        type: 'light',
        // Essential
        primary: red,
        secondary: pink,
        error: purple,
        // 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[800],
        contentText: grey[800],
        // AppBar
        appBarContentText: '#ffffff',
        // Drawer menu
        drawerMenuCategoryText: grey[600],
        drawerMenuSelectedBackground: red[200],
        drawerMenuSelectedPin: red[500],
        // Progress
        progress: red[500],
        // Color set for StickyBoard components (e.g., charts, number...)
        colorArray: [
            red[500],
            purple[500],
            amber[500],
            red[600],
            red[700],
            purple[600],
            red[800],
            orange[500],
            purple[700],
            yellow[500],
            deepOrange[600],
        ],
    },
    overrides: {
        MuiAppBar: {
            colorPrimary: {
                backgroundColor: red[500],      // AppBar background color
                color: '#ffffff',
            },
        },
        MuiDrawer: {
            paper: {
                backgroundColor: red[100],     // Drawer background color
            }
        },
        MuiIconButton: {
            root: {
                color: '#ffffff',
            }
        },
        MuiFab: {
            primary: {
                backgroundColor: red[500],
                color: '#ffffff',
                '&:hover': {
                    backgroundColor: red[700],
                }
            }
        },
        MuiSpeedDialAction:{
            fab: {
                backgroundColor: grey[50],
                color: grey[800],
            }
        },
    },
}