[Styling Module, JS Module, JS+Editor Module] Dynamic Temperature Icon Color

[elpopaaa]

Module post template

Version: 1.1
Creator: Adi

Important

Supported cards:

• Button
• Sub Buttons
• Select
• Horizontal Buttons Stack

Dynamically colors the icon of a temperature or humidity sensor card based on its current value, with configurable thresholds and colors. If no entity is selected in the module, it automatically falls back to the main entity of the card.

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

temp_icon_color: 
    target_entity: YOUR_VALUE

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into a /www/bubble/modules/temp_icon_color.yaml file.

temp_icon_color:
    name: "Dynamic Temperature Icon Color"
    version: "1.1"
    creator: "Adi"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button
        - sub-buttons
        - select
        - horizontal-buttons-stack

    description: |
        Dynamically colors the icon of a temperature or humidity sensor card based on its current value, with configurable thresholds and colors. If no entity is selected in the module, it automatically falls back to the main entity of the card.
        
        <br><br>
        <code-block><pre>
        temp_icon_color: 
            target_entity: YOUR_VALUE
        </pre></code-block>

    code: |
        .bubble-icon {
          color: ${
            (() => {
              const cfg = this.config.temp_icon_color;
              const entityId = cfg?.target_entity || this.config.entity;
              if (!entityId || !hass.states[entityId]) return 'var(--state-icon-color)';
              const current = parseFloat(hass.states[entityId].state);
              if (isNaN(current)) return 'var(--state-icon-color)';
              const useDefaults = cfg?.use_default_colors === true;
              const c_max  = (!useDefaults && cfg?.high_color) ? 'rgb(' + cfg.high_color.join(',') + ')' : 'rgb(255,200,0)';
              const c_min  = (!useDefaults && cfg?.min_color)  ? 'rgb(' + cfg.min_color.join(',') + ')'  : 'rgb(68,138,255)';
              const c_norm = (!useDefaults && cfg?.norm_color) ? 'rgb(' + cfg.norm_color.join(',') + ')' : 'rgb(102,187,106)';
              const t_max = cfg?.high_threshold !== undefined ? parseFloat(cfg.high_threshold) : 24;
              const t_min = cfg?.low_threshold  !== undefined ? parseFloat(cfg.low_threshold)  : 20;
              return current > t_max ? c_max : (current < t_min ? c_min : c_norm);
            })()
          } !important;
        }

    editor:
      - name: target_entity
        label: Sensor Entity (optional)
        description: >
          Leave empty to automatically use the main Entity field of the card. Set this
          only if the icon color should follow a different sensor than the one shown
          on the card.
        selector:
          entity: {}
      - name: use_default_colors
        label: Use default colors
        description: >
          Enable this to ignore any colors picked below and always use the built-in
          defaults (yellow/blue/green). Useful if a color picker got stuck on a manual
          value that cannot be cleared from the UI.
        selector:
          boolean: {}
        default: false
      - name: high_color
        label: Max Color (Warm / High Humidity)
        description: >-
          Default: Yellow/Orange (255, 200, 0), ignored if Use default colors is
          enabled
        selector:
          color_rgb: {}
        default:
          - 255
          - 82
          - 82
      - name: min_color
        label: Min Color (Cold / Dry Air)
        description: 'Default: Blue (68, 138, 255), ignored if Use default colors is enabled'
        selector:
          color_rgb: {}
        default:
          - 68
          - 138
          - 255
      - name: norm_color
        label: Normal Color (Comfort Range)
        description: 'Default: Green (102, 187, 106), ignored if Use default colors is enabled'
        selector:
          color_rgb: {}
        default:
          - 102
          - 187
          - 106
      - name: high_threshold
        label: High Threshold Alert Value
        description: Value above which the icon switches to Max Color.
        selector:
          number:
            min: 0
            max: 100
            step: 1
            mode: slider
        default: 24
      - name: low_threshold
        label: Low Threshold Alert Value
        description: Value below which the icon switches to Min Color.
        selector:
          number:
            min: 0
            max: 100
            step: 1
            mode: slider
        default: 20
      

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

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 ❤️