Theme variables for shadow and spread

[agneevX]

There's shadow visible in light themes, but with dark themes these shadows are not legible.

Please expose variables to set the color of this shadow and the spread upon hover.

You can use ha-card-box-shadow if that's helpful.

[bokub]

Sorry but this is really too specific. I don't want this card to have a thousand configuration options, because:

• It would be a mess to maintain
• The documentation would be impossible to read

However, you can:

• download this card
• Edit the code
• Use your edited card it in your own Home Assistant setup

[agneevX]

It's not about options, it's about the fact that the shadows are only visible in light themes, not dark themes.

[bokub]

Please expose variables

You mean CSS variables?

[agneevX]

Yep, that's what I meant by "theme variables" :)

[agneevX]

This is what I'm referring to FYI.

[raffertyp1]

I came here looking for a way to hide the box shadows. I haven't been able to successfully hide them with card-mod. While I'd be glad to see a configuration option or even theme variables, can you offer any guidance on how to hide them through CSS styling?

[agneevX]

Good question. Please check my setup repo.

[steviehs]

Hmm... how do I get this nice slider right from Desk Light?

[agneevX]

Hmm... how do I get this nice slider right from Desk Light?

Please check my setup repo.

[bokub]

@steviehs You can use the slider-entity-row card like this:

type: entities
show_header_toggle: false
entities:
  - entity: light.example
    toggle: true
    type: 'custom:slider-entity-row' # <====== Add this line
  - type: 'custom:rgb-light-card'
    entity: light.example
    colors:
      - ...

[steviehs]

Thanks, I guess I have to learn a lot to get this all look and work nicely :-)

[bokub]

Hello @agneevX , I might have some free time to work on this, but first I have a question:

How do you plan to "customize" these CSS variables ?

[agneevX]

I'd say setting the ability to set the box-shadow would be how I'd want to customize it.

[bokub]

OK, but let's say I use a CSS variable containing the box-shadow, how would you change it?

Could you provide an example maybe?

[agneevX]

Just box-shadow perhaps?

type: entities
entities:
  - type: 'custom:rgb-light-card'
    entity: light.example_light
    box-shadow: "0px 0px 5px 0px rgba(0,0,0,0.62)"
    colors:
      - rgb_color:
        - 255
        - 127
        - 255
        brightness: 220
        transition: 1

[bokub]

OK, so what you have in mind is a new option, not just a CSS variable that you can edit...

I told you I didn't want "have a thousand configuration options", and you told me "it's not about options", and asked me to "expose variables" instead, so I'm a little bit confused.

[bokub]

So no, I won't add a new option just for this, but there is another alternative that you should consider:

• Install Lovelace Card Mod
• Add a card_mod key in the bottom of the card configuration
• Customize the card exactly like you want using CSS!

For example, here is what I can do with the following YAML code:

type: entities
show_header_toggle: false
entities:
  - entity: light.example
  - type: 'custom:rgb-light-card'
    entity: light.example
    colors:
      - rgb_color:
          - 234
          - 136
          - 140
      - rgb_color:
          - 251
          - 180
          - 139
      - rgb_color:
          - 136
          - 198
          - 237
      - rgb_color:
          - 140
          - 231
          - 185
    card_mod:
      style: |
        .color-circle {
          box-shadow: 4px 4px 4px 0px rgba(255,255,0,0.6);
        }

I hope it solves your problem!

[agneevX]

I told you I didn't want "have a thousand configuration options", and you told me "it's not about options", and asked me to "expose variables" instead, so I'm a little bit confused.

TBT, I did not look at the comments I made more than a year ago.

That said, I do use card-mod and I was looking for something of that sort. My dev tools skills aren't that great, so I was not able to figure the property out when I looked into it, that far back.

I think the issue can be closed. Thanks!

[bokub]

Yeah, sorry about the delay

Glad you could make it work! :+1: