[JS+Editor Module] Conditional switch button coloring

[andarotajo]

Conditional switch button coloring

Version: v1.0
Creator: andarotajo

Important

Supported cards:

• Button (switch 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 switch button based on more or more conditions. The settings can be applied to the card itself or the icon for both OFF and ON states of the switch. Generally, it has the following features:

• Define default and conditional colors and opacity for icon, icon background, card background and card text
• Define coloring for the switch being ON and OFF
• 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_switch_coloring:
  default_configuration:
    switch_on:
      card_background:
        color_mode: preset
        color_preset: grey
        opacity: 50
      card_text:
        color_mode: preset
        color_preset: red
        opacity: 100
      icon_background:
        color_mode: preset
        color_preset: red
        opacity: 50
      icon:
        color_mode: preset
        color_preset: black
        opacity: 100
    switch_off:
      card_background:
        color_mode: preset
        color_preset: red
        opacity: 50
      card_text:
        color_mode: preset
        color_preset: black
        opacity: 100
      icon_background:
        color_mode: preset
        color_preset: blue
        opacity: 100
      icon:
        color_mode: preset
        color_preset: black
        opacity: 100
  conditional_colors_1:
    switch_on:
      card_background:
        color_mode: preset
        color_preset: blue
        opacity: 50
      icon_background:
        color_mode: preset
        color_preset: green
        opacity: 100
      card_text:
        color_mode: preset
        color_preset: green
        opacity: 100
      icon:
        color_mode: preset
        color_preset: black
        opacity: 100

---

🧩 Get this Module

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

---
rmn_conditional_switch_coloring:
  name: "Conditional switch button coloring"
  creator: "andarotajo"
  version: "v1.0"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1768"

  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
    switch button based on more or more conditions. The settings can be applied
    to the card or icon for both the ON and OFF state.

    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 !== "switch") {
        return;
      }

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

      // Prepare optional user-defined default values for card and icon
      let finalIconBackgroundColorOff = getColor(defaultConfig.switch_off?.icon_background);
      let finalIconBackgroundColorOn = getColor(defaultConfig.switch_on?.icon_background);
      
      let finalIconBackgroundOpacityOff = getOpacity(defaultConfig.switch_off?.icon_background);
      let finalIconBackgroundOpacityOn = getOpacity(defaultConfig.switch_on?.icon_background);
      
      let finalIconColorOff = getColor(defaultConfig.switch_off?.icon);
      let finalIconColorOn = getColor(defaultConfig.switch_on?.icon);
      
      let finalIconOpacityOff = getOpacity(defaultConfig.switch_off?.icon);
      let finalIconOpacityOn = getOpacity(defaultConfig.switch_on?.icon);
      
      let finalCardBackgroundColorOff = getColor(defaultConfig.switch_off?.card_background);
      let finalCardBackgroundColorOn = getColor(defaultConfig.switch_on?.card_background);
      
      let finalCardBackgroundOpacityOff = getOpacity(defaultConfig.switch_off?.card_background);
      let finalCardBackgroundOpacityOn = getOpacity(defaultConfig.switch_on?.card_background);
      
      let finalCardTextColorOff = getColor(defaultConfig.switch_off?.card_text);
      let finalCardTextColorOn = getColor(defaultConfig.switch_on?.card_text);
      
      let finalCardTextOpacityOff = getOpacity(defaultConfig.switch_off?.card_text);
      let finalCardTextOpacityOn = getOpacity(defaultConfig.switch_on?.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
        if (subConfig.switch_off) {
          finalIconBackgroundColorOff = getColor(subConfig.switch_off.icon_background);
          finalIconBackgroundOpacityOff = getOpacity(subConfig.switch_off.icon_background);
          
          finalIconColorOff = getColor(subConfig.switch_off.icon);
          finalIconOpacityOff = getOpacity(subConfig.switch_off.icon);
          
          finalCardBackgroundColorOff = getColor(subConfig.switch_off.card_background);
          finalCardBackgroundOpacityOff = getOpacity(subConfig.switch_off.card_background);
          
          finalCardTextColorOff = getColor(subConfig.switch_off.card_text);
          finalCardTextOpacityOff = getOpacity(subConfig.switch_off.card_text);
        }

        if (subConfig.switch_on) {
          finalIconBackgroundColorOn = getColor(subConfig.switch_on.icon_background);
          finalIconBackgroundOpacityOn = getOpacity(subConfig.switch_on.icon_background);

          finalIconColorOn = getColor(subConfig.switch_on.icon);
          finalIconOpacityOn = getOpacity(subConfig.switch_on.icon);

          finalCardBackgroundColorOn = getColor(subConfig.switch_on.card_background);
          finalCardBackgroundOpacityOn = getOpacity(subConfig.switch_on.card_background);

          finalCardTextColorOn = getColor(subConfig.switch_on.card_text);
          finalCardTextOpacityOn = getOpacity(subConfig.switch_on.card_text);
        }

        break;
      }

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

          ${finalIconBackgroundOpacityOff
            ? `opacity: ${finalIconBackgroundOpacityOff} !important;`
            : ""}
        }
        
        .is-on .bubble-icon-container {
          ${finalIconBackgroundColorOn
            ? `background: ${finalIconBackgroundColorOn} !important;`
            : ""}

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

        .is-off .bubble-icon {
          ${finalIconColorOff
            ? `color: ${finalIconColorOff} !important;`
            : ""}

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

        .is-on .bubble-icon {
          ${finalIconColorOn
            ? `color: ${finalIconColorOn} !important;`
            : ""}

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

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

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

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

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

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

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

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

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

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

          ${finalCardTextOpacityOn
            ? `opacity: ${finalCardTextOpacityOn} !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

    - &switch_off_schema
      name: "switch_off"
      type: "expandable"
      title: "Switch is OFF"
      icon: "mdi:toggle-switch-off"
      expanded: false
      schema:
        - *icon_background_schema
        - *icon_schema
        - *card_background_schema
        - *card_text_schema

    - &switch_on_schema
      name: "switch_on"
      type: "expandable"
      title: "Switch is ON"
      icon: "mdi:toggle-switch"
      expanded: false
      schema:
        - *icon_background_schema
        - *icon_schema
        - *card_background_schema
        - *card_text_schema

  editor:
    - name: "default_configuration"
      type: "expandable"
      title: "Default configuration"
      icon: "mdi:cog"
      expanded: false
      schema:
        - *switch_off_schema
        - *switch_on_schema

    - name: "conditional_colors_1"
      type: "expandable"
      title: "Conditional colors"
      icon: "mdi:tune"
      expanded: false
      schema:
        - *switch_off_schema
        - *switch_on_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

reserved for future changelogs