tailwindcss-elevation icon indicating copy to clipboard operation
tailwindcss-elevation copied to clipboard

Dark/light mode should have a color overlay on background to match material elevation

Open 0xakihiko opened this issue 1 year ago • 2 comments

Great plugin.

I would like to suggest a color overlay that more closely match the material design, which is to add an overlay that makes the background brighter or darker as the elevation increases based on the variant.

Seen here: https://m3.material.io/styles/elevation/overview One thing to note is that while it's not listed here, it is my understanding that in material 2 this would result in a lighter overlay for dark modes.

0xakihiko avatar Apr 15 '23 06:04 0xakihiko

Thank you writing the issue! I'm gonna look into this more in a couple of weeks. Just to be clear, the two issues are:

  1. Unlike M2, M3 doesn't apply shadows by default to all levels of elevation and instead uses color to achieve the elevation effect.
  2. Even when using shadows (the M2 way), the plugin needs to support different box shadows when switching between dark and light modes.

jonaskay avatar Apr 26 '23 06:04 jonaskay

Yep, that's correct.

M3 can still apply shadow(although, optional), but it's to differentiate elevations if they have similar color (I believe?).

0xakihiko avatar May 03 '23 09:05 0xakihiko