[core] Add theme switcher to dashboard layout #3674

apedroferreira · 2024-06-12T17:14:13Z

Add theme switcher to DashboardLayout component header.

Screen.Recording.2024-07-03.at.08.38.16.mov

As decided below, the theme can be set as Theme | CssVarsTheme | { light: Theme, dark: Theme }; , and the switcher only shows if using both light and dark themes both for the CSS variables or the standard option.

Also moved all React contexts to shared/context while trying to deal with some circular dependency issues + trying not to export them with the package, but this might not have been necessary in the end. Let me know if you think we should organize that differently.

Documented theming + the switcher in the AppProvider and DashboardLayout docs, and tried to improve the documentation for both these components in general as it had been discussed:

Component Pages:

API Pages:

…out-theme-switcher

apedroferreira · 2024-06-13T18:28:15Z

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:

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.
Leave it as is and probably Pigment.css will provide a more elegant solution for this?

Janpot · 2024-06-13T19:48:34Z

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

…out-theme-switcher

… avoid these better

…out-theme-switcher

…e switcher inside docs

…out-theme-switcher

Janpot · 2024-07-16T16:18:31Z

docs/data/toolpad/core/components/app-provider/AppProviderTheme.js

+  pathname: PropTypes.string.isRequired,
+};
+
+const customTheme = createTheme({


Follow-up PR: Would it make sense to make this a CSS vars theme and provide custom dark and light color schemes? We do want to promote this method over the legacy theme.

We could do it, it's actually a small change so might include it in this PR.

Janpot · 2024-07-16T16:21:11Z

docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md

@@ -8,22 +8,35 @@ components: AppProvider, DashboardLayout

 <p class="description">The dashboard layout component provides a customizable out-of-the-box layout for a typical dashboard page.</p>

+The `DashboardLayout` component is a quick, easy way to provide a standard full-screen layout with a header and sidebar to any dashboard page, as well as ready-to-use and easy to customize navigation and branding.
+
+Many features of this component are configurable through the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) component that should wrap it.


To follow-up outside of this PR:
Would it make sense to provide all the available functionality that is read from the app provider as props as well? That way the suer has the choice to use with app provider and stand alone. If we let the props fall-back to the app provider contexts we have a way to offer following functionalities:

use with app provider

use standalone with the props

use with app provider but overwrite specific context

Yeah I was planning to do that next and then edit the docs accordingly, we can prioritize the props that are passed otherwise default to the app provider.

Janpot · 2024-07-16T16:24:43Z

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx

+        title: 'MUI',
+      }}
+      router={router}
+      theme={{ light: baseLightTheme, dark: baseDarkTheme }}


Do we need this property here? If we need it, I'd expect it to set the primary color to one that matches the logo.

I also don't think we should promote anything other than css vars themes. The only place where we mention or use legacy theme should be where we document specifically them.

You mean the theme property?
There's actually some conflict when using the CSS vars theme in the docs examples which is why I'm using theme={{ light: baseLightTheme, dark: baseDarkTheme }}... Maybe the variable names for the iframes can be given a different name or something and that will work, I'll check out what else we can do there.

You mean the theme property?

Yes, can't this demo just rely on the default theme?

It's using the default CSS variables theme now including in docs examples, but had to add a window prop to the AppProvider to be able to use the docs demo window instead of the whole page's.
Let me know if you think any alternative would be better and we can change it, even if in a separate PR.

Janpot · 2024-07-16T16:34:23Z

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx

+    // preview-start
+    <AppProvider
+      navigation={NAVIGATION}
+      branding={{


For a follow-up conversation:

Would it make sense to instead move these into the theme as custom tokens?

Janpot · 2024-07-16T16:40:54Z

docs/data/toolpad/core/components/app-provider/app-provider.md

+
+{{"demo": "AppProviderTheme.js", "height": 500, "iframe": true}}
+
+### Predefined themes


I'm not 100% sure about this. Isn't the predefined theme just the default MUI theme? I'm not sure providing different themes should be in the scope of @toolpad/core. Or is there a specific reason?

In any case, I think we need to exclusively promote css vars themes and leave the legacy functionality for when people bring their own existing theme.

Doesn't necessarily need to be in the scope, I just wanted to possibly provide some ready-to-use themes that will look good. And that default theme just has a few color changes to look a bit better, but I guess the default MUI theme should look decent enough.

To keep things simple let's keep themes outside the library then, and will recheck how the default MUI theme looks - if it looks good we can keep it as the default.

apedroferreira · 2024-07-18T21:48:28Z

TODO after this PR:

Bugs:

When using CSS vars theme in docs the docs initial theme is being changed if theme is changed in demos
AppBar styles throwing console error in Material UI v6 when loading page with dark theme

Docs:

Better looking light theme in app provider theme demo

Features:

Slightly unrelated: make DashboardLayout component optionally agnostic from AppProvider
Possible shim for color scheme hook ([core] Add theme switcher to dashboard layout #3674 (comment))

Janpot

Let's merge the current state and follow up on future PRs

…out-theme-switcher

apedroferreira · 2024-07-19T12:39:25Z

Merging, thanks!
Some bugs left to fix which are mentioned above.

Janpot · 2024-07-19T16:44:01Z

packages/create-toolpad-app/src/generateProject.ts

@@ -279,9 +194,9 @@ export default function generateProject(
      'react-dom': '^18',
      next: '^14',
      '@toolpad/core': 'latest',
-      '@mui/material': '^5',
+      '@mui/material': '^6',


@apedroferreira I believe this will broken, this version doesn't exist on npm.

Ok thanks for finding it, I'm working on bug fixes so will make sure the CLI and generated project work along with them.

For now I changed these ones to 'next' in #3807

Oh, didn't know you were releasing or might have checked more carefully. Thanks!

Add theme switcher

072423a

apedroferreira added the feature: Components Button, input, table, etc. label Jun 12, 2024

apedroferreira self-assigned this Jun 12, 2024

Merge remote-tracking branch 'upstream/master' into add-dashboard-lay…

1ef6319

…out-theme-switcher

Use CSS vars themes (in progress)

7e2f32a

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 19, 2024

apedroferreira added 2 commits June 25, 2024 16:31

Merge remote-tracking branch 'upstream/master' into add-dashboard-lay…

0322f9d

…out-theme-switcher

Fix remaining issues and warnings

b00118f

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 25, 2024

apedroferreira added 6 commits June 26, 2024 18:55

Hybrid theming solution but still has a mismatch in SSR

1d1c03f

Was facing weird problems with circular dependencies, restructured to…

a3d4e6f

… avoid these better

Finally found fix for dark theme console errors

16b3ac5

Adjustments

45f8500

Merge remote-tracking branch 'upstream/master' into add-dashboard-lay…

eae3fdf

…out-theme-switcher

Improve AppProvider docs in general

71d3f7f

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 28, 2024

apedroferreira added 2 commits July 1, 2024 19:05

Improve docs more, document theming, still need to fix theme and them…

42d208a

…e switcher inside docs

Add missing changes outside docs

9ab2a87

prakhargupta1 linked an issue Jul 2, 2024 that may be closed by this pull request

[DashboardLayout] Add theme palette mode switcher #3586

Closed

apedroferreira added 2 commits July 2, 2024 18:59

👍👍👍👍👍👍👍👍👍👍👍

3002ae7

Merge remote-tracking branch 'upstream/master' into add-dashboard-lay…

7209a12

…out-theme-switcher

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 2, 2024

apedroferreira added 6 commits July 2, 2024 20:08

Add theme example that doesn't crash

d80a4e0

Fix theme switching in docs demos

02a044e

Run docs formatter

e77313d

Add theme switcher unit test

1ac0a63

dedupe -.-

3445321

Conditional mock

47b4c12

Dedupes

f512ebb

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 12, 2024

Better ordering in theme example

b56f240

Janpot reviewed Jul 16, 2024

View reviewed changes

apedroferreira added 2 commits July 18, 2024 22:37

Suggestions so far

6d0556b

Adjust demos more

7994b5a

apedroferreira added 4 commits July 18, 2024 23:35

Fix tests in browser mode

d9b5e17

Fix headless test with CSS variables

ab10cf4

Update Toolpad Core to V6, update accordingly

6fe1368

Fix example

f4aa0a3

Janpot approved these changes Jul 19, 2024

View reviewed changes

apedroferreira added 3 commits July 19, 2024 12:20

Re-add types

41a64df

More updates to v6 except AppBar console error

297e858

Merge remote-tracking branch 'upstream/master' into add-dashboard-lay…

a336c06

…out-theme-switcher

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 19, 2024

apedroferreira added 4 commits July 19, 2024 12:52

Remove DataGrid and LineChart

6312d3a

Restore unneeded useLocalStorageState from toolpad/utils

8b19306

Don't change these files

3290982

Fix types

36fe9ae

apedroferreira changed the title ~~Add theme switcher to dashboard layout (Toolpad Core)~~ [core] Add theme switcher to dashboard layout Jul 19, 2024

apedroferreira merged commit 98b87ad into mui:master Jul 19, 2024
13 of 14 checks passed

apedroferreira deleted the add-dashboard-layout-theme-switcher branch July 19, 2024 12:40

Janpot reviewed Jul 19, 2024

View reviewed changes

apedroferreira mentioned this pull request Jul 19, 2024

[core] Fix theming bugs #3809

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Add theme switcher to dashboard layout #3674

[core] Add theme switcher to dashboard layout #3674

apedroferreira commented Jun 12, 2024 •

edited

Loading

apedroferreira commented Jun 13, 2024 •

edited

Loading

Janpot commented Jun 13, 2024 •

edited

Loading

Janpot Jul 16, 2024

apedroferreira Jul 16, 2024

Janpot Jul 16, 2024

apedroferreira Jul 16, 2024

Janpot Jul 16, 2024

apedroferreira Jul 16, 2024 •

edited

Loading

Janpot Jul 16, 2024

apedroferreira Jul 19, 2024 •

edited

Loading

Janpot Jul 16, 2024 •

edited

Loading

Janpot Jul 16, 2024

apedroferreira Jul 16, 2024 •

edited

Loading

apedroferreira commented Jul 18, 2024 •

edited

Loading

Janpot left a comment

apedroferreira commented Jul 19, 2024

Janpot Jul 19, 2024

apedroferreira Jul 19, 2024

Janpot Jul 19, 2024 •

edited

Loading

apedroferreira Jul 19, 2024


		{{"demo": "AppProviderTheme.js", "height": 500, "iframe": true}}

		### Predefined themes

[core] Add theme switcher to dashboard layout #3674

[core] Add theme switcher to dashboard layout #3674

Conversation

apedroferreira commented Jun 12, 2024 • edited Loading

apedroferreira commented Jun 13, 2024 • edited Loading

Janpot commented Jun 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apedroferreira Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apedroferreira Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

Janpot Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apedroferreira Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

apedroferreira commented Jul 18, 2024 • edited Loading

Janpot left a comment

Choose a reason for hiding this comment

apedroferreira commented Jul 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apedroferreira commented Jun 12, 2024 •

edited

Loading

apedroferreira commented Jun 13, 2024 •

edited

Loading

Janpot commented Jun 13, 2024 •

edited

Loading

apedroferreira Jul 16, 2024 •

edited

Loading

apedroferreira Jul 19, 2024 •

edited

Loading

Janpot Jul 16, 2024 •

edited

Loading

apedroferreira Jul 16, 2024 •

edited

Loading

apedroferreira commented Jul 18, 2024 •

edited

Loading

Janpot Jul 19, 2024 •

edited

Loading