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

The following examples show how to use @material-ui/core/colors#cyan. 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: index.js    From reminder-atomic-app-demo with MIT License 6 votes vote down vote up
baseTheme = createMuiTheme({
  container: {
    primary: {
      borderRadius: defaultTheme.spacing(1),
      padding: defaultTheme.spacing(2),
    },
    secondary: {
      borderRadius: defaultTheme.spacing(1),
      padding: defaultTheme.spacing(2),
    },
  },
  palette: {
    type: "dark",
    primary: {
      main: cyan[200],
    },
    secondary: {
      main: orange[500],
    },
    containerPrimary: {
      main: cyan[200],
      light: "#b4ffff",
      dark: "#4bacb8",
    },
    containerSecondary: {
      main: grey[400],
      light: "#f5f5f5",
      dark: "#373737",
    },
  },
  typography: {
    fontSize: 12,
  },
})
Example #2
Source File: App.js    From redive_linebot with MIT License 5 votes vote down vote up
theme = createTheme({
  palette: {
    primary: cyan,
    secondary: lightBlue,
  },
})
Example #3
Source File: ThemeGrass.js    From corona-board with MIT License 5 votes vote down vote up
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 #4
Source File: ThemeLight.js    From corona-board with MIT License 5 votes vote down vote up
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 vote down vote up
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: ThemeSoaple.js    From corona-board with MIT License 5 votes vote down vote up
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 #7
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',
            }
        }
    },
}