Theme Switcher on SignIn Page

[aress31]

Summary

Incorporating a theme switcher to toggle between dark and light modes on the SignIn/SignUp pages might be beneficial.

Examples

No response

Motivation

Enhancing UI/UX by providing users with the option to select their preferred mode from these pages.

Search keywords: signinpage

[apedroferreira]

I have separated the ThemeSwitcher to its own separate component in #4340, but it's still under @toolpad/core/DashboardLayout.
If it makes sense to for this PR, we can make it its own separate component in @toolpad/core/ThemeSwitcher as part of it.

[Janpot]

I feel like I've never seen this in a sign in page. perhaps we should benchmark existing solutions?

[prakhargupta1]

I checked the UX of the following three websites and none of them have theme switcher on the sign-in page. It's part of the user's settings.

Notion sign-in page: Always shows light theme (even when my browser and Notion has the Dark theme enabled)
Slack: Same as above
Github sign-in page: Irrespective of my GitHub theme, it shows light/dark sign in page, based on my browser theme.

[SamuelLeapifai]

I'm also interested in this use case. If you won't implement it, can you at least advise what would be the recommended approach? ThemeSwitcher currently stores theme settings in context, so it needs AppProvider as a parent, right? Can I skip dashboard layout? I had som trouble getting this to work. My routes are configured that the AppProvider only renders for authenticated content. Public content (like login page) do not render it. If I add AppProvider on login page and the authenticated content shows a different instance of AppProvider, will this work? Will it use the same storage for theme?

[bharatkashyap]

I'm also interested in this use case. If you won't implement it, can you at least advise what would be the recommended approach? ThemeSwitcher currently stores theme settings in context, so it needs AppProvider as a parent, right? Can I skip dashboard layout? I had som trouble getting this to work. My routes are configured that the AppProvider only renders for authenticated content. Public content (like login page) do not render it. If I add AppProvider on login page and the authenticated content shows a different instance of AppProvider, will this work? Will it use the same storage for theme?

Pedro is best placed to answer this but he's out this week, I'll tag him here @apedroferreira so he can look at this next week and come back with a reply on what the most recommended way to do this could be

[apedroferreira]

I'm also interested in this use case. If you won't implement it, can you at least advise what would be the recommended approach? ThemeSwitcher currently stores theme settings in context, so it needs AppProvider as a parent, right? Can I skip dashboard layout? I had som trouble getting this to work. My routes are configured that the AppProvider only renders for authenticated content. Public content (like login page) do not render it. If I add AppProvider on login page and the authenticated content shows a different instance of AppProvider, will this work? Will it use the same storage for theme?

Hi, yes the new ThemeSwitcher component that you can import from @toolpad/core/DashboardLayout needs to be wrapped by an AppProvider. The dashboard layout isn't needed to wrap it.

Our recommended approach is that a single instance of AppProvider wraps the whole application, but I think that a separate AppProvider should probably work in this case, as it would be using the same storage.

You can also take a look at the custom theme switcher example here (https://mui.com/toolpad/core/react-dashboard-layout/#examples) if you want another alternative and your theme uses CSS variables like the default theme.