@mui/material/colors#blue TypeScript Examples
The following examples show how to use
@mui/material/colors#blue.
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: darkTheme.ts From react-flight-tracker with MIT License | 6 votes |
|
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 #2
| Source File: lightTheme.ts From react-flight-tracker with MIT License | 6 votes |
|
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 #3
| Source File: theme.ts From usehooks-ts with MIT License | 5 votes |
|
light: Partial<ThemeOptions> = {
palette: {
mode: 'light',
primary: {
main: blue[700],
},
},
}
Example #4
| Source File: App.tsx From mojito_pdm with Creative Commons Attribution Share Alike 4.0 International | 4 votes |
|
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>
);
}
Example #5
| Source File: Dashboard.tsx From NekoMaid with MIT License | 4 votes |
|
Dashboard: React.FC = () => {
const plugin = usePlugin()
const { version, hasGeoIP } = useGlobalData()
const [status, setStatus] = useState<Status[]>([])
const [current, setCurrent] = useState<CurrentStatus | undefined>()
useEffect(() => {
const offSetStatus = plugin.once('dashboard:info', setStatus)
const offCurrent = plugin.on('dashboard:current', (data: CurrentStatus) => setCurrent(old => {
if (old && isEqual(old.players, data.players)) data.players = old.players
return data
}))
plugin.switchPage('dashboard')
return () => {
offSetStatus()
offCurrent()
}
}, [])
const playerCount = current?.players?.length || 0
const prev = status[status.length - 1]?.players || 0
const percent = (prev ? playerCount / prev - 1 : playerCount) * 100
const tpsColor = !current || current.tps >= 18 ? green : current.tps >= 15 ? yellow : red
return <Box sx={{ minHeight: '100%', py: 3 }}>
<Toolbar />
<Container maxWidth={false}>
<Grid container spacing={3}>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title={lang.dashboard.version}
content={current ? version : <Skeleton animation='wave' width={150} />}
icon={<Handyman />}
color={orange[600]}
>
<Box sx={{ pt: 2, display: 'flex', alignItems: 'flex-end' }}>
{!current || current.behinds < 0
? <Refresh htmlColor={blue[900]} />
: current?.behinds === 0
? <Check htmlColor={green[900]} />
: <Update htmlColor={yellow[900]} />}
<Typography color='textSecondary' variant='caption'> {!current || current.behinds === -3
? lang.dashboard.updateChecking
: current.behinds < 0
? <Link underline='hover' color='inherit' sx={{ cursor: 'pointer' }} onClick={() => {
toast(lang.dashboard.updateChecking)
plugin.emit('dashboard:checkUpdate')
}}>{lang.dashboard.updateFailed}</Link>
: current.behinds === 0 ? lang.dashboard.updated : lang.dashboard.behinds(current.behinds)}</Typography>
</Box>
</TopCard>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title={lang.dashboard.onlinePlayers}
content={current ? playerCount : <Skeleton animation='wave' width={150} />}
icon={<People />}
color={deepPurple[600]}
>
<Box sx={{ pt: 2, display: 'flex', alignItems: 'flex-end' }}>
{percent === 0 ? <Remove color='primary' /> : percent < 0 ? <ArrowDownward color='error' /> : <ArrowUpward color='success' />}
<Typography
sx={{ color: (percent === 0 ? blue : percent < 0 ? red : green)[900], mr: 1 }}
variant='body2'
>{Math.abs(percent).toFixed(0)}%</Typography>
<Typography color='textSecondary' variant='caption'>{lang.dashboard.lastHour}</Typography>
</Box>
</TopCard>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title='TPS'
content={current ? (current.tps === -1 ? '?' : current.tps.toFixed(2)) : <Skeleton animation='wave' width={150} />}
icon={!current || current.tps >= 18 || current.tps === -1
? <SentimentVerySatisfied />
: current.tps >= 15 ? <SentimentSatisfied /> : <SentimentDissatisfied />}
color={tpsColor[600]}
>
<Box sx={{ pt: 2.1, display: 'flex', alignItems: 'flex-end' }}>
<Typography
sx={{ color: tpsColor[900], mr: 1 }}
variant='body2'
>{!current || current.mspt === -1 ? '?' : current.mspt.toFixed(2) + 'ms'}</Typography>
<Typography color='textSecondary' variant='caption'>{lang.dashboard.mspt}</Typography>
</Box>
</TopCard>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<TopCard
title={lang.dashboard.uptime}
content={current ? <Uptime time={current.time} /> : <Skeleton animation='wave' width={150} />}
icon={<AccessTime />}
color={blue[600]}
>
<Box sx={{ pt: 2.7, display: 'flex', alignItems: 'center' }}>
<Typography color='textSecondary' variant='caption' sx={{ marginRight: 1 }}>{lang.dashboard.memory}</Typography>
<Tooltip title={current?.totalMemory ? prettyBytes(current.memory) + ' / ' + prettyBytes(current.totalMemory) : ''}>
<LinearProgress
variant='determinate'
value={current?.totalMemory ? current.memory / current.totalMemory * 100 : 0}
sx={{ flex: '1' }}
/>
</Tooltip>
</Box>
</TopCard>
</Grid>
<Grid item lg={8} md={12} xl={9} xs={12}>{useMemo(() => <Charts data={status} />, [status])}</Grid>
<Grid item lg={4} md={12} xl={3} xs={12}><Players players={current?.players} /></Grid>
{hasGeoIP && current?.players && typeof current.players[0] !== 'string' && <Grid item xs={12}>
<Accordion TransitionProps={{ unmountOnExit: true }} disableGutters>
<AccordionSummary expandIcon={<ExpandMore />}>
<Typography>{lang.dashboard.playersDistribution}</Typography>
</AccordionSummary>
<Divider />
<WorldMap players={current.players as Player[]} />
</Accordion>
</Grid>}
</Grid>
</Container>
</Box>
}
