[JS+Editor Module] Conditional background color (deprecated)

[andarotajo]

Conditional background color

Version: v1.2
Creator: andarotajo

Warning

I've decided to split this module into multiple ones that are dedicated to each card type, so I'll not provide any updates for this one. This discussion will probably be closed after I've put out some of the individual modules. Thank you for all the testing and feedback so far, it will come in very handy with the new modules :) Links to the new individual modules:

• Conditional state button coloring
• Conditional text button coloring
• Conditional slider button coloring
• Conditional switch button coloring

Important

Supported cards:

• Button
• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select

Unsupported cards:

• Calendar
• Separator

This module allows you to change the background color (and optionally opacity) of a card and/or icon based on one or more conditions. Generally, it has the following features:

• Define a default background color and opacity for the card
• Define a default background color and opacity for the icon
• Define conditions using the default Home Assistant selector
• Configure multiple combinations of background color + opacity and conditions (YAML only)
• Option to use one of three modes for every background color:
  • Preset Color: Uses a predefined color from the Home Assistant theme.
  • Color Wheel: Allows you to select a color using a color wheel.
  • CSS Variable: Uses a custom CSS variable to set the background color.

Conditions:
Conditions are configurable via the default selector of Home Assistant, allowing for the conditions you're already used to. The configurable default background colors and opacities for the card and icon are applied when no conditions match or if an element could not be modified due to an error or invalid configuration.

It's possible to set up multiple color/condition pairs by copying the "conditional_background_1" block and incrementing the number. Though the name doesn't have to end with a number since the code looks for "conditional_background_", it is recommended to do so for clarity.

Disclaimer:
This is my first module so I'm happy to receive feedback on the code etc. I couldn't test it for climate/cover too much as I don't have those entities but they should work from what I've seen. If not, I'll update it to mark them unsupported.

Configure this module via the editor or in YAML, for example:

rmn_conditional_background_color:
  default_card_background:
    color_variable: "--token-rgb-yellow-green"
    color_mode: variable
    opacity: 50

  default_icon_background:
    color_preset: red
    color_mode: preset
    opacity: 100

  conditional_background_1:
    card_background:
      color_variable: "--token-rgb-orange"
      color_mode: variable
      opacity: 50
    conditions:
      - condition: numeric_state
        entity_id: sensor.robot_vacuum_sensor_time_left
        below: 10

  conditional_background_2:
    card_background:
      color_variable: "--token-rgb-tomato"
      color_mode: variable
      opacity: 50
    conditions:
      - condition: numeric_state
        entity_id: sensor.robot_vacuum_sensor_time_left
        below: 2

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

rmn_conditional_background_color:
  name: "Conditional Background Color"
  creator: "andarotajo"
  version: "v1.2"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1636"

  supported:
    - "button"
    - "climate"
    - "cover"
    - "horizontal-buttons-stack"
    - "media-player"
    - "pop-up"
    - "select"

  unsupported:
    - "calendar"
    - "separator"

  description: >-
    This module allows you to change the background color (and optionally opacity) of a card and/or icon based on one or more conditions.

    The background colors for the different elements can be changed based on three different modes:
    - Preset Color: Uses a predefined color from the Home Assistant theme.
    - Color Wheel: Allows you to select a color using a color wheel.
    - CSS Variable: Uses a custom CSS variable to set the background color.

    Conditions are configurable via the default selector of Home Assistant, allowing for the conditions you're already used to. The configurable default background colors and opacities for the card and icon are applied when no conditions match or if an element could not be modified due to an error or invalid configuration.

    It's possible to set up multiple color/condition pairs by copying the "conditional_background_1" block and incrementing the number. Though the name doesn't have to end with a number since the code looks for "conditional_background_", it is recommended to do so for clarity.

  code: |-
    ${(() => {
      /**
      * ======== HELPER FUNCTIONS =========
      */

      function getCardElement() {
        return card.querySelector(".bubble-background");
      };

      function getIconElement() {
        return card.querySelector(".bubble-icon-container");
      };

      function getOpacity(config) {
        return config?.opacity;
      };

      function getBackgroundColor(config) {
        const colorMode = config?.color_mode;
        var color = null;

        if (colorMode === "preset" && config?.color_preset) {
          color = `var(--${config.color_preset}-color)`;
        } else if (colorMode === "wheel" && config?.color_wheel) {
          color = config.color_wheel;
        } else if (colorMode === "variable" && config?.color_variable) {
          var colorVar = config.color_variable;
          color = `rgb(var(${colorVar}))`;
        }

        return color;
      };

      function setBackgroundColorAndOpacity(element, color, opacity) {
        if (!element || !color || !opacity) {
          return;
        }

        element.style.setProperty("background-color", color);
        element.style.setProperty("opacity", `${opacity}%`);
      }

      function revertToDefaults(element, defaultColor, defaultOpacity) {
        if (defaultColor && defaultOpacity) {
          setBackgroundColorAndOpacity(element, defaultColor, defaultOpacity);
        } else {
          element?.style.removeProperty("background-color");
          element?.style.removeProperty("opacity");
        }
      }

      /**
      * ======== MAIN MODULE CODE =========
      */

      // Retrieve the base configuration
      const config = this.config.rmn_conditional_background_color || [];

      // Prepare user-defined default values for card and icon
      const defaultCardColor = getBackgroundColor(config.default_card_background);
      const defaultCardOpacity = getOpacity(config.default_card_background);
      const defaultIconColor = getBackgroundColor(config.default_icon_background);
      const defaultIconOpacity = getOpacity(config.default_icon_background);

      // This will be used to set the background color and opacity to the default 
      // color if no conditions matched or the loop didn't result in anything being
      // set. In case the defaults were not set, the style will be removed
      var cardStyleModified = false;
      var iconStyleModified = false;

      for (const [key, subConfig] of Object.entries(config)) {
        // Skip irrelevant config entries
        if (!key.startsWith("conditional_background_")) {
          continue;
        }

        // Skip if no conditions match
        const conditions = subConfig?.conditions;
        if (!conditions || !checkConditionsMet([].concat(conditions), hass)) {
          continue;
        }
        
        // Set the background color and opacity for the card
        var cardElement = getCardElement();
        var cardColor = getBackgroundColor(subConfig.card_background);
        var cardOpacity = getOpacity(subConfig.card_background) || 100;
        if (cardElement && cardColor && cardOpacity) {
          setBackgroundColorAndOpacity(cardElement, cardColor, cardOpacity);
          cardStyleModified = true;
        }
        
        // Set the background color and opacity for the icon
        var iconElement = getIconElement();
        var iconColor = getBackgroundColor(subConfig.icon_background);
        var iconOpacity = getOpacity(subConfig.icon_background) || 100;
        if (iconElement && iconColor && iconOpacity) {
          setBackgroundColorAndOpacity(iconElement, iconColor, iconOpacity);
          iconStyleModified = true;
        }

        break;
      }

      // Logic here is to revert to the default color and opacity if the
      // user-defined styles could not be applied. Removing the styles is the
      // last fallback to avoid any lingering modifications
      if (cardStyleModified === false) {
        revertToDefaults(getCardElement(), defaultCardColor, defaultCardOpacity);
      }

      if (iconStyleModified === false) {
        revertToDefaults(getIconElement(), defaultIconColor, defaultIconOpacity);
      }
    })()}

  editor:
    - name: "default_card_background"
      type: "expandable"
      title: "Default card background color"
      icon: "mdi:form-select"
      expanded: false
      schema:
        - name: "color_mode"
          label: "Color mode"
          required: true
          selector:
            select:
              multiple: false
              custom_value: false
              mode: "dropdown"
              options:
                - value: "preset"
                  label: "Preset color"
                - value: "wheel"
                  label: "Color wheel"
                - value: "variable"
                  label: "CSS variable"

        - name: "color_preset"
          label: "Preset color"
          required: false
          selector:
            ui_color:
              include_none: true
              include_state: true

        - name: "color_wheel"
          label: "Color wheel"
          required: false
          selector:
            text:
              type: "color"

        - name: "color_variable"
          label: "CSS variable"
          required: false
          selector:
            text:
              multiline: false
              type: "text"

        - name: "opacity"
          label: "Opacity"
          required: false
          default: 100
          selector:
            number:
              min: 0
              max: 100
              mode: "slider"
              unit_of_measurement: "%"
              step: 10

    - name: "default_icon_background"
      type: "expandable"
      title: "Default icon background color"
      icon: "mdi:form-select"
      expanded: false
      schema:
        - name: "color_mode"
          label: "Color mode"
          required: true
          selector:
            select:
              multiple: false
              custom_value: false
              mode: "dropdown"
              options:
                - value: "preset"
                  label: "Preset color"
                - value: "wheel"
                  label: "Color wheel"
                - value: "variable"
                  label: "CSS variable"

        - name: "color_preset"
          label: "Preset color"
          required: false
          selector:
            ui_color:
              include_none: true
              include_state: true

        - name: "color_wheel"
          label: "Color wheel"
          required: false
          selector:
            text:
              type: "color"

        - name: "color_variable"
          label: "CSS variable"
          required: false
          selector:
            text:
              multiline: false
              type: "text"

        - name: "opacity"
          label: "Opacity"
          required: false
          default: 100
          selector:
            number:
              min: 0
              max: 100
              mode: "slider"
              unit_of_measurement: "%"
              step: 10

    - name: "conditional_background_1"
      type: "expandable"
      title: "Conditional background color"
      icon: "mdi:palette"
      expanded: true
      schema:
        - name: "card_background"
          type: "expandable"
          title: "Card background color"
          expanded: false
          schema:
            - name: "color_mode"
              label: "Color mode"
              required: true
              selector:
                select:
                  multiple: false
                  custom_value: false
                  mode: "dropdown"
                  options:
                    - value: "preset"
                      label: "Preset color"
                    - value: "wheel"
                      label: "Color wheel"
                    - value: "variable"
                      label: "CSS variable"

            - name: "color_preset"
              label: "Preset color"
              required: false
              selector:
                ui_color:
                  include_none: true
                  include_state: true

            - name: "color_wheel"
              label: "Color wheel"
              required: false
              selector:
                text:
                  type: "color"

            - name: "color_variable"
              label: "CSS variable"
              required: false
              selector:
                text:
                  multiline: false
                  type: "text"

            - name: "opacity"
              label: "Opacity"
              required: false
              default: 100
              selector:
                number:
                  min: 0
                  max: 100
                  mode: "slider"
                  unit_of_measurement: "%"
                  step: 10

        - name: "icon_background"
          type: "expandable"
          title: "Icon background color"
          expanded: false
          schema:
            - name: "color_mode"
              label: "Color mode"
              required: true
              selector:
                select:
                  multiple: false
                  custom_value: false
                  mode: "dropdown"
                  options:
                    - value: "preset"
                      label: "Preset color"
                    - value: "wheel"
                      label: "Color wheel"
                    - value: "variable"
                      label: "CSS variable"

            - name: "color_preset"
              label: "Preset color"
              required: false
              selector:
                ui_color:
                  include_none: true
                  include_state: true

            - name: "color_wheel"
              label: "Color wheel"
              required: false
              selector:
                text:
                  type: "color"

            - name: "color_variable"
              label: "CSS variable"
              required: false
              selector:
                text:
                  multiline: false
                  type: "text"

            - name: "opacity"
              label: "Opacity"
              required: false
              default: 100
              selector:
                number:
                  min: 0
                  max: 100
                  mode: "slider"
                  unit_of_measurement: "%"
                  step: 10

        - name: "conditions"
          label: "Conditions"
          required: true
          selector:
            condition: {}

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[Giorgiacoco2024]

“Hi, great job, you’ve made my life a bit easier. Would you also be able to create something similar for the background color of the icon container? I like the possibility of choosing the opacity with a slider.”

[andarotajo]

Thanks for the feedback. That should be possible though I'll have to think about how I wanna implement it. Maybe include a "target" property and move the "opacity" to the individual "background_" section

[andarotajo]

@Giorgiacoco2024 Check out the latest release, it allows you modify the icon too 👍

[Jorggs]

Hi, great work, I do however seem to have an issue that the conditional colour does not seem to 'clear' once the condition is no longer met. I'm using it to colour the card based on an occupancy sensor, when movement is detected, it changes colour, but it doesn't revert to it's normal colour once the detected is no longer present.

[wylie102]

Yeah I'm having the same thing with lights. Off they are the standard colour. On they change to the selected colour, but they then stay that way regardless of being turned off again. I tried adding in a second condition where the light also had to not be off, but that just disabled the functionality of the module completely.

[wylie102]

@Jorggs I think I might have figured out how to get it to work. First you have to untick the default module for that card. Then you have to open the code editoe (button at the bottom) then copy the part from background_1 and paste it directly underneath, change to background_2, then change the colour to what you want it to be by default (state-color is the standard colour) and change the value to "off" or whatever you want. Here is mine for the lights.

  background_1:
        color_preset: deep-orange
        color_mode: preset
        conditions:
          - condition: state
            entity_id: light.living_room_lamp_by_plant
            state: "on"
      background_2:
        color_preset: state-color
        color_mode: preset
        conditions:
          - condition: state
            entity_id: light.living_room_lamp_by_plant
            state: "off"

[andarotajo]

Thanks for the feedback. The second "background_" block is a workaround but I'll work on a fix as my code doesn't account for the case that no conditions are fulfilled.

The easiest way would be to revert to the default card background color. Maybe it might be a good idea to introduce a "Default Background Color" parameter though for the people that want a different color?

What do you all think?

[andarotajo]

For now I've opted to use the default card background as a fallback. See update notes below, hope it works as intended now :)

[andarotajo]

Updated to v1.1

• Added logic to set the default card background color, if no conditions were matched.

Disclaimer: Leaving out the conditions will evaluate to true, making it possible to use this module to set a background color and optionally opacity without using any conditions. While this is not the intended purpose, I thought it might still be a nice way to not have to fiddle with custom styling.

[xsrplayerx]

Thanks, I also had this issue, but now it's working :)
Would it be possible in a future update to change the default card backgroud color?
For example, when the entity is off, the card gets a little darker (the middle one in the image) comparing to the ones that don't have the module applied (I am using the Bubble theme):

[andarotajo]

Possible for sure, I'll have to think about how to integrate it along with the other things I'm planning 👍

[andarotajo]

@xsrplayerx fyi I added this feature to the latest update 👍

[robertofabrizi]

Could we have support for hex colors?

[robertofabrizi]

Could be yes! But i have a newer thing to ask, if you use this to change the default color of a slider button that is representing a battery level, the override doesnt honor it and it overrides the while button not just the current battery level bar length

[andarotajo]

I did not consider using this for switches or sliders they apparently work a bit different. Would you expect the actual slider or the background to be colored (I didn't get that from your post)?

[robertofabrizi]

I would expect the slider to be colored, like this orange to be replaced with a different color

[robertofabrizi]

Last thing is that, i dont understand why it happens but not 100% of the times, when i override a color sometimes it colors also the inside of the main icon, like this

[andarotajo]

Tbh I would expect the background to be colored as the slider doesn't count as "backgound" for me. I'll have to think about how to fix this compatibility issue.

No idea about the other issue though, that's weird. Not sure if you're familiar with CSS in general but maybe you can look at the CSS class where the background is buggy when that happens? I'll see what I can do about this

[robertofabrizi]

Here are the printscreen of one working and the other not and their css

<div class="bubble-main-icon-container bubble-icon-container icon-container bubble-action bubble-action-enabled" data-entity="sensor.aqara_smart_lock_u200_batteria" 
	data-tap-action="{&quot;action&quot;:&quot;more-info&quot;}" data-double-tap-action="{&quot;action&quot;:&quot;none&quot;}" data-hold-action="{&quot;action&quot;:&quot;none&quot;}" 
	style="color: var(--bubble-icon-color, var(--bubble-icon-color)); --bubble-icon-color: var(--deep-orange-color);">
   <ha-icon class="bubble-main-icon bubble-icon icon" icon="mdi:lock-outline" style="color: var(--bubble-icon-color, var(--bubble-icon-color));"></ha-icon>
   <div class="bubble-entity-picture entity-picture" style="display: none;"></div>
   <ha-ripple aria-hidden="true"></ha-ripple>
   <div class="bubble-icon-feedback-container bubble-feedback-container">
      <div class="bubble-icon-feedback bubble-feedback-element feedback-element" style="display: none;"></div>
   </div>
</div>

<div class="bubble-main-icon-container bubble-icon-container icon-container bubble-action" data-entity="undefined" 
	data-tap-action="{&quot;action&quot;:&quot;none&quot;}" data-double-tap-action="{&quot;action&quot;:&quot;none&quot;}" data-hold-action="{&quot;action&quot;:&quot;none&quot;}">
   <ha-icon class="bubble-main-icon bubble-icon icon" icon="mdi:window-shutter" style="color: inherit;"></ha-icon>
   <div class="bubble-entity-picture entity-picture" style="display: none;"></div>
</div>

[andarotajo]

@robertofabrizi I just release v1.2, maybe you can try that one out as I rewrote most of the code. Be aware that the schema changed

[robertofabrizi]

Sure!

[robertofabrizi]

I see that you have added the icon background color as a workaround to the fact that it too was getting colored. This way it wont get colored like the rest of the button, but to a fixed value picked there. It will work only if someone is not using both light and dark themes (like if they sync ha to their system theme)

[andarotajo]

I actually added it because it was requested in a comment above. But using this im general with auto switching themes will be difficult.

Sounds like another thing to put on my todo list :D Maybe it's possible to see what kind of theme is used

[andarotajo]

It will work only if someone is not using both light and dark themes (like if they sync ha to their system theme)

Thought about it and it might be better to let the user handle this via appropriate CSS variables. Dark and light mode themes are basically two different themes so they have their own variables etc. A good way imo would be to add variables with the same name to both of those themes and then use those variables in the module. That way it should switch the color when the theme gets changed (haven't tested that though)

I could probably implement a flag indicating whether to apply the coloring to both, dark or light but that limits the user when they want to have a different coloring for dark and light mode. After that it gets pretty messy.

[andarotajo]

Updated to v1.2

• Rewrote basically everything to allow for more feature and better stability
• Fixed a bug where the card didn't reset the color when no conditions matched
• Updated the schema to be more consistent
• Added a feature to define the default background color and opacity for card and icon
• Added a feature to additionally set the background color and opacity for the icon
• Added a feature to set the opacity wherever you can set the background color instead of just globally

Disclaimer: Be aware that this update changes the schema so you'll have to update your YAML accordingly. The main post has an example you can use as orientation or otherwise the UI 👍

[joao-pinto-mindera]

First of all awesome job with this module! I just tried this on climate card and couldn't make it working. Please let me know which information you need to help debug the problem.

[joao-pinto-mindera]

Adding another reply to keep discussions separated. I noticed that unless you actually slide the opacity to a different value than the default one, you can't have the module being applied.

[andarotajo]

First of all awesome job with this module! I just tried this on climate card and couldn't make it working. Please let me know which information you need to help debug the problem.

Good question, I don't have any climate entities unfortunately so this will be hard. If you read my latest comment, I'm actually considering deprecating this module and creating seperate, more focused modules for the different card types instead of having one big one. I think there's a custom integration that allows one to generate dummy entities of all types so that might be sth. I could use. But honstely climate entities are low prio for me as I don't use them. I should probably move it into the unsupported section for now...

Your other issue might be a problem with the module editor as I don't have any influence regarding that with my module

[joao-pinto-mindera]

Ok, thanks for the feedback!

[joao-pinto-mindera]

Btw, the problem with climate card is only the card background, the icon related modifiers work fine.

[andarotajo]

Looking at the different compatibility issues with the different card types, maybe it's better to split different types into different modules? That way I could add options specific to card types (like coloring the slider and background part of a slider button) which is now very difficult. Any opinions on that?

@Clooos sorry for pinging you but how does the module store exactly? Considering I might want to discontinue this module in favor or card-specific modules what's the best way to do that? I see that I can close this discussion as outdated but does that affect the module store search?

[Clooos]

Ping me again when it's done, then I should be able to remove this post 🙂

[robertofabrizi]

I have two shutters,one is a smart one and it correctly results as 100% open, in this case the color override is fine. The other isnt smart, it doesnt report its current %, therefore the state is unknown. In this case the background color override is wrongly applied to the icon too

[andarotajo]

Thanks for the info. Not sure how the unknown state is supposed to cause the icon background to be colored too but I'll just have to look at that. Like I indicated in my other post, I'll develop new modules that are specific to one card type. Having one module for everything is way too error-prone and not maintainable for me, looking at the issues it already has.

Since I don't use this card myself, this will be lower on the priority list for me but I'll still do it eventually

[BerrisNO]

Hi, nice work! Is it possible to add my own theme color in here, or a gradiant color?
Example: var(--Gray500)

[andarotajo]

How is it defined in the button-card? I've never worked with gradients but it seems to be only working with the CSS property background-image. My module uses background-color for the colors though

[BerrisNO]

example:

styles:
                    name:
                      padding: 0 22px
                      color: var(--black)
                    button:
                      display: flex
                      height: 24px
                      background: var(--active-small)
                      border-radius: 24px
                      color: var(--white)
                      ```

[andarotajo]

Oh background I see. I'm not too familiar with CSS but I might be able to switch to using background instead of background-color. This module here won't receive updates though as I'm currently creating smaller modules dedicated to each button type. I'll try to make it work with those though, thanks for the feedback!

[andarotajo]

If you're using a state button, check out #1693 where I've pushed an update that allows you to use gradients

[BerrisNO]

Excellent thanks!

[SavanFlou]

Thanks for this module, easy to use and engancing a lot the bubble cards.
Only problem, I would like more :D.
Do you think it could be possible to also change the color of the text?
I would like to change the background colors based on conditions but with some colors, the texts become impossible to read. I found some modules to change the text colors but none with conditions.

[andarotajo]

Hey thanks for the feedback. I'm currently in the process of creating smaller modules that are tailored for the specific card types. Coloring the text is a good idea though I'll have to try it out first and see if I want to add it as a feature or seperate module.

[andarotajo]

I've released the first split off module for the state button. So if you're using this for state buttons check out #1693. You can also modify the text color there :)

[Jgree321]

Still having issues with default color.
Using it on a cover group. Condition is set for when cover group is closed icon is green. That works fine.
But when cover group changes to open or opening the icon goes blue and doesn't respect default colors listed.

[andarotajo]

Can you post the YAML you're using for the module?

[Jgree321]

modules: - rmn_conditional_background_color - "!default" rmn_conditional_background_color: conditional_background_1: card_background: color_preset: green color_mode: preset conditions: - condition: state entity_id: cover.garage_doors state: closed default_card_background: color_preset: red color_mode: preset default_icon_background: color_preset: black color_mode: preset

[andarotajo]

Make sure you're using the latest version of the module. I'm pretty sure I've fixed that problem. If you're using the state button, you might wanna use this module instead: #1693 I've decided to split this module into small parts dedicated to each button type so this module here won't get any updates

[Jgree321]

It seems the GUI for specifying conditions is not the same as the one used in automations for example.
Trying to make the condition of a lock I'm struggling with. In an automation its easy to just choose "is locked"
Trying to configure the same condition in the module its wanting me to specify a zwave value which I have no idea how to get lock state like that.

[andarotajo]

I have no control over how the GUI for conditions works but I'm also not sure what you mean. When I add a state condition and choose sth. like an update entity, HA presents me with the "user friendly" states in the selection. I don't have a lock but it sounds like you want a state condition?

But if it's buggy, it might either be a bug with Bubble Card or HA itself.

[Jgree321]

Choosing the same device within in automation presents you "easy" state choices which aren't available here. It's weird.

[Jgree321]

Nevermind on this. Instead of choosing a device If I choose "state" as the condition I can get it to work.
Still having the issue where it's seemingly not obeying default colors. Workaround is using the "condition2" thing.

[andarotajo]

Generally I recommend using state conditions vs device as changing the device breaks the automation. But maybe the HA condition picker is buggy for devices or just limited.

For the other issue make sure you're using the latest version of the module. I'm pretty sure I've fixed that problem. If you're using the state button, you might wanna use this module instead: #1693 I've decided to split this module into small parts dedicated to each button type so this module here won't get any updates

[damomato]

This is great. Any way you can add in the option to change the icon colour as well? I usually like to change both the card background and icon colour while leaving the icon background default.

[andarotajo]

Thanks for the feedback. This module won't get updates anymore as I'm splitting it up into smaller modules for each card type but I'll consider it!

In the meantime you can use #1693 for state buttons if you still want to use the other features

[damomato]

Thanks mate. If that makes it more manageable it sounds like a good idea.

I have a few ideas, just throwing it out there in case you're interested. Also may be worth just calling the project 'Conditional Colors' or 'Conditional Design' depending on your scope

1. Change icon colour (as mentioned previously)
2. Change icon (may be outside your scope)
3. Select current entity for conditions (most of the time I would just use the same one as in the card)

The reason I suggest changing the icon (idea number 2) is because I usually like to change both the colour and icon on selecting a button (e.g. open garage door) so having it all in the one module would be fantastic.

Keep up the good work I really appreciate it!

[andarotajo]

Nice ideas, thanks! The first new module is called "Conditional state button coloring" so there's that at least. Wouldn't fit anymore with changing icons though :P

I've thought about the third point but I'm not sure if it's even possible for the module. The condition picker is from Home Assistant but maybe it's possible somehow

[damomato]

Completely understand if idea 2 isn't within your scope and you want to keep it to colours only.

But being able to change the icon colour would be amazing and would fit the new name 😁

I had no idea that idea 3 wasn't possible, oh well not a big deal it's not even a problem. Can't wait to see you release these

[azilberbaum]

If I want to use the lights color, what I just use:

var(--color)

it didn’t seem to work, or is the format not correct?

I have CSS variable mode selected

[azilberbaum]

oh I see, is there an easy way to get the color of a light in a CSS variable? I am pretty new to HA, just want to get the background color of the icon to be the same as the color of the light, like how the icon color works!

[azilberbaum]

Looks like maybe "var(--bubble-light-color)" ?

[andarotajo]

You could try opening the developer console in your browser while having Home Assistant open and call this with your variable name: window.getComputedStyle(document.body).getPropertyValue("--token-rgb-tomato");

Looks like maybe "var(--bubble-light-color)" ?

If that color works with the module and it looks fine to you go ahead!

[azilberbaum]

I can use the the new module, how would I get the light color in that one?

[andarotajo]

#1693
Check out the example to see what's possible and then it's either var(--asdf) or rgb(var(--asdf)) for the value. If those don't work the variable either doesn't exist or works somehow different

[crafty35a]

Hi, I can't seem to get negative ("not") conditions to work at all with this module. Normal conditions work fine, but no conditional colors are ever applied to the card when I negate a condition like this:

condition: not
conditions:
  - condition: state
    entity_id: sensor.tower_array_state
    state: started

[Clooos]

Hi! I'm aware of this issue and it happens with all modules, I will do my best to fix it in the next release 🙂

[Clooos]

By the way, this is now fixed in v3.0.1 and up 😄

[Iceman248]

I know you deprecated this, but I didn't see one you made for a switch button. I was able to get this to work for that using the conditions, as default didn't work. Is there one for a switch?

[andarotajo]

I'm currently working on the module for the switch button where you can configure default and conditional coloring for switches that are off and on :)

Should be out tomorrow actually