[JS+Editor Module] Dynamic Text Color Styling

[Quokka1979]

#Dynamic Text Color Styling

Version: v 1.0
Creator: Timmy

This module provides dynamic text color styling based on light states and ambient illuminance levels.
Text colors adapt based on whether lights are on (white) or off (using illuminance sensor values for natural lighting effects).
You can select Sub-buttons (1-6) and the text from the Module get state/attribute from other entities.

Configure this module via the editor or in YAML.

Required entities:
- A light entity (for on/off status)
- An illuminance sensor (for ambient light levels)

dynamic_text_color:
  light_entity: light.lights_cinema
  illuminance_sensor: sensor.cinema_sensor_illuminance
  elements:
    state_display: true
    sub_buttons:
      - 1
      - 2
      - 3
      - 4
      - 5
      - 6

---

🧩 Get this Module

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

# Dynamic Text Color Styling
dynamic_text_color:
  name: "Dynamic Text Color Styling"
  version: "v1.0"
  creator: "Timmy"

  unsupported:
    - horizontal-buttons-stack
    - cover



  description: |
    This module provides dynamic text color styling based on light states and ambient illuminance levels.
    Text colors adapt based on whether lights are on (white) or off (using illuminance sensor values for natural lighting effects).

    Required entities:
    - A light entity (for on/off status)
    - An illuminance sensor (for ambient light levels)

    You can configure which elements should receive the dynamic coloring:
    - Sub-buttons (1-6)
    - Module get state/attribute from other entities

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

    dynamic_text_color:
      light_entity: light.lights_kitchen
      illuminance_sensor: sensor.kitchen_motion_illuminance
      elements:
        sub_buttons: [1, 3, 5]  # Apply to sub-buttons 1, 3, and 5
        state_display: true     # Apply to state display element

  code: |
    ${(() => {
      const light = hass?.states[this.config?.dynamic_text_color?.light_entity];
      const illuminance = parseFloat(hass?.states[this.config?.dynamic_text_color?.illuminance_sensor]?.state || 0);
      const elements = this.config?.dynamic_text_color?.elements || {};
      
      const isOn = light?.state === 'on';

      // Determine text color based on illuminance or light status
      let textColor;
      if (isOn) {
          textColor = 'rgba(255, 255, 255, 1)';
      } else {
          if (illuminance <= 0) {
              textColor = 'rgba(255, 255, 255, 1)';
          } else if (illuminance <= 10) {
              textColor = 'rgba(255, 220, 180, 1)';
          } else if (illuminance <= 50) {
              textColor = 'rgba(255, 230, 200, 1)';
          } else if (illuminance <= 200) {
              textColor = 'rgba(255, 255, 230, 1)';
          } else if (illuminance <= 500) {
              textColor = 'rgba(0, 0, 0, 1)';
          } else if (illuminance <= 1000) {
              textColor = 'rgba(0, 0, 0, 1)';
          } else if (illuminance <= 5000) {
              textColor = 'rgba(0, 0, 0, 1)';
          } else if (illuminance <= 10000) {
              textColor = 'rgba(0, 0, 0, 0.6)';
          } else {
              textColor = 'rgba(0, 0, 0, 1)';
          }
      }

      // Apply color to selected sub-buttons
      if (elements.sub_buttons) {
        const subButtons = Array.isArray(elements.sub_buttons) ? elements.sub_buttons : [];
        subButtons.forEach(num => {
          if (num >= 1 && num <= 6) {
            const subButton = card?.querySelector(`.bubble-sub-button-${num}`);
            if (subButton) {
              const nameContainer = subButton.querySelector('.bubble-sub-button-name-container');
              if (nameContainer) {
                nameContainer.style.color = textColor;
              }
            }
          }
        });
      }

      // Apply color to state display if enabled
      if (elements.state_display) {
        const stateElement = card?.querySelector('.bubble-state.state.display-state');
        if (stateElement) {
          stateElement.style.color = textColor;
        }
      }

      return '';  // No CSS needed as we're applying styles directly to elements
    })()}

  editor:
    - type: expandable
      title: "Entity Configuration"
      icon: "mdi:cog"
      schema:
        - name: light_entity
          label: "Light Entity (Required)"
          selector:
            entity:
              domain: light
          required: true
        - name: illuminance_sensor
          label: "Illuminance Sensor (Required)"
          selector:
            entity:
              device_class: illuminance
          required: true
        - name: elements
          type: grid
          schema:
            - name: sub_buttons
              label: "Sub-buttons to Style"
              selector:
                select:
                  multiple: true
                  options:
                    - label: "Sub-button 1"
                      value: 1
                    - label: "Sub-button 2"
                      value: 2
                    - label: "Sub-button 3"
                      value: 3
                    - label: "Sub-button 4"
                      value: 4
                    - label: "Sub-button 5"
                      value: 5
                    - label: "Sub-button 6"
                      value: 6
            - name: state_display
              label: "Module get state/attribute"
              selector:
                boolean: {}

---

Screenshot: