@mui/material/colors#grey TypeScript Examples

The following examples show how to use @mui/material/colors#grey. 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: Footer.tsx    From genshin-optimizer with MIT License 6 votes vote down vote up 
function FooterContent() {
  const { t } = useTranslation("ui")
  return <AppBar position="static" sx={{ bgcolor: "#343a40" }} elevation={0}>
    <Box display="flex" justifyContent="space-between" sx={{ px: 2, py: 1 }} gap={2}>
      <Typography variant="caption" sx={{ color: grey[200] }}>
        <Trans t={t} i18nKey="ui:rightsDisclaimer">Genshin Optimizer is not affiliated with or endorsed by hoYoVerse.</Trans>
      </Typography>
      <Typography variant="caption" sx={{ color: grey[200], textAlign: "right" }} >
        <Trans t={t} i18nKey="ui:appVersion" values={{ version: packageInfo.version }}>Genshin Optimizer Version: <code>{{ version: packageInfo.version }}</code></Trans>
      </Typography>
    </Box>
  </AppBar >
}
Example #2
Source File: darkTheme.ts    From react-flight-tracker with MIT License 6 votes vote down vote up 
rawDarkTheme = createTheme({
  map: {
    style: 'mapbox://styles/mapbox/dark-v10'
  },
  typography: {
    htmlFontSize: 10,
  },
  palette: {
    mode: 'dark',
    primary: {
      main: blue[500],
    },
    secondary: {
      main: pink[500],
    },
    background: {
      paper: grey[800]
    },
    command: {
      main: purple[500],
      light: purple[400],
      dark: purple[600],
    }
  },
})
Example #3
Source File: lightTheme.ts    From react-flight-tracker with MIT License 6 votes vote down vote up 
rawLightTheme = createTheme({
  map: {
    style: 'mapbox://styles/mapbox/light-v10'
  },
  typography: {
    htmlFontSize: 10,
  },
  palette: {
    mode: 'light',
    primary: {
      main: blue[500],
    },
    secondary: {
      main: pink[500],
    },
    background: {
      paper: grey[200]
    },
    command: {
      main: purple[500],
      light: purple[400],
      dark: purple[600],
    }
  },
})
Example #4
Source File: pineappleTheme.ts    From react-flight-tracker with MIT License 6 votes vote down vote up 
rawPineappleTheme = createTheme({
  map: {
    style: 'mapbox://styles/mapbox/dark-v10'
  },
  typography: {
    htmlFontSize: 10,
  },
  palette: {
    mode: 'dark',
    primary: {
      main: teal[500],
    },
    secondary: {
      main: amber[500],
    },
    background: {
      paper: grey[800]
    },
    command: {
      main: purple[500],
      light: purple[400],
      dark: purple[600],
    }
  },
})
Example #5
Source File: theme.tsx    From ExpressLRS-Configurator with GNU General Public License v3.0 5 votes vote down vote up 
themeConfig: ThemeOptions = {
  shape: {
    borderRadius: 0,
  },
  palette: {
    mode: 'dark',
    background: {
      paper: grey[800],
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: darkScrollbar(),
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundImage: 'none !important',
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: 'none !important',
        },
      },
    },
    MuiAlert: {
      styleOverrides: {
        standardError: {
          backgroundColor: 'rgb(156 40 34) !important',
          color: 'rgb(255 255 255) !important',
        },
        standardWarning: {
          backgroundColor: 'rgb(173 110 17) !important',
          color: 'rgb(255 255 255) !important',
        },
        standardInfo: {
          backgroundColor: 'rgb(44 104 158) !important',
          color: 'rgb(255 255 255) !important',
        },
        standardSuccess: {
          backgroundColor: 'rgb(27 84 27) !important',
          color: 'rgb(255 255 255) !important',
        },
      },
    },
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          paddingLeft: '1em',
          paddingRight: '1em',
          fontSize: '1em !important',
          '& a': {
            color: '#90caf9',
          },
          maxWidth: '700px',
        },
        popper: {
          maxWidth: '700px',
        },
      },
    },
  },
}
Example #6
Source File: App.tsx    From mojito_pdm with Creative Commons Attribution Share Alike 4.0 International 4 votes vote down vote up 
App: React.FC = () => {
    const mode = useRecoilValue(GlobalState.theme)
    const setBuyEnabled = useSetRecoilState(GlobalState.canBuy)
    const setColoursEnabled = useSetRecoilState(GlobalState.customColours)
    const setCars = useSetRecoilState(CarState.rawCars)

    useNuiEvent<Car[]>('setCars', setCars)

    useEffect(() => {
        fetchNui<{ buy: boolean, colours: boolean }>("fetchconfig").then((data) => {
            setBuyEnabled(data.buy)
            setColoursEnabled(data.colours)
        }).catch(() => {
            setBuyEnabled(true)
            setColoursEnabled(false)
        })
    })

    const theme = useMemo(
        () =>
            createTheme({
                palette: {
                    mode,
                    ...(mode === 'light'
                        ? {
                            // palette values for light mode
                            primary: blue,
                            text: {
                                primary: grey[900],
                                secondary: grey[800],
                            },
                            background: {
                                default: "transparent"
                            }
                        }
                        : {
                            // palette values for dark mode
                            primary: blue,
                            text: {
                                primary: '#fff',
                                secondary: grey[500],
                            },
                            background: {
                                default: "transparent"
                            }
                        }),
                },
                components: {
                    MuiCssBaseline: {
                        styleOverrides: {
                            body: {
                                scrollbarColor: "#6b6b6b #2b2b2b",
                                "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
                                    backgroundColor: mode === "dark"? grey[800] : grey[200],
                                },
                                "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
                                    borderRadius: 8,
                                    backgroundColor: grey[500],
                                    minHeight: 24,
                                },
                                "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
                                    backgroundColor: grey[600],
                                },
                            },
                        },
                    },
                },
            }),
        [mode],
    );

    return (
        <ThemeProvider theme={theme}>
            <VisibilityProvider>
                <Box sx={{
                    width: 1100,
                    height: 600,
                    maxHeight: 600,
                }}>
                    <Paper elevation={2} sx={{minHeight: "100%", maxHeight: 600, overflowY: "scroll"}}>
                        <Catalogue/>
                    </Paper>
                </Box>
            </VisibilityProvider>
            <CssBaseline />
        </ThemeProvider>
    );
}