More controls for the theme switcher

[garryxiao]

Summary

Currently, the only way to hide the switcher I found is to disable the 'light' or 'dark' mode.
const demoTheme = extendTheme({ colorSchemes: { light: true, dark: false }, colorSchemeSelector: "class", breakpoints: { values: { xs: 0, sm: 600, md: 600, lg: 1200, xl: 1536 } } });
More than that, it should support to hide it by a more straightforward way, and also provide the possiblility to create the icon in some other places, not only a static existing icon there.

Examples

No response

Motivation

No response

Search keywords: switcher

[bharatkashyap]

Similar to #4151 - the proposal is to

1. Showcase the useColorScheme hook in a demo so users know how to build their own theme switcher
2. Add a slot for the theme switcher in the DashboardLayout so users can hide it

@apedroferreira

[apedroferreira]

Yep, a slot that will allow you to hide or override the theme switcher is already in the plans for the next release since #4151

Also will make it clearer that the ThemeSwitcher component can be imported and used, and not mark it as just an internal component anymore.

[aress31]

@apedroferreira would be good to be able to just pass slotProps to override the theme switcher to for example change the color to inherit rather than primary.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@garryxiao How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[apedroferreira]

Closed by #4340

@apedroferreira would be good to be able to just pass slotProps to override the theme switcher to for example change the color to inherit rather than primary.

The ThemeSwitcher is going to be in the toolbarActions slot from now on.
To change that color, maybe you can use the sx prop in DashboardLayout and target the icon buttons in the header/AppBar?

Or you can override the slot similarly to this example https://deploy-preview-4340--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#slots and target the theme switcher style there?
Maybe we could add an sx prop to the ThemeSwitcher component - it could be a new separate issue.

[aress31]

@apedroferreira Just a thought — it might be more intuitive to have a slotProps property on the DashboardLayout, similar to how it's implemented in the DataGrid. This would allow us to pass properties directly to subcomponents. For instance:

<DashboardLayout 
  slotProps={{ themeSwitcher: { sx: { color: 'inherit' } } }} 
/>

What do you think?

[apedroferreira]

@apedroferreira Just a thought — it might be more intuitive to have a slotProps property on the DashboardLayout, similar to how it's implemented in the DataGrid. This would allow us to pass properties directly to subcomponents. For instance:

<DashboardLayout 
  slotProps={{ themeSwitcher: { sx: { color: 'inherit' } } }} 
/>

What do you think?

Yes, good idea, we could probably create a nested slot for the default theme switcher (along with adding the sx prop I mentioned), will consider it!