[Dark Theme] Using Dark Theme when theme is in a separate file?

[ozgurbaserdem]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am not sure if this should be labeled as a bug, since it could just be my organizations use of MUI Theme that is weird and I can't find a proper guide in the theming & dark theme docs for our case.

Currently, we have a theme set up in a seperate file, where we export it from, and then send it into our theme provider. In all examples on dark theme usage in the docs (https://mui.com/material-ui/customization/dark-mode/) the examples show the theme and app being in the same file which allows you to toggle between dark and light mode. Is it a work around for our case, or do we need to re-work the way we set up our themes from scratch?

Context: We're a component library theme for an organization and have multiple micro front end teams that use our components and would like to implement dark mode in the near future.

Our greenTheme.tsx file, in this file we import and spread in styles form { standardTheme } which is where we style components accordingly to our design. For instance we override the styles of mui button there by using (pseudocode) MuiButton { styleOverrides: root { OurStylingHere } }

Then we have our ThemeProvider which we use this way as seen in the screenshot, this is only our Storybook example, but basically our front end teams import and render the ThemeProvider and the greenTheme in their root as shown in our Storybook example here.

What would be the best approach to handle dark mode in our case?

Thanks in advance, and any input if anyone has built their themes in separate files and solved the dark mode functionality would be appreciated.

Expected behavior 🤔

No response

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[siriwatknp]

Before I propose any suggestion, would you mind sharing what's in the standardThemeOptions?

[ozgurbaserdem]

Before I propose any suggestion, would you mind sharing what's in the standardThemeOptions?

Hey! Thanks for the reply.

Honestly, the standardThemeOptions is just redundant in the case above. it contains all our styling for each component. I didn't find a solution so I decided to move our themes inside the ThemeProvider component for the time being, but I would love your ideas on how it could be solved without having the themes inside the ThemeProvider.

I will send you a link of our code, but keep in mind that it is really a lot of styling so it will be 1000+ lines of code. I think that the only things you need to consider however is:

1. the getDesignTokens function @ line 255
2. the create privateTheme @ line 412
3. the standardThemeOptions theme @ line 415
4. the greenTheme declaration @ line 1527

the getDesignTokens are used to declare different colors and hover effects for each color, we then use that to create privateTheme which we spread into the rest of our styling in standardThemeOptions so we can use privateTheme.palette.COLORNAME?.main or privateTheme.palette.COLORNAME?.hover inside the standardThemeOptions when all the styling is done we then create the "greenTheme" based of that which we pass into the ThemeProvider.

Please don't mind the terrible variable names, lol. They will be changed.

Edit: Of course I forgot to paste the link :) Here it comes: https://codepen.io/Oz90/pen/bGMqwwJ

[Bobby-Anggunawan]

I follow this page to implement dark mode in a separate file. It worked for a few months but then I updated all my dependencies. After that every time I click the switch to change the mode, my web froze😥

[siriwatknp]

I follow this page to implement dark mode in a separate file. It worked for a few months but then I updated all my dependencies. After that every time I click the switch to change the mode, my web froze😥

Can you share your repository or a CodeSandbox? I am happy to look into it.

[alejandrocortes3112]

Hello @ozgurbaserdem, I'm having the same issue and my file structure is similar to yours. Did you ever find a solution for this other than moving the theme inside your ThemeProvider component?. Thank you!