mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.32k stars 32.12k forks source link

Cannot override default dark mode theme #43583

Closed George-Madeley closed 3 days ago

George-Madeley commented 1 week ago

Steps to reproduce

Stackblitz code recreation

Steps:

  1. Create a dark and light ColorSystemOptions objects with no custom colours or tags.
  2. Use 'colorSchemesincreateThemewhich points to both light and darkColorSystemOption` objects.
  3. Include a palette object in createTheme to override an options defined in both light and dark theme.

Current behavior

Using useTheme from "@mui/material" shows that the palette objects for both light and dark contains all of the color tags (i.e., primary, secondary, etc) but also a palette attribute as well. Its this palette attribute that points to the palettes provided in colorSchemes in createTheme. As a result, dark and light mode dont use the palettes provided in colorSchemes.

However, what is stranger is that light mode will use the fallback palette options defined in palette of createTheme but dark mode wont. Instead, dark mode will use its default values.

Expected behavior

Providing palettes to colorSchemes should override the default palette options and providing a palette to the palette attribute of createTheme should override all colours.

Using the code environment above, switching from light to dark mod3 changes the button colour from purple to blue when they should stay purple.

Context

I am creating a toggle which allows the user to use either light, dark, or system colour theme. Light mode uses by provided palette but dark mode wont despite it being provided.

Your environment

npx @mui/envinfo ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 22.7.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.86) npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.0.1 @mui/icons-material: ^5.16.6 => 5.16.7 @mui/material: ^6.0.1 => 6.0.1 @mui/private-theming: 6.0.1 @mui/styled-engine: 6.0.1 @mui/system: 6.0.1 @mui/types: 7.2.16 @mui/utils: 6.0.1 @types/react: ^18.3.3 => 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^4.9.5 => 4.9.5 ```

Search keywords: override default dark mode

siriwatknp commented 1 week ago

Thanks for reporting the issue, I believe that this is fixed in 6.0.2. Can you recheck again? here is what I have with the latest version https://stackblitz.com/edit/github-oehmr5-rbfekx?file=package.json,src%2Findex.tsx.

github-actions[bot] commented 3 days ago

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] We value your feedback @George-Madeley! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!