[JS+Editor Module] Conditional state button coloring

[andarotajo]

Conditional state button coloring

Version: v1.3
Creator: andarotajo

Important

Supported cards:

• Button (state only!)

Unsupported cards:

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

This module allows you to change various colors (and optionally opacity) of a state button based on more or more conditions. The settings can be applied to the card itself or the icon. Generally, it has the following features:

• Define default and conditional colors and opacity for icon, icon background, card background and card text
• Define conditions using the default Home Assistant selector
• Configure multiple combinations of color, opacity and conditions (YAML only)
• Every color is configured using one of three modes:
  • Preset color: Uses a predefined color from the Home Assistant theme.
  • Color wheel: Allows you to select a color using a color wheel.
  • Custom value: Passes whatever you specify directly into the CSS property.

It's possible to set up multiple sets of conditions using the YAML configuration. To do this, copy the conditional_colors_1 section replace the number at the end with the next number in sequence.

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

rmn_conditional_state_coloring:
  default_configuration:
    icon_background:
      color_mode: custom
      color_custom: rgb(var(--token-rgb-yellow-green))
    icon:
      color_mode: preset
      color_preset: black
      opacity: 100
    card_background:
      color_mode: custom
      color_custom: linear-gradient(145deg, rgba(255,220,178,1) 0%, rgba(255,176,233,1) 60%, rgba(104,156,255,1) 150%)
      opacity: 50
    card_text:
      color_mode: preset
      color_preset: red
      opacity: 100
  conditional_colors_1:
    card_background:
      color_mode: custom
      color_custom: rgb(var(--token-rgb-tomato))
      opacity: 50
    card_text:
      color_mode: preset
      color_preset: black
      opacity: 100
    icon_background:
      color_mode: custom
      color_custom: rgb(var(--token-rgb-tomato))
    conditions:
      - condition: numeric_state
        entity_id: sensor.robot_vacuum_sensor_time_left
        below: 2
  conditional_colors_2:
    card_background:
      color_mode: custom
      color_custom: rgb(var(--token-rgb-orange))
      opacity: 50
    card_text:
      color_mode: preset
      color_preset: black
      opacity: 100
    icon_background:
      color_mode: custom
      color_custom: rgb(var(--token-rgb-orange))
    conditions:
      - condition: numeric_state
        entity_id: sensor.robot_vacuum_sensor_time_left
        below: 10

---

🧩 Get this Module

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

---
rmn_conditional_state_coloring:
  name: "Conditional state button coloring"
  creator: "andarotajo"
  version: "v1.3"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1693"

  supported:
    - "button"

  unsupported:
    - "climate"
    - "cover"
    - "horizontal-buttons-stack"
    - "media-player"
    - "pop-up"
    - "select"
    - "calendar"
    - "separator"

  description: >-
    This module allows you to change various colors (and optionally opacity) of a
    state button based on more or more conditions. The settings can be applied
    to the card or icon.

    It's possible to set up multiple sets of conditions using the YAML configuration.
    To do this, copy the "conditional_colors_1" section replace the number at the
    end with the next number in sequence.

  code: |-
    ${(() => {
      if (this.buttonType !== "state") {
        return;
      }

      // Retrieve base and default configuration for the module
      const config = this.config.rmn_conditional_state_coloring || {};
      const defaultConfig = config.default_configuration || {};

      // Prepare optional user-defined default values for card and icon
      let finalIconBackgroundColor = getColor(defaultConfig.icon_background);
      let finalIconBackgroundOpacity = getOpacity(defaultConfig.icon_background);
      let finalIconColor = getColor(defaultConfig.icon);
      let finalIconOpacity = getOpacity(defaultConfig.icon);
      let finalCardBackgroundColor = getColor(defaultConfig.card_background);
      let finalCardBackgroundOpacity = getOpacity(defaultConfig.card_background);
      let finalCardTextColor = getColor(defaultConfig.card_text);
      let finalCardTextOpacity = getOpacity(defaultConfig.card_text);

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

        // Skip if no conditions match
        const conditions = subConfig?.conditions;
        if (!conditions || !checkConditionsMet([].concat(conditions), hass)) {
          continue;
        }

        // Retrieve configured colors and opacities
        finalIconBackgroundColor = getColor(subConfig.icon_background);
        finalIconBackgroundOpacity = getOpacity(subConfig.icon_background);

        finalIconColor = getColor(subConfig.icon);
        finalIconOpacity = getOpacity(subConfig.icon);

        finalCardBackgroundColor = getColor(subConfig.card_background);
        finalCardBackgroundOpacity = getOpacity(subConfig.card_background);

        finalCardTextColor = getColor(subConfig.card_text);
        finalCardTextOpacity = getOpacity(subConfig.card_text);

        break;
      }

      return `
        .bubble-icon-container {
          ${finalIconBackgroundColor
            ? `background: ${finalIconBackgroundColor} !important;`
            : ""}

          ${finalIconBackgroundOpacity
            ? `opacity: ${finalIconBackgroundOpacity} !important;`
            : ""}
        }

        .bubble-icon {
          ${finalIconColor
            ? `color: ${finalIconColor} !important;`
            : ""}

          ${finalIconOpacity
            ? `opacity: ${finalIconOpacity} !important;`
            : ""}
        }

        .bubble-background {
          transition: background-color 1.5s, opacity 1.5s !important;

          ${finalCardBackgroundColor
            ? `background: ${finalCardBackgroundColor} !important;`
            : ""}

          ${finalCardBackgroundOpacity
            ? `opacity: ${finalCardBackgroundOpacity} !important;`
            : ""}
        }

        .bubble-name-container {
          ${finalCardTextColor
            ? `color: ${finalCardTextColor} !important;`
            : ""}

          ${finalCardTextOpacity
            ? `opacity: ${finalCardTextOpacity} !important;`
            : ""}
        }
      `;

      function getColor(config) {
        const colorMode = config?.color_mode;

        if (colorMode === "preset" && config?.color_preset) {
          return `var(--${config.color_preset}-color)`;
        } else if (colorMode === "wheel" && config?.color_wheel) {
          return config.color_wheel;
        } else if (colorMode === "custom" && config?.color_custom) {
          return config.color_custom;
        }

        return null;
      };

      function getOpacity(config) {
        if (config?.opacity) {
          return `${config.opacity}%`;
        }

        return null;
      };
    })()}

  anchors:
    - schema: &color_schema
        - name: "color_mode"
          label: "Color mode"
          required: true
          icon: "mdi:select-color"
          selector:
            select:
              multiple: false
              custom_value: false
              mode: "dropdown"
              options:
                - value: "preset"
                  label: "Preset color"
                - value: "wheel"
                  label: "Color wheel"
                - value: "custom"
                  label: "Custom value"

        - name: "color_preset"
          label: "Preset color"
          required: false
          icon: "mdi:format-color-fill"
          selector:
            ui_color:
              include_none: true
              include_state: true

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

        - name: "color_custom"
          label: "Custom value"
          required: false
          icon: "mdi:variable"
          selector:
            text:
              multiline: false
              type: "text"

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

    - &icon_background_schema
      name: "icon_background"
      type: "expandable"
      title: "Icon background color"
      icon: "mdi:image"
      expanded: false
      schema: *color_schema

    - &icon_schema
      name: "icon"
      type: "expandable"
      title: "Icon color"
      icon: "mdi:image"
      expanded: false
      schema: *color_schema

    - &card_background_schema
      name: "card_background"
      type: "expandable"
      title: "Card background color"
      icon: "mdi:card-text"
      expanded: false
      schema: *color_schema

    - &card_text_schema
      name: "card_text"
      type: "expandable"
      title: "Card text color"
      icon: "mdi:text"
      expanded: false
      schema: *color_schema

  editor:
    - name: "default_configuration"
      type: "expandable"
      title: "Default configuration"
      icon: "mdi:cog"
      expanded: false
      schema:
        - *icon_background_schema
        - *icon_schema
        - *card_background_schema
        - *card_text_schema
        
    - name: "conditional_colors_1"
      type: "expandable"
      title: "Conditional colors"
      icon: "mdi:tune"
      expanded: false
      schema: 
        - *icon_background_schema
        - *icon_schema
        - *card_background_schema
        - *card_text_schema

        - name: "conditions"
          label: "Conditions"
          required: true
          icon: "mdi-code-braces"
          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 ❤️

[andarotajo]

Changelog

Version 1.3

• Simplify code some more using YAML anchors and aliases
• Change displayed icon for the expandable section of the icon color configuration
• Do not expand the section for the conditional color configuration by default

Version 1.2

• Significantly simplify code
• Adjust some texts for the GUI editor
• Add new feature to color the icon itself in addition to the icon background (this includes both default configuration and conditional coloring)
• Modify transition of card background to include both background-color and opacity. This helps with the "unclean" transition when changing both background color and opacity

Version 1.1

• Use CSS property background instead of background-color for the coloring of backgrounds
• Remove color mode variable (previously used for CSS variables with RGB values)
• Add new color mode custom. This mode passes whatever you set directly into the background property and makes it possible to use both CSS variables as well as gradients. For variables, you'll need to fully qualify them:
  • Variables with RGB values would be set up as rgb(var(--your-rgb-variable))
  • Variables with other values would be set up as var(--your-normal-variable)

[Jorggs]

So, having previously used the conditional background color module I thought I'd better change over to the this module, however, it just doesn't appear to function for me at all. I'm just trying to set the conditional background colour, see the code below. It doesn't seem to colour the background regardless of the condition. Is this just me?

type: custom:bubble-card
card_type: button
button_type: name
name: Living Room
show_icon: false
icon: ""
sub_button:
  - entity: light.living_room_pendants
    light_background: true
    name: ""
    show_name: true
    tap_action:
      action: toggle
    icon: mdi:ceiling-light-multiple
    show_attribute: false
  - entity: light.living_room_table_lamps
    icon: mdi:lamp
    tap_action:
      action: toggle
    light_background: true
  - entity: switch.movietime
    icon: mdi:television
    light_background: true
    show_background: true
    tap_action:
      action: none
    hold_action:
      action: toggle
modules:
  - get_state_attribute
  - rmn_conditional_state_coloring
show_name: true
get_state_attribute:
  - entity: sensor.espliving_room_temperature
  - entity: sensor.espliving_room_humidity
rows: "1.4"
card_layout: large
button_action:
  tap_action:
    action: navigate
    navigation_path: "#livingroom"
styles: |2-
    .bubble-sub-button-icon{
      --mdc-icon-size: 30px !important;
    }

    .bubble-sub-button {
      height: 50px !important;
      width: 50px !important;
    }
show_attribute: true
icon_border_progress: []
rmn_conditional_state_coloring:
  conditional_colors_1:
    card_background:
      color_preset: light-green
      color_mode: preset
      opacity: 20
    conditions:
      - condition: state
        entity_id: binary_sensor.espliving_room_occupancy
        state: "on"

[Jorggs]

ScreenRecording_07-22-2025.18-42-34_1.mov

[andarotajo]

Here you go, here's the yaml for the card:

Ok I see now. I assume it's because of the fading effect the card has applied somewhere. Not sure if that comes from Bubble Card or Home Assistant but not from me for sure. What's probably happening is that if I remove both the styles for background and opacity it resets to the original opacity the card has - 100% - while transitioning back to the original background.

Not sure what I can do here as I'm not really familiar with JS or CSS but I'll see what I can do

[Jorggs]

Understood, thanks for the explanation, and once again, thanks for all your hard work.

[andarotajo]

I've released version 1.2 which should help with this issue. The default style for bubble cards only has a transition for the background color but not opacity. I've adjusted the transition to include the opacity.

Since this runs the risk of overiding possible transition changes in the default style, I've opened a feature request to include the opacity transition in the default style 👍

[Jorggs]

Thank you. Looks great

[SavanFlou]

Thanks, works great for me, I am now able to put a specific background AND text color given the situation. I'm happy 👍

[damomato]

Hi, is there any way to set multiple conditional colours? For example, I want to change an aircon state to be orange when on heat, blue when on cool, green when on fan, etc.

[andarotajo]

Thanks for the feedback. This is described in the main post

[damomato]

Thanks, sorry didn't see it before as YAML only. Any plans to bring it to the GUI?

[andarotajo]

That's unfortunately not possible, not with the way it works now at least

[damomato]

No worries I'll give it a shot with the yaml. Keep up the good work thanks!

[maillme]

HI, thank sfor the plugin I downloaded the original, and thought - because I'm using it, I should upgrade to your latest card.
However, it seems that the plugin will not change the color of the card. I want pink, so I select that as dafult card color, with opactiy 30%. Then change that to 100% on condition of an entity being on.

But basically, no matter what I choose, it just gives me a blue color...... I'm sure there's a simple explanation. I just can't suss it out.

hope to hear. Neil

[andarotajo]

Can you share the YAML for this card please?

[maillme]

Of course - here you go. Thanks again.

`type: custom:bubble-card
card_type: button
button_type: switch
modules:

• card_text_style
• icon_color
• font_change
• rmn_conditional_background_color
• conditional_icon
  card_text_style:
  name:
  font_size: "20"
  color: black
  font_weight: "350"
  opacity: 1
  state:
  color: dark-grey
  font_size: "12"
  font_weight: "300"
  opacity: 1
  name: Pool
  show_state: true
  icon: mdi:light-flood-down
  tap_action:
  action: toggle
  icon_color:
  color: orange
  icon_border_progress: []
  font_change:
  fine_control:
  letter_spacing: -0.5
  name_font_size: 17
  state_font_size: 14
  font_style: normal
  rmn_conditional_background_color:
  background_1:
  color_preset: amber
  color_mode: preset
  conditions:
  • condition: state
    state: "on"
    entity_id: switch.balcony_door_light_relay
    opacity: 50
    grid_options:
    columns: 6
    rows: auto
    entity: switch.pool_lights`

[andarotajo]

Gotcha, the issue is that this module only works for the state button. Switches are on my todo list but I'm trying to stabilize this module before I make the others, as they are similar in a lot of aspects

[maillme]

ahh, my apologies!! I should've noticed that.
No problem. thanks again for all your work. These modules are great, especially for those that are not as handy with coding!

[xistor4]

Great Module! what would be awesome is if there was a way to make it work with slider button as well? ie - I have some soil moisture sensors displayed with the sliding display and if it could change color based on how dry the entity is that would be amazing! it works great with standard button but slider as well would be so good

[andarotajo]

Thanks for the feedback. Slider button is planned! I've just been waiting to collect bugs before pumping out other modules

[andarotajo]

Had some time today and published the module for slider buttons 👍
#1712

[Neokimx]

At first I would like to thank you for your work on these modules.
I use the conditional state button coloring aswell as the contional slider button coloring in my setup .
But I have one question or problem:

When using the "contional SLIDER button coloring" I use my own color variables like "var(--good-color)" and the slider gets colored with my right color how I expect it to be. But when I use the same color variable with "contional STATE button coloring" the color appears not they way i want it to. It looks "darker", not as bright.

See the screenshot below. Upper bubble card is a state button. Lower bubble card is a slider button:

The YAML for state button:

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.byd_batteriespeicher_ladezustand
modules:
  - rmn_conditional_state_coloring
rmn_conditional_state_coloring:
  conditional_colors_1:
    card_background:
      color_mode: custom
      color_custom: var(--good-color)
    conditions:
      - condition: numeric_state
        entity_id: sensor.byd_batteriespeicher_ladezustand
        above: 50
name: Battery

The YAML for slider button:

type: custom:bubble-card
card_type: button
button_type: slider
modules:
  - rmn_conditional_slider_coloring
entity: sensor.byd_batteriespeicher_ladezustand
rmn_conditional_slider_coloring:
  conditional_colors_1:
    slider_background:
      color_mode: custom
      color_custom: var(--good-color)
    conditions:
      - condition: numeric_state
        entity_id: sensor.byd_batteriespeicher_ladezustand
        above: 50
show_last_changed: false
show_state: true
name: Battery

Whats the cause or how can I fix this? I use slider and state buttons besides each other in my dashboard and the different tones of "green" disturb the appearance. Thanks in advance

[andarotajo]

I just tried it and it's the same for me. Weirdly enough the state button has a style applied where the opacity is set to 0.5 but that's not coming from my module. At least, I have no logic written, where I set the opacity unless the user specifies it.

A workaround is to specify the opacity yourself, like this:

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.byd_batteriespeicher_ladezustand
modules:
  - rmn_conditional_state_coloring
rmn_conditional_state_coloring:
  conditional_colors_1:
    card_background:
      color_mode: custom
      color_custom: var(--good-color)
      opacity: 100
    conditions:
      - condition: numeric_state
        entity_id: sensor.byd_batteriespeicher_ladezustand
        above: 50
name: Battery

I'm going on a trip today so I can't look into it until monday but I'm not even sure how to identify, where this opacity is being set from

[Neokimx]

I can confirm it works with the workaround. Indeed looks like a 0.5 opacity. Thanks for the workaround and maybe you will find the problem/bug/feature in the future. Have a nice trip!

[andarotajo]

If I'm not mistaken, it's the Bubble Card itself that applies this style. This code certainly looks like it:

Bubble-Card/src/cards/button/changes.js

Lines 29 to 64 in 0cc54a1

	if (buttonType === 'switch' && isOn) {
	if (lightColor && isLight && !useAccentColor) {
	newButtonColor = getIconColor(context);
	newOpacity = '.5';
	} else {
	newButtonColor = 'var(--bubble-button-accent-color, var(--bubble-accent-color, var(--bubble-default-color)))';
	newOpacity = '1';
	}
	} else {
	newButtonColor = 'rgba(0, 0, 0, 0)';
	newOpacity = '.5';
	}
	if (buttonType === 'slider') {
	if (isOn) {
	if (isLight && !useAccentColor) {
	context.elements.rangeFill.style.backgroundColor = getIconColor(context);
	} else {
	context.elements.rangeFill.style.backgroundColor = 'var(--bubble-button-accent-color, var(--bubble-accent-color, var(--bubble-default-color)))';
	}
	}
	updateSlider(context);
	}
	if (currentButtonColor !== newButtonColor) {
	if (cardType === 'button') {
	context.card.style.setProperty('--bubble-button-background-color', newButtonColor);
	} else if (cardType === 'pop-up') {
	context.popUp.style.setProperty('--bubble-button-background-color', newButtonColor);
	}
	}
	if (currentOpacity !== newOpacity) {
	context.elements.background.style.opacity = newOpacity;
	}

Not sure if having it moved or removed would be good though. Even if it's directly in a CSS class if wouldn't change the behaviour you've had. The best idea might be to explicitely set the opacity everywhere to be consistent (if you want it to be) since you'll never know what defaults the different cards have