Support for a 'true black' mode

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

https://mui.com/material-ui/

MIT License

93.94k stars 32.27k forks source link

Support for a 'true black' mode #23519

Open burtonator opened 4 years ago

burtonator commented 4 years ago

MUI has a great dark mode but for mobile devices that support AMOLED a real true black mode is going to be needed.

True black is basically #000000 for the background so that there is no light coming from those pixels on amoled... the backlighting is essentially off.

Text is much more readable on ipad , android, etc.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Probably just another palette color set. Not a TON of work and if we do it before you guys do I'll add the changes to this bug.

Examples 🌈

https://www.google.com/search?q=twitter+true+black&rlz=1C5CHFA_enUS920US920&sxsrf=ALeKk001aTMV5VNl6O9t9gtBJraZdKp8cg:1605382573826&source=lnms&tbm=isch&sa=X&ved=2ahUKEwixj6qQ5ILtAhUDQ80KHac8D_sQ_AUoAnoECAwQBA&biw=1629&bih=925&dpr=2.2

Motivation 🔦

Just trying not to burn my eyes out. With the current dark mode it's still too light on ipad... would look a lot better with a true black mode.

oliviertassinari commented 4 years ago

The recommended colors are documented in https://material.io/design/color/dark-theme.html#ui-application. We still need to improve the dark theme with #18378, #18308, #18309, #22112. Regarding a true dark mode, feel free to customize the background color to be darker.

burtonator commented 3 years ago

@oliviertassinari Can I suggest reopening this? I think there's a misunderstanding of the request.

What I'm suggesting is to ship with a 3rd palette which is 'black' mode which is just a new palette based on 'dark'.

This can be done by adjusting all the colors and then shifting down everything so that the contrast isn't too extreme.

I might even be able to do it via code ...

The bugs you listed seem tangential. Would be nice if they were fixed but not directly applicable here.

oliviertassinari commented 3 years ago

@burtonator What do you think about we first iterate with theme object developers can copy & paste from this thread? Did you look into the changes required? It would be perfect to share the solution here. Then if we get more requests, we can move it to the source.

oliviertassinari commented 3 years ago

I have linked this issue in #22485:

by "second theme" we mean something that requires 3 months of work, starting from the unstyled components, not small tweaks that take 1 day :)

burtonator commented 3 years ago

@oliviertassinari we might build this on our end as a 'black' mode just by changing the color scheme a bit. I think it's just / mostly about shifting everything down. The one hack might be the default app bar color but I think MUI v5 could fix it and make it easy since there's a more proper impl of elevations there.

If you keep this open I'll update it with the color codes and a screenshot once we are done.

oliviertassinari commented 3 years ago

@burtonator This sounds great, please share the solution here once you have something that works well in your use case :). @joshwooding has started to work on the elevation at #21748.