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.