diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 30ea794f1f0149..0a736235a888ec 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -9,6 +9,7 @@ import { import useMediaQuery from '@material-ui/core/useMediaQuery'; import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale'; import { blue, pink } from '@material-ui/core/colors'; +import darkScrollbar from '@material-ui/core/darkScrollbar'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/core/utils'; import { getCookie } from 'docs/src/modules/utils/helpers'; import useLazyCSS from 'docs/src/modules/utils/useLazyCSS'; @@ -224,6 +225,15 @@ export function ThemeProvider(props) { spacing, }, dense ? highDensity : null, + { + components: { + MuiCssBaseline: { + styleOverrides: { + body: paletteMode === 'dark' ? darkScrollbar() : null, + }, + }, + }, + }, languageMap[userLanguage], ); diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md index 75112cdddeb72a..ee195dbd4f0f2b 100644 --- a/docs/src/pages/components/css-baseline/css-baseline.md +++ b/docs/src/pages/components/css-baseline/css-baseline.md @@ -67,7 +67,24 @@ The `` and `` elements are updated to provide better page-wide defau ### Scrollbars -In dark mode, the colors of the scrollbars are customized to provide a better contrast. +The colors of the scrollbars can be customized to improve the contrast (especially on Windows). Add this code to your theme (for dark mode). + +```jsx +import darkScrollbar from '@material-ui/core/darkScrollbar'; + +const theme = createMuiTheme({ + components: { + MuiCssBaseline: { + styleOverrides: { + body: theme.palette.mode === 'dark' ? darkScrollbar() : null, + }, + }, + }, +}); +``` + +This website uses `darkScrollbar` when dark mode is enabled. +Be aware, however, that using this utility (and customizing `-webkit-scrollbar`) forces MacOS to always show the scrollbar. ### Typography diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js index 897a14b44b5122..4b5c9c8980b8e4 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.js +++ b/packages/material-ui/src/CssBaseline/CssBaseline.js @@ -14,13 +14,6 @@ export const html = { WebkitTextSizeAdjust: '100%', }; -// track, thumb and active are derieved from macOS 10.15.7 -const scrollBar = { - track: '#2b2b2b', - thumb: '#6b6b6b', - active: '#959595', -}; - export const body = (theme) => ({ color: theme.palette.text.primary, ...theme.typography.body1, @@ -29,32 +22,6 @@ export const body = (theme) => ({ // Save printer ink. backgroundColor: theme.palette.common.white, }, - ...(theme.palette.mode === 'dark' - ? { - scrollbarColor: `${scrollBar.thumb} ${scrollBar.track}`, - '&::-webkit-scrollbar, & *::-webkit-scrollbar': { - backgroundColor: scrollBar.track, - }, - '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': { - borderRadius: 8, - backgroundColor: scrollBar.thumb, - minHeight: 24, - border: `3px solid ${scrollBar.track}`, - }, - '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': { - backgroundColor: scrollBar.active, - }, - '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': { - backgroundColor: scrollBar.active, - }, - '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': { - backgroundColor: scrollBar.active, - }, - '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': { - backgroundColor: scrollBar.track, - }, - } - : {}), }); export const styles = (theme) => { diff --git a/packages/material-ui/src/darkScrollbar/index.ts b/packages/material-ui/src/darkScrollbar/index.ts new file mode 100644 index 00000000000000..af4a3ccc903cc0 --- /dev/null +++ b/packages/material-ui/src/darkScrollbar/index.ts @@ -0,0 +1,33 @@ +// track, thumb and active are derieved from macOS 10.15.7 +const scrollBar = { + track: '#2b2b2b', + thumb: '#6b6b6b', + active: '#959595', +}; + +export default function darkScrollbar(options = scrollBar) { + return { + scrollbarColor: `${options.thumb} ${options.track}`, + '&::-webkit-scrollbar, & *::-webkit-scrollbar': { + backgroundColor: options.track, + }, + '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': { + borderRadius: 8, + backgroundColor: options.thumb, + minHeight: 24, + border: `3px solid ${options.track}`, + }, + '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': { + backgroundColor: options.active, + }, + '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': { + backgroundColor: options.active, + }, + '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': { + backgroundColor: options.active, + }, + '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': { + backgroundColor: options.track, + }, + }; +} diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index 3f3f0ad5e85c56..ddda43eabe80c3 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -176,6 +176,9 @@ export * from './Container'; export { default as CssBaseline } from './CssBaseline'; export * from './CssBaseline'; +export { default as darkScrollbar } from './darkScrollbar'; +export * from './darkScrollbar'; + export { default as Dialog } from './Dialog'; export * from './Dialog'; diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js index 48b2ef52e6befc..814ccd13c4a397 100644 --- a/packages/material-ui/src/index.js +++ b/packages/material-ui/src/index.js @@ -104,6 +104,9 @@ export * from './Container'; export { default as CssBaseline } from './CssBaseline'; export * from './CssBaseline'; +export { default as darkScrollbar } from './darkScrollbar'; +export * from './darkScrollbar'; + export { default as Dialog } from './Dialog'; export * from './Dialog';