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

theme = createMuiTheme({
  overrides: {
    MuiAppBar: {
      colorPrimary: {
        backgroundColor: grey[800],
      },
    },
    MuiToolbar: {
      dense: {
        minHeight: 0,
        maxHeight: 32,
      },
    },
  },
})

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]
}

useStyles = makeStyles((theme) => ({
  root_1: {
    flex: 1,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column",
  },
  root_2: {
    flex: 1,
    display: "flex",
    flexDirection: "column",
  },
  icon: { fontSize: "7em", color: grey[500], paddingBottom: theme.spacing(2) },
  text: {
    paddingBottom: theme.spacing(2),
  },
}))

useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: grey[200],
    flex: 1,
  },
  header: {
    backgroundColor: grey[50],
    padding: theme.spacing(6),
    paddingBottom: theme.spacing(0),
  },
  subscriptionContent: {
    padding: theme.spacing(6),
    width: "100%",
    height: "100%",
  },
  avatar: {
    width: theme.spacing(9),
    height: theme.spacing(9),
  },
  info_1: {
    display: "flex",
    flexWrap: "wrap",
    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  info_2: {
    display: "flex",
    flexDirection: "column",
  },
  info_3: {
    display: "flex",
    flex: 1,
    justifyContent: "space-between",
    padding: theme.spacing(1),
  },
  subscribeBtn: {
    padding: theme.spacing(1.5),
  },
}))

useStyles = makeStyles((theme) => ({
  searchButton: {
    color: grey[700],
    backgroundColor: grey[200],
    "&:hover": {
      //you want this to be the same as the backgroundColor above
      backgroundColor: grey[200],
    },
    "&:focus": {
      outline: "none",
    },
    borderLeftStyle: "solid",
    borderLeftWidth: "1px",
    borderLeftColor: grey[300],

    borderRadius: 0,
  },
  border: {
    borderColor: grey[300],
    borderStyle: "solid",
    borderWidth: "1px",
    borderRadius: 0,
  },
  searchForm: {
    backgroundColor: "white",
    width: "100%",
  },
  input: {
    padding: theme.spacing(0, 1),
  },
}))

useStyles = makeStyles((theme) => ({
  active: {
    backgroundColor: grey[300],
    "&:hover": { backgroundColor: grey[400] },
  },
  icon: {
    padding: theme.spacing(0, 1),
  },
  iconActive: {
    color: red[600],
  },
  text: {
    color: "inherit" /* blue colors for links too */,
    textDecoration: "none" /* no underline */,
    "&:hover": {
      color: "inherit" /* blue colors for links too */,
      textDecoration: "none" /* no underline */,
    },
  },
}))

useStyles = makeStyles((theme) => ({
  title: {
    padding: theme.spacing(0, 1),
    fontSize: "1em",
    fontWeight: 500,
    color: grey[600],
  },
  bestOfYoutubeIcon: {
    width: "24px",
    height: "24px",
    borderRadius: "50%",
  },
  root_h: {
    display: "flex",
    overflowX: "auto",
    justifyContent: "center",
  },
  spacing_h: { margin: "1em" },
  img_h: {
    width: "100%",
    height: "100%",
    borderRadius: "100%",
  },
}))

useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  rating: {
    display: "flex",
    alignItems: "center",
    color: grey[500],
    margin: theme.spacing(1),
    marginLeft: theme.spacing(0),
  },
  thumbBtn: {
    cursor: "pointer",
    marginRight: theme.spacing(0.5),
  },
  active: {
    color: blue[700],
  },
  small: { fontSize: 18 },
}))

useStyles = makeStyles((theme) => ({
  text: {
    fontWeight: 400,
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5),
  },
  subTitle: {
    color: grey[700],
  },
  info_1: {
    display: "flex",
    paddingTop: theme.spacing(1),
  },
  secondaryInfo: {
    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  info_2: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
  },
  info_3: {
    display: "flex",
    lineHeight: "80%",
  },
  channel: {
    fontWeight: 500,
  },
  replyBtn: {
    backgroundColor: grey[400],
    borderRadius: 2,
  },
  timeAgo: {
    marginLeft: theme.spacing(1),
  },
}))

AntTab = withStyles((theme) => ({
  root: {
    color: grey[600],
    textTransform: "uppercase",
    minWidth: 72,
    fontWeight: theme.typography.fontWeightRegular,
    marginRight: theme.spacing(4),
    fontFamily: [
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
    "&:hover": {
      color: "black",
      opacity: 1,
    },
    "&$selected": {
      color: "black",
      fontWeight: theme.typography.fontWeightMedium,
    },
    "&:focus": {
      color: "black",
    },
  },
  selected: {},
}))((props) => <Tab disableRipple {...props} />)

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)"
          }
        }
      }
    }
  });
}

darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: grey,
    secondary: grey
  },
  props: {
    MuiButtonBase: {
      disableRipple: true
    }
  }
})

export default function ErrorPage({ ...rest }) {
  React.useEffect(() => {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
  });
  const classes = useStyles();
  return (
    <div>
      <div
        className={classes.pageHeader}
        style={{
          //   backgroundImage: 'url(' + image + ')',
          backgroundColor: grey[600],
          backgroundSize: 'cover',
          backgroundPosition: 'top center',
        }}
      >
        <div className={classes.contentCenter}>
          <h1 className={classes.title}>404</h1>
          <h2 className={classes.subTitle}>Page not found :(</h2>
          <h4 className={classes.description}>Oops!! Looks like you got lost.</h4>
        </div>
      </div>
    </div>
  );
}

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,
  },
})

styles = theme => ({
    accountCard: {
        cursor: "pointer",
        border: "4px dashed rgba(128, 128, 128, 0.3)"
    },
    createNewCardActionArea: {
        textAlign: "center",
        color: grey[500]
    },
    cardAction: {
        display: "flow-root"
    },
    floatRight: {
        float: "right"
    },
    avatar: {
        backgroundColor: "transparent"
    },

})

ThemeProvider = ({ children }) => {
  const prefersDarkMode = useMediaQuery('@media (prefers-color-scheme: dark)');
  const preferredThemeType = prefersDarkMode ? 'dark' : 'light';

  const [themeType, setThemeType] = useState(
    storedThemeType || preferredThemeType
  );

  const toggleTheme = useCallback(() => {
    setThemeType((themeType) => (themeType === 'light' ? 'dark' : 'light'));
  }, []);

  useEffect(() => {
    localStorage.setItem('themeType', themeType);
    const themeMetaTag = document.querySelector('meta[name="theme-color"]');
    if (themeMetaTag) {
      themeMetaTag.setAttribute(
        'content',
        themeType === 'dark' ? grey[800] : indigo[500]
      );
    }
  }, [themeType]);

  return (
    <MuiThemeProvider theme={themes[themeType]}>
      <ToggleThemeContext.Provider value={toggleTheme}>
        {children}
      </ToggleThemeContext.Provider>
    </MuiThemeProvider>
  );
}

mapColorForStatus = status => {
  const mapping = {
    hospitalised: {
      main: amber[900],
      contrastText: "#fff",
    },
    stable: {
      main: amber[900],
      contrastText: "#fff",
    },
    hospitalised_again: {
      main: orange[900],
      contrastText: "#fff",
    },
    pending_admission: {
      main: "#f99f02",
      contrastText: "#fff",
    },
    discharged: {
      main: "#368e3b",
      contrastText: "#fff",
    },
    serious: {
      main: "#eb605e",
      contrastText: "#fff",
    },
    critical: {
      main: red[900],
      contrastText: "#fff",
    },
    deceased: {
      main: grey[700],
      contrastText: "#fff",
    },
    no_admission: {
      main: grey[500],
      contrastText: "#fff",
    },
    asymptomatic: {
      main: "#4f5096",
      contrastText: "#fff",
    },
    default: {
      main: "#cfcfcf",
      contrastText: "#fff",
    },
  }

  if (!mapping[status]) return mapping["default"]
  return mapping[status]
}

CaseText = styled(({ pass14days, children, ...props }) => (
  <Typography {...props}>{children}</Typography>
))`
  color: ${props => {
    return props.pass14days ? grey[500] : "black"
  }};
`

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],
            }
        },
    },
}

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],
            }
        },
    },
}

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],
            }
        },
    },
}

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],
            }
        },
    },
}

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],
            }
        },
    },
}

useStyles = makeStyles((theme) => ({
  text: {
    fontWeight: 400,
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5),
  },
  subTitle: {
    color: grey[700],
  },
  pointer: {
    cursor: "pointer",
  },
  primaryInfo: {
    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  secondaryInfo: {
    display: "flex",
    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  secondaryInfo_1: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
  },
  secondaryInfo_2: {
    display: "flex",
    width: "100%",
  },
  channel: {
    fontWeight: 500,
  },
  secondaryInfo_3: {
    paddingLeft: theme.spacing(1),
    lineHeight: "80%",
  },
  likeSubscribe: {
    display: "flex",
    marginLeft: "auto",
  },
}))

useStyles = makeStyles((theme) => ({
  root: {
    flex: 1,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    borderWidth: 2,
    borderRadius: 2,
    outline: "none",
    transition: "border .24s ease-in-out",
  },
  content: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  button: {
    alignSelf: "center",
    margin: theme.spacing(3),
  },
  uploadBtn: {
    width: 150,
    height: 150,
    backgroundColor: grey[200],
    boxShadow: "none",
  },
  uploadIcon: {
    fontSize: "5em",
    color: grey[500],
  },
  acceptStyle: {
    borderColor: "#00e676",
    color: "green",
  },
  rejectStyle: {
    borderColor: "#ff1744",
    color: "red",
  },
}))

CerpusUI = ({ children }) => {
    const editorContainer = document.getElementById('theBody');
    const bodyLanguageCode =
        editorContainer !== null
            ? editorContainer.getAttribute('data-locale')
            : null;
    const i18nData =
        bodyLanguageCode !== null ? addLanguage(bodyLanguageCode) : i18nDefault;

    return (
        <IntlProvider {...i18nData}>
            <CerpusThemeProvider>
                <ThemeProvider
                    theme={createTheme({
                        palette: {
                            grey: {
                                main: grey[300],
                                dark: grey[400],
                            },
                            primary: {
                                main: '#21456A',
                                dark: '#21456A',
                            },
                            secondary: {
                                main: '#82E066',
                                dark: '#1D7105',
                            },
                        },
                        typography: {
                            htmlFontSize: 10,
                            fontFamily: "'Lato', sans-serif",
                        },
                    })}
                >
                    <CssBaseline />
                    {children}
                </ThemeProvider>
            </CerpusThemeProvider>
        </IntlProvider>
    );
}

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',
            }
        }
    },
}

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',
            }
        }
    },
}

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',
            }
        }
    },
}