[website] Add an option for the theme toggle to follow the system settings

[moheyt]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

The current implementation of the theme change toggle in our application does not align with the expected behavior of modern user interfaces. This issue proposes a modification to the toggle, so it defaults to the system settings, enhancing user experience and usability. The current behavior of the theme change toggle in our application forces users to manually adjust the theme settings, even when they prefer to follow the system-wide theme settings on their device. This approach may lead to inconsistency between the application's appearance and the rest of the user's system, causing undesirable user experience and discomfort.

Examples 🌈

https://github.com/mui/material-ui/assets/85775976/d84289bd-762a-45f1-b436-240b4f413ccc

Motivation 🔦

To address this issue, I suggest modifying the theme change toggle in the application to default to the system settings. This means that when a user opens the application for the first time, the theme settings should automatically align with the system-wide theme settings. Users can still have the option to customize the theme within the application, but the default setting should prioritize system-wide consistency.

Benefits:

1. Improved User Experience: Users will feel more at home within the application since it respects their system-wide theme preferences.
2. Consistency: The modification will reduce visual disparities between the application and the rest of the device, resulting in a more seamless user experience.
3. Accessibility: The application will be more accessible and user-friendly by default, as it will follow accessibility settings configured at the system level.

i would like to take this issue. #hactoberfest

[harsh0728]

Yes, I can do this. Please assign this to me. I want to contribute.

[danilo-leal]

Hey there @moheyt; thanks for opening this issue up + adding a thorough description. 🙏 This feature (i.e., theme following the system settings) is already implemented. Try opening the website/docs on an incognito window and see it adhere to the theme you're using on your device.

However, we indeed don't expose the "System" option on the website toggle. But we do on the documentation (if you click on the settings icon on the top far right, you'll see it). I don't have super strong opinions about adding it; we definitely could. But although it's a common pattern, I'm not fully sure it's worth it... Folks wanting it to follow the system should just do nothing. If you want to make a conscious decision later on (i.e., the website/docs not following your system settings), it's just a click away instead of two (like in the docs, where you need to click to open the drawer and then select your wanted option).

[moheyt]

Hey @danilo-leal, you didn't get my point. I don't know how the default system theme setting is working right now because it wasn't working yesterday, as you can see in the video I attached with the issue summary.

[mj12albert]

I don't know how the default system theme setting is working right now because it wasn't working yesterday

I can't reproduce it now, maybe it was a one-off browser issue (e.g. a different setting was cached from before)

[danilo-leal]

Thanks for clarifying @moheyt! But yeah, I thought the same as @mj12albert — mind trying this out on an incognito window to see if the system settings are not respected?

[danilo-leal]

I'm closing this issue for now, as there hasn't been any further development on the conversation! Let us know otherwise. 👍