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

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 🌎

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