Skip to content

Conversation

@siriwatknp
Copy link
Member

Issue

According to the docs, the code below should use @media (prefers-color-scheme: dark) for dark color scheme

const theme = createTheme({
  cssVariables: true,
  colorSchemes: { dark: true },
});

The colors are generated for both color schemes but the selector for dark palette is not using @media (prefers-color-scheme).

Fix

Set colorSchemes.light = true if no palette is provided. A test added.

@siriwatknp siriwatknp added type: bug It doesn't behave as expected. package: material-ui customization: theme Higher level theming customizability. labels Aug 28, 2024
@siriwatknp siriwatknp requested a review from DiegoAndai August 28, 2024 06:32
@siriwatknp siriwatknp force-pushed the fix/create-theme-vars branch from fc50e67 to 32aeb9b Compare August 28, 2024 06:33
@siriwatknp siriwatknp enabled auto-merge (squash) August 29, 2024 12:42
@mui-bot
Copy link

mui-bot commented Aug 29, 2024

Netlify deploy preview

https://deploy-preview-43493--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 14028b4

@siriwatknp siriwatknp merged commit 975ecbb into mui:master Aug 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

customization: theme Higher level theming customizability. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants