Disable dark shadows in UMD mode

[lianee]

What happened?

The new 'dark' shadows look more like a lighting behind elements than a real shadow and is a strong visual change. While I understand and appreciate a special kind of shadow in dark mode, I'd like to adapt it to my personal taste.

What did you expect to happen?

A way to revert it

Reproduction URL

https://jsfiddle.net/q2drzm45/4/

How to reproduce?

upgrade to 2.11

Flavour

UMD

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

I can easily revert it in cli app like that:

$separator-dark-color: rgba(0, 0, 0, 0.12);
$dark-shadow-color: #000;
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);

Unfortunately, I haven't been able to do the same in UMD mode with the config object. Dark shadows are not using css vars.

[agroebe]

My $0.02 would be that the feature should just be reverted entirely. I think these shadows are desirable on light mode backgrounds for more contrast, and I'm glad that this was the default. But I don't think they belong in dark mode and they look horrible in my opinion. I had to go through and manually add flat to all affected components, which removed the desirable contrast in light mode that I talked about.

If not, might be good to have an "officially documented" way to disable this feature, so the community doesn't need to monkeypatch a solution together to make their app look the same it did previously.

Either way, +1 on the opinion that the visual change is way too strong to be a "default" behavior.

[exninja]

@agroebe The workaround I put into my apps so the new shadow is ignored in dark mode only.

:flat="$q.dark.isActive"

[piperone]

I'm glad to find others of this opinion. I just updated one of my projects to the latest version and immediately noticed the white'ish gradient box-shadow behind dropdowns, dialogs, etc. Given this box-shadow change and the new docs-site, it looks like someone on the Quasar-team must be really fond of 2010-vintage style box-shadows.

I echo @agroebe's sentiment; the white box-shadow in dark mode should be reverted.

[RobsonMi]

I agree these new shadows look terrible and should be reverted! Right now instead of providing updates to users I must search a workaround to remove them completely. What design decision is that to add bright, cheap looking, 2000's glow to dark theme?!

[lianee]

I made a codepen to change the color of the shadows using CSS variables: https://codepen.io/liane_/pen/JjaQZVw Unfortunately, due to the limitations of CSS, the format used for the color is awkward (0,0,0), that's why I didn't propose a Pull Request. I also found that the shadows in the dark version, if they are black (as I prefer), lack a little presence, so I added an optional multiplier (--q-dark-shadow-opacity). Personally, I find that these Dark shadows look better with this multiplier set to 2

[Flamenco]

To remove box shadows in dark mode, I updated the CSS for components instead of changing the attribute to flat.

For example

.q-card.q-dark {
  border: 1px solid #fff3;
  box-shadow: none;
}

This, along with changing the default heading font sizes to sane values, is in every Quasar project I manage.

[eliaspanagiotidis]

Neither Material 2 nor Material 3 accommodate light shadows in dark mode. Instead, they both advocate for the retention of darker shadows, particularly when an elevated element is superimposed on other elements. Furthermore, the updated standard prescribes fewer elevation levels and employs lighter backgrounds to distinguish between them in dark mode. In my view, it would be more beneficial for Quasar to adhere to these standards rather than implementing solutions based on personal opinions.