@mui/material#darkScrollbar TypeScript Examples

The following examples show how to use @mui/material#darkScrollbar. 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.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up 
darkTheme: ThemeOptions = {
  palette: {
    mode: 'dark',
    primary: {
      main: '#20ba4e'
    },
    secondary: {
      main: '#ff8c00'
    }
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: darkScrollbar()
      }
    }
  }
}
Example #2
Source File: Theme.tsx    From genshin-optimizer with MIT License 4 votes vote down vote up 
theme = createTheme({
  palette: {
    mode: 'dark',
    primary: defaultTheme.palette.augmentColor({
      color: { main: '#1e78c8' },
      name: "primary"
    }),
    secondary: defaultTheme.palette.augmentColor({
      color: { main: '#6c757d' },
      name: "secondary"
    }),
    success: defaultTheme.palette.augmentColor({
      color: { main: '#46a046' },
      name: "success"
    }),
    warning: defaultTheme.palette.augmentColor({
      color: { main: `#ffc107` },
      name: "warning"
    }),
    error: defaultTheme.palette.augmentColor({
      color: { main: `#c83c3c` },
      name: "error"
    }),
    background: {
      default: '#0C1020',
      paper: '#0C1020',
    },
    info: defaultTheme.palette.augmentColor({
      color: { main: '#17a2b8' },
      name: "info"
    }),
    text: {
      primary: 'rgba(255,255,255,0.9)',

    },
    contentDark: defaultTheme.palette.augmentColor({
      color: { main: "#1b263b" },
      name: "contentDark"
    }),
    contentDarker: defaultTheme.palette.augmentColor({
      color: { main: "#172032" },
      name: "contentDarker"
    }),
    contentLight: defaultTheme.palette.augmentColor({
      color: { main: "#2a364d" },
      name: "contentLight"
    }),
    roll1: defaultTheme.palette.augmentColor({
      color: { main: "#a3a7a9" },
      name: "roll1"
    }),
    roll2: defaultTheme.palette.augmentColor({
      color: { main: "#6fa376", },
      name: "roll2"
    }),
    roll3: defaultTheme.palette.augmentColor({
      color: { main: "#8eea83", },
      name: "roll3"
    }),
    roll4: defaultTheme.palette.augmentColor({
      color: { main: "#31e09d", },
      name: "roll4"
    }),
    roll5: defaultTheme.palette.augmentColor({
      color: { main: "#27bbe4", },
      name: "roll5"
    }),
    roll6: defaultTheme.palette.augmentColor({
      color: { main: "#de79f0", },
      name: "roll6"
    }),
    geo: defaultTheme.palette.augmentColor({
      color: { main: "#f8ba4e", contrastText: "#fff" },
      name: "geo"
    }),
    dendro: defaultTheme.palette.augmentColor({
      color: { main: "#b1ea29", },
      name: "dendro"
    }),
    pyro: defaultTheme.palette.augmentColor({
      color: { main: "#bf2818", },
      name: "pyro"
    }),
    hydro: defaultTheme.palette.augmentColor({
      color: { main: "#2f63d4", },
      name: "hydro"
    }),
    cryo: defaultTheme.palette.augmentColor({
      color: { main: "#77a2e6", contrastText: "#fff" },
      name: "cryo"
    }),
    electro: defaultTheme.palette.augmentColor({
      color: { main: "#b25dcd", },
      name: "electro"
    }),
    anemo: defaultTheme.palette.augmentColor({
      color: { main: "#61dbbb", contrastText: "#fff" },
      name: "anemo"
    }),
    physical: defaultTheme.palette.augmentColor({
      color: { main: "#aaaaaa", },
      name: "physical"
    }),
    vaporize: defaultTheme.palette.augmentColor({
      color: { main: "#ffcb65", },
      name: "vaporize"
    }),
    melt: defaultTheme.palette.augmentColor({
      color: { main: "#ffcb65", },
      name: "melt"
    }),
    overloaded: defaultTheme.palette.augmentColor({
      color: { main: "#ff7e9a", },
      name: "overloaded"
    }),
    superconduct: defaultTheme.palette.augmentColor({
      color: { main: "#b7b1ff", },
      name: "superconduct"
    }),
    electrocharged: defaultTheme.palette.augmentColor({
      color: { main: "#e299fd", },
      name: "electrocharged"
    }),
    shattered: defaultTheme.palette.augmentColor({
      color: { main: "#98fffd", },
      name: "shattered"
    }),
    swirl: defaultTheme.palette.augmentColor({
      color: { main: "#66ffcb", },
      name: "swirl"
    }),
    burning: defaultTheme.palette.augmentColor({
      color: { main: "#bf2818", },
      name: "burning"
    }),
    crystallize: defaultTheme.palette.augmentColor({
      color: { main: "#f8ba4e", },
      name: "crystallize"
    }),
  },
  typography: {
    button: {
      textTransform: 'none'
    }
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: defaultTheme.palette.mode === 'dark' ? darkScrollbar() : null,
      },
    },
    MuiAppBar: {
      defaultProps: {
        enableColorOnDark: true,
      },
    },
    MuiPaper: {
      defaultProps: {
        elevation: 0
      }
    },
    MuiButton: {
      defaultProps: {
        variant: "contained"
      }
    },
    MuiButtonGroup: {
      defaultProps: {
        variant: "contained"
      }
    },
    MuiList: {
      styleOverrides: {
        root: {
          padding: 0,
          marginTop: defaultTheme.spacing(1),
          marginBottom: defaultTheme.spacing(1),
        }
      }
    },
    MuiTypography: {
      styleOverrides: {
        root: {
          "& ul": {
            margin: 0,
            paddingLeft: defaultTheme.spacing(3)
          }
        }
      }
    },
    MuiCardContent: {
      styleOverrides: {
        root: {
          [defaultTheme.breakpoints.down('sm')]: {
            padding: defaultTheme.spacing(1),
            "&:last-child": {
              paddingBottom: defaultTheme.spacing(1),
            }
          },
          [defaultTheme.breakpoints.up('sm')]: {
            "&:last-child": {
              paddingBottom: defaultTheme.spacing(2),
            }
          }
        }
      }
    }
  },
})