search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
782 stars 38 forks source link

Color mode is not respected when using theme arg in sx prop #202

Open corydeppen opened 2 months ago

corydeppen commented 2 months ago

Steps to reproduce

  1. Enable dark mode on your system.
  2. Review the div and Box blocks in the example application.

Current behavior

While using the theme arg inside the sx prop, I've noticed the generated color values don't appear to respect the color mode when referencing a property from the palette (e.g. theme.palette.background.default) and seem to use the light mode values even when dark mode is the active OS preference.

Additionally, the theme arg is typed as any when using a layout component but not when using a native element.

Expected behavior

The color mode should be referenced when generating values from the palette using the theme arg in the sx prop.

The theme arg inside the sx prop should be typed appropriately regardless of the type of element it's used on.

Context

No response

Your environment

npx @mui/envinfo ``` System: OS: Linux 5.0 undefined Binaries: Node: 18.20.3 - /usr/local/bin/node npm: 10.2.3 - /usr/local/bin/npm pnpm: 8.15.6 - /usr/local/bin/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.13.0 @emotion/styled: 11.13.0 @mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d @mui/icons-material: 6.0.0-beta.5 => 6.0.0-beta.5 @mui/material: 6.0.0-beta.5 => 6.0.0-beta.5 @mui/material-pigment-css: 6.0.0-beta.5 => 6.0.0-beta.5 @mui/private-theming: 6.0.0-beta.5 @mui/styled-engine: 6.0.0-beta.5 @mui/system: 6.0.0-beta.5 @mui/types: 7.2.15 @mui/utils: 6.0.0-beta.5 @types/react: ^18.2.47 => 18.3.3 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 ```

Search keywords: sx theme color mode palette

corydeppen commented 2 months ago

I was trying to understand how this could work using generated static values instead of CSS variables for the colors until I saw the difference between theme and theme.vars in the using theme variables section. I changed from e.g. theme.palette.primary.light to theme.vars.palette.primary.light and the colors updated as expected when the color mode changed.

I'm still seeing theme typed as any in the sx prop of layout components imported from @mui/material-pigment-css, even though it's typed as Theme for components imported from @mui/material. If you can validate that and prefer a separate issue, please let me know and I'll submit a new one.