[CssBaseline] Add dark mode scrollbar support #23407
Conversation
This comment has been minimized.
This comment has been minimized.
|
@material-ui/core: parsed: +0.17% , gzip: +0.16% |
|
I have recently found that Azure uses a similar approach. They have managed to get the hover feedback working (which is better than to have it on active). Do you think that you could have a look at it? See how they pulled it off and apply it here too? It looks better than what I did :) |
oliviertassinari
changed the title
oliviertassinari
added
component: CssBaseline
| const scrollBar = { | ||
| track: '#2b2b2b', | ||
| thumb: '#6b6b6b', | ||
| active: '#959595', | ||
| }; | ||
|
|
There was a problem hiding this comment.
Should we add this to the theme instead?
There was a problem hiding this comment.
I'm not sure if it's needed. It's meant to match the need of a dark theme, not custom colors a theme might have.
There was a problem hiding this comment.
@oliviertassinari how dark is the dark theme? That is where I am getting to since it may be the case that different colors would be nicer for the scrollbar.
That being said, I am not sure, since I use transparent colors in my apps
Example:
{
'*:-webkit-full-screen': {
height: '100%',
width: '100%',
},
'::-webkit-scrollbar': {
width: '6px',
},
'::-webkit-scrollbar-button': {
height: 0,
width: 0,
},
'::-webkit-scrollbar-thumb': {
background: 'hsla(0, 0%, 0%, 0.2)',
borderRadius: '3em',
transition: 'all .3s ease-in-out',
},
'::-webkit-scrollbar-track': {
background: 'hsla(0, 0%, 0%, 0)',
},
}There was a problem hiding this comment.
Is there any code style for this? I also like having one color and then tinkering with the opacity value.
There was a problem hiding this comment.
how dark is the dark theme?
Exactly, this was my point. On a light theme, end-users are used to using the same color for the scrollbar no matter how light the theme is, it very often white or slightly grey. I'm hoping we could still benefit from this simplification.
Regarding going in a direction of allowing to customize these values. What would be the API?
There was a problem hiding this comment.
@oliviertassinari got it,
But that is exactly what I don't like either 😄 if you notice I change the scrollbar regardless since I am taking control over it.
I don't see any harm moving into the theme in cases people want to mess with it like I am doing.
Unless there is a technical reason why not to do it 🤷🏻
There was a problem hiding this comment.
I don't see any harm moving into the theme in cases people want to mess with it like I am doing.
Any proposal for the API?
There was a problem hiding this comment.
The static object seems to be a good API as far as I can tell.
There was a problem hiding this comment.
I don't understand, do you have an example from a developer's perspective?
|
got the hover working and looked at what they did at azure. It seems they're having classes for their "custom" scrollbar, but I just applied what we already have and added :hover. Works on my end. Let me know, if this was not what you were asking for? |
Leverage the findings from mui/material-ui#23407
|
@mmmols It's a great first pull request on Material-UI 👌🏻. Thank you for working on it! |
|
@oliviertassinari thank you for building mui-org! |
Closes #22594
Preview: https://deploy-preview-23407--material-ui.netlify.app/