Add theme switcher to dashboard layout (Toolpad Core)

[apedroferreira]

WIP

[apedroferreira]

There is an issue during SSR when using the dark mode in Next.js where the server can't read which mode it's supposed to use, so the app renders in light mode until the client-side sets the correct value for the dark mode.

From what I've tried/researched there's 2 possible solutions:

1. Use cookies to store the theme mode - will eventually work but it's complicated as it has to be done in different ways for the app router and the pages router. The app router needs to use a server component and the pages router an alternative solution - these can be difficult and a bit messy to integrate with the library.
2. Leave it as is and probably Pigment.css will provide a more elegant solution for this?

[Janpot]

3. We should be able to leverage css variables like we do on the docs homepage.

What if we do?

interface AppProviderProps {
  theme?: Theme | CssVarsTheme | { light: Theme, dark: Theme }; 
  // ...
}

We show the switcher when

• { light: Theme, dark: Theme }
• CssVarsTheme AND colorSchemes.light AND colorSchemes.dark are set
• default theme = CssVarsTheme with both color schemes

Otherwise no theme switcher

[apedroferreira]

All good in functionality, just missing documentation now.