[JS+Editor Module] Conditional cover coloring

[andarotajo]

Conditional cover coloring

Version: v1.1
Creator: andarotajo

Important

Supported cards:

• Cover

Unsupported cards:

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

This module allows you to change various colors (and optionally opacity) of a cover 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 can be 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.
  • JS template: Like with the Bubble Card styling the JS template is evaluated.

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_cover_coloring:
  default_configuration:
    card_background:
      color_mode: preset
      color_preset: red
      opacity: 50
  conditional_colors_1:
    card_background:
      color_mode: preset
      color_preset: blue
      opacity: 50
    conditions:
      - condition: state
        entity_id: cover.virtual_test_cover
        state: opening
  conditional_colors_2:
    card_background:
      color_mode: template
      color_template: rgb(${hass.states['input_text.orange_color'].state})
      opacity: 50
    conditions:
      - condition: state
        entity_id: cover.virtual_test_cover
        state: closing
  conditional_colors_3:
    card_background:
      color_mode: preset
      color_preset: green
      opacity: 50
    conditions:
      - condition: state
        entity_id: cover.virtual_test_cover
        state: open

---

🧩 Get this Module

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

---
rmn_conditional_cover_coloring:
  name: "Conditional cover coloring"
  creator: "andarotajo"
  version: "v1.1"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1769"

  supported:
    - "cover"

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

  description: >-
    This module allows you to change various colors (and optionally opacity) of a
    cover 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.cardType !== "cover") {
        return;
      }

      // Retrieve base and default configuration for the module
      const config = this.config.rmn_conditional_cover_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;
        } else if (colorMode === "template" && config?.color_template) {
          return eval("`" + config.color_template + "`");
        }

        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"
                - value: "template"
                  label: "JS template"

        - 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: "color_template"
          label: "JS template"
          required: false
          icon: "mdi:code-tags"
          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.1

• Add new color mode to allow using JS templates like for the Bubble Card styling

[ilanhalakhmi]

Hi @andarotajo
i recall you also had a 'Conditional Background Color' module, but i can't seem to find it...
is it still available ?

[andarotajo]

Hey, the Conditional Background Color module was deprecated and is not available anymore since I've switched to releasing smaller specialized versions of it for the different card types. I've not covered all card types though. Do you miss this module for a card type I've not done yet?

[ilanhalakhmi]

yes..
for example - climate card
(sorry for the late response, i missed your message)

[andarotajo]

Thanks for the info, I'll put that on my to-do list. Will have to see how I can test that

[andarotajo]

@ilanhalakhmi I have added the module for the climate card here. Feel free to check it out :)

[ilanhalakhmi]

Thanks!
Will check it out later today 🙏

[ablersch]

Hi, nice modules. Use different types of it a lot of times in my bubble card dashboard.
Conditions with "numeric_state" do not work. Bug or not supported? Conditions with "state" works.

rmn_conditional_cover_coloring:
  default_configuration:
    icon_background:
      color_preset: purple
      color_mode: preset
      opacity: 100
    icon:
      color_preset: white
      color_mode: preset
      opacity: 100
    card_background:
      color_mode: custom
      color_custom: "#0e4351"
      opacity: 100
    card_text:
      color_preset: white
      color_mode: preset
      opacity: 100
  conditional_colors_1:
    icon_background:
      color_preset: grey
      color_mode: preset
      opacity: 100
    icon:
      color_preset: white
      color_mode: preset
      opacity: 100
    card_background:
      color_mode: custom
      color_custom: "#0e4351"
      opacity: 100
    card_text:
      color_preset: white
      color_mode: preset
      opacity: 100
    conditions:
      - condition: numeric_state
        entity_id: cover.ug_werkstatt_jalousie
        attribute: current_position
        above: 99

[andarotajo]

It seems that the numeric state condition with attribute in particular doesn't work. But I don't handle the conditions myself as this is done by Bubble Card. It might be a bug or just not supported at this point. @Clooos should be able to answer that one

[SavanFlou]

Hello, could it be possible to add the possibility to change the color of the arrows?
I want to put my card in white when opened, because it will be very visible in my environment. And it is... but I cannot find the arrows.

[joeidea]

Hello @SavanFlou ,

Would it be acceptable to change the arrow icon backgrounds, to make the arrows visible? This code does that:

.bubble-cover-button { background-color: blue !important; }

Change "blue" to whatever you like.

Screenshot from my test card:

Thank you,

Joe

[SavanFlou]

Good idea, I can work with that.
Could be a good idea to add this possible change of color directly in the module.

[andarotajo]

Hey thanks for the suggestion but I currently don't know when I'll do changes to the modules again as I'm not doing a lot with my own dashboard right now. Generally it should be possible though I want to keep the maintenance low by not having too many variables that can change via updates.

I'll put it on my list but you'll have to stick with additional custom styles for now, sorry

[SavanFlou]

Do not worry, I know that feeling: I just put a new connected toy in my house so I change lots of things in Home Assistant, but it has been over 6 months I was just using it without changing a single thing.
We all have things to do, it was really just a suggestion while I am at it, not sure that could interest lots of people other than me ;)
I did the change with styles and that work, thanks.