Convert UI to MUI dark theme

prakhargupta1 commented 2 years ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Summary 💡

This in an exploratory discussion about Toolpad supporting a dark mode. There can be 2 scenarios:

Dark mode by default.

Would all devs prefer it? Though many will as it reduces eye strain in low light conditions. But for a dev working during the daytime it might not be preferred.
Landing page, docs will have to be dark too

Option to switch between dark and light or maybe match system settings. It makes more sense but comes with maintenance overhead.

Docs will also have to support light and dark mode. It would mess with the screenshots/videos?

From a survey conducted for Chrome, of all (201) the users who have tried Dark mode. 75% prefer to keep it always on.

Examples 🌈

https://webflow.com/ (White canvas, gray everywhere else) https://www.bildr.com/ (White canvas, black everywhere else) Tooljet: Supports switching

Motivation 🔦

https://github.community/t/how-popular-is-dark-mode/226624/2 https://community.retool.com/t/developer-dark-mode/6935

https://blog.superhuman.com/why-do-people-use-dark-mode/

oliviertassinari commented 2 years ago

Another data point: https://twitter.com/MUI_hq/status/1528403016587657220, the source.

mbrookes commented 1 year ago

Two is the correct option, as dark mode has poor visibility in bright light. Please don't force this on users.

oliviertassinari commented 1 year ago

@mbrookes so you are proposing what https://framer.com / https://figma.com is doing. What they have implemented feels great.

I agree that we should eventually get there. VS Code supports light mode too. For the first 4 years I was programing, I was using a light theme in my IDE.

Regarding forcing dark mode, I'm personally not in the targeted audience of who this would benefit to make it flexible. I could code on VS Code in the beach this summer almost as if I was indoor 😁.

mbrookes commented 1 year ago

I agree that we should eventually get there.

Why "eventually"? I don't recall implementing it for the docs being particularly challenging.

I could code on VS Code in the beach this summer almost as if I was indoor

Perhaps with the latest generation MacBook Pro. Not everyone has one of those.

Janpot commented 1 year ago

I don't recall implementing it for the docs being particularly challenging

I agree with that, especially since atm, it seems we're starting out by just copying the theme from the docs and leaving all the light mode parts in.

bharatkashyap commented 1 year ago

Agreed - I've added a theme mode toggle here https://github.com/mui/mui-toolpad/pull/988#issuecomment-1274252594

mui / toolpad