search

mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.58k stars 1.88k forks source link

Shadow on <Paper> component (and perhaps in general) does not work very well with dark mode with `withGlobalStyles` #866

Closed tanchevk closed 2 years ago

tanchevk commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

When enabling shadow on a component with dark mode enabled, the shadow isn't really a shadow and more of a scaled down darker version of the original Paper component. Examples: Dark mode: (brightness and exposure values edited for better visibility (Most noticable on the codesandbox when zoomed in) ) Screenshot 2022-02-19 220421 Light mode:

image

In which browser did the problem occur

Opera 83.0.4254.62 (replicated on Firefox 97 on MacOS Mojave via BrowserStack)

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/snowy-fire-7q9bjg?file=/src/App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

maybe filter: blur?

rtivital commented 2 years ago

That is intentional, dark theme uses the other way to indicate elevation – lighter color. I, personally, find shadows in dark theme inappropriate and ugly (see Twitter's dimmed theme) and not planning to change shadows behavior because of that.