Dark mode for mixins

[nicolasfripp]

Summary

if we want to customize the light/dark palette we can do somehthing like this:

 const theme = createTheme({
  ...otherOptions,
  colorSchemes: {
    light: {
      palette: lightPalette,
    },
    dark: {
      palette: darkPalette,
    },
  },
});

Then, if we do theme.palette.something.main the color is displayed depending on the mode.

It would be great if this also works for the mixins. That means if we use theme.mixins.something, it should adapt based on the mode (light or dark), instead of using theme.applyStyles for when we want to customize certain styles.

Examples

I expect something like this:

 const theme = createTheme({
  ...otherOptions,
  colorSchemes: {
    light: {
      palette: lightPalette,
      mixins: lightMixins,
    },
    dark: {
      palette: darkPalette,
      mixins: darkMixins,
    },
  },
});

Motivation

I want to avoid using too many theme.applyStyles to show one mixin or the other , depending on if we are using light or dark mode.

Search keywords: Dark mode mixins palette

[siriwatknp]

Thanks for the feedback but that's not the recommended way to create styles. Ideally, theme should be about tokens and styles specific to a component. In long term, mixins won't scale because your theme will get bigger and bigger.

If you want to share styles, it's better to create new components because you will get the benefit of tree shaking from the bundler when the component is not used.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@nicolasfripp How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.