Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CssBaseline] Make dark mode scrollbar overrides an optional function #24780

Merged
merged 3 commits into from
Feb 8, 2021
Merged

[CssBaseline] Make dark mode scrollbar overrides an optional function #24780

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd7c7b3
Make dark mode scrollbar overrides an optional function rather than r…
dborstelmann Feb 5, 2021
58dffa6
polish
oliviertassinari Feb 7, 2021
b3312be
Matt's review
oliviertassinari Feb 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/src/modules/components/ThemeContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -224,6 +225,15 @@ export function ThemeProvider(props) {
spacing,
},
dense ? highDensity : null,
{
components: {
MuiCssBaseline: {
styleOverrides: {
body: paletteMode === 'dark' ? darkScrollbar() : null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😢

Copy link
Member

@oliviertassinari oliviertassinari Feb 7, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you saying you would rather not see it used in the documentation? Most of the audience is on Windows/Linux. Maybe I'm not troubled by the behavior because I have my scrollbar configured on macOS to behave like on Windows/Linux.

Capture d’écran 2021-02-08 à 00 54 05

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not personally, but I get it, which is why I didn't comment further.

},
},
},
},
languageMap[userLanguage],
);

Expand Down
19 changes: 18 additions & 1 deletion docs/src/pages/components/css-baseline/css-baseline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,24 @@ The `<html>` and `<body>` 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,
},
},
},
});
```

The documentation website you are on uses `darkScrollbar` when the dark mode is enabled.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
However, be aware that using this help (and customizing `-webkit-scrollbar`) forces macOS to always show the scrollbar.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved

### Typography

Expand Down
33 changes: 0 additions & 33 deletions packages/material-ui/src/CssBaseline/CssBaseline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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) => {
Expand Down
33 changes: 33 additions & 0 deletions packages/material-ui/src/darkScrollbar/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
};
}
3 changes: 3 additions & 0 deletions packages/material-ui/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
3 changes: 3 additions & 0 deletions packages/material-ui/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down