Built-in elevation CSS classes

Add-ons UIs
1

Hi, does anyone have a solution for this problem? When using the built-in elevation CSS classes on a white or lighter background, they work fine, but when switching to a dark theme, they become invisible.

What can be done to make these visible on the dark theme?

  • elevation-5
  • elevation-hover-10
  • elevation-pressed-1

Thanks in advance!

2

This is a known issue with the f7 elevation classes. They define the box-shadow css style with only a black shadow (e.g., rgba (0, 0, 0, 0.2)). So, on light themes that’s a great shadow but on a black background it does almost nothing.

If you want the box shadow to change color with the theme, you’re going to have to manipulate the f7 css variable that corresponds to the elevation number (e.g., --f7-elevation-5) manually.

In the style object of the component you want to modify (or just the top component of any widget) you’ll want to add something like this:

style:
  --f7-elevation-5: =(themeOptions.dark == 'dark')?('0px 6px 7px -4px rgba(255,255, 255, 0.2), 0px 11px 15px 1px rgba(255, 255, 255, 0.14)'):('0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14)')

The complete definition of the f7 elevation variables is here: