Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[joy-ui][Circular/Linear Progress] soft (default) variant is hard to see in dark mode #41491

Open
mazstars opened this issue Mar 14, 2024 · 1 comment
Assignees
Labels
component: progress This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer package: joy-ui Specific to @mui/joy

Comments

@mazstars
Copy link

mazstars commented Mar 14, 2024

Steps to reproduce

Link to live example: (required)
https://mui.com/joy-ui/react-circular-progress/
https://mui.com/joy-ui/react-linear-progress/
Please switch to dark mode
Steps:

  1. Circular progress or linear progress
  2. Soft variant (default setting)
  3. dark mode

Current behavior

The track is nearly invisible, and the moving blue progress is too dark.
图片
图片
图片

It becomes even worse if it is shown on a modal:
图片

Expected behavior

Previously I used 5.0.0-alpha.84 and the color was easier to identify.
图片

Not sure if this change is intended.

Context

No response

Your environment

No response

Search keywords: joy-ui progress soft dark

@mazstars mazstars added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 14, 2024
@zannager zannager added component: CircularProgress The React component component: LinearProgress The React component. package: joy-ui Specific to @mui/joy component: progress This is the name of the generic UI component, not the React module! labels Mar 14, 2024
@danilo-leal
Copy link
Contributor

Hey, there @mazstars; thanks for opening this issue! There's definitely room to improve aspects of Joy UI's colors. I'd recommend fixing it locally on the component in your app for now, given that the color the progress-related components use is shared across all of them, and touching on this is out of priority for us at the moment (as the team is focused on Material UI's v6). I'll keep the issue open, though, and we'll circle back when possible!

@danilo-leal danilo-leal added design This is about UI or UX design, please involve a designer and removed component: CircularProgress The React component component: LinearProgress The React component. status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: progress This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer package: joy-ui Specific to @mui/joy
Projects
None yet
Development

No branches or pull requests

4 participants