CSS Help

[hilburn]

Is there a nice way to pull in theme variables for stroke/fill? I'm trying to tie my floorplan in and match light/dark mode

[exetico]

What have you tried?

CSS variables should work for fills. Just use normal CSS like fill:var(--var-name-here);

[hilburn]

ah, maybe that was my error - I used fill:var(rgba(--var-name)); - will give it a go without the rgba wrapper

[hilburn]

yup, that fixed it, sorry for the dumb question - css is quite new for me

[exetico]

Mistake happens 😁

A friendly input: Next time, think about the XY Problem.

It sounds like you already had some kind of code in hand, but didn't provide it (at least that's how I understand it, now you provided a line of CSS code). By providing more context and your actual problem, it would have been more easy to help you out, in the first place. With that said: Here it was not complicated to answer in the first place, but it could have required more time 😁.

[hilburn]

when it comes to CSS i'm very much in the "poke at it until it works or i get frustrated enough to ask for help" phase - and getting rgb/var the wrong way round was just dumb enough for me to miss it

As I've got you here, would you mind looked at a weird issue I've got with floorplan - it might just be a misunderstanding of the architecture or something on my part.

Basic setup: long click on room to open climate control honeycomb menu - HCM buttons just activate a script that handles the actual set preset/temperature change parts of it - but requires the entity_id of the climate to operate on which can be obtained from the element.id (e.g. room.kitchen -> climate.kitchen) - again handled by the script. This worked well in initial testing where i was just passing in a static room.living_room but when integrating it into the floorplan with multiple elements, I'm finding that the ${element.id} js (which works elsewhere in my floorplan in service_data) is just returning the literal "${element.id}"

Relevant bit of the configuration:

- name: rooms
  elements:
    - room.spare_bedroom
    - room.bedroom
    - room.office
    - room.kitchen
    - room.living_room
  hover_action: false
  hold_action:
    action: call-service
    service: honeycomb
    service_data:
      variables: 
        climate_id: ${element.id}
      buttons:
        - icon: mdi:thermometer-chevron-down
          color_type: icon
          color: rgb(var(--token-rgb-blue))
          active: true
          position: 0
          autoclose: false
          tap_action:
            action: call-service
            service: script.floorplan_honeycomb_handler
            service_data:
              entity: '[[[ return variables.climate_id ]]]'
              temperature: -1
         ...

[exetico]

Please submit a new discussion related to this, if below isn't enough, and provide a minimal example, where I'm able to reproduce it. 😄

You'll also find a few other discussion related to the ${} logics and entity parsing. Same goes for using a js script directly with class: '${something}' vs. below

class: |
 > return something

I'd also like to point out that I introduced the new "execute" option a few months ago, which nomally would help you, if you're primar focusing on reusing scripts and calling ha-floorplan related functions:
https://experiencelovelace.github.io/ha-floorplan/docs/usage/#using-execute-with-action