[JS+Editor Module] Dynamic light

[Quokka1979]

Dynamic lighting styling

Version: v1.0
Creator: Timmy

Important

Unsupported cards:

• horizontal-buttons-stack
• climate
• cover
• media-player

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

Required entities:
- A light entity (for RGB state and on/off status)
- An illuminance sensor (for ambient light levels)
Optional:
- A switch entity (as additional power state input)

dynamic_lighting:
  light_entity: light.lights_cinema
  illuminance_sensor: sensor.cinema_sensor_illuminance
  socket_entity: switch.cinema_socket

---

🧩 Get this Module

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

# Dynamic lighting styling
dynamic_lighting:
  name: "Dynamic lighting styling"
  version: "v1.0"
  creator: "Timmy"

  unsupported:
    - horizontal-buttons-stack
    - climate
    - cover
    - media-player

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

    Required entities:
    - A light entity (for RGB state and on/off status)
    - An illuminance sensor (for ambient light levels)
    Optional:
    - A switch entity (as additional power state input)

  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: socket_entity
          label: "Socket Entity (Optional)"
          selector:
            entity:
              domain: switch

  code: |
    ${(() => {
      // Get entity states
      const light = hass?.states[this.config?.dynamic_lighting?.light_entity];
      const illuminance = parseFloat(hass?.states[this.config?.dynamic_lighting?.illuminance_sensor]?.state || 0);
      const socket = this.config?.dynamic_lighting?.socket_entity ? 
        hass?.states[this.config.dynamic_lighting.socket_entity] : null;
      
      // Determine if light is on
      const isOn = light?.state === 'on' || socket?.state === 'on';
      
      // Get RGB color values with fallback
      const rgbColor = light?.attributes?.rgb_color || [255, 210, 90];

      // Helper function for illuminance-based colors
      const getIlluminanceColor = (ranges) => {
        for (const [max, color] of ranges) {
          if (illuminance <= max) return color;
        }
        return ranges[ranges.length - 1][1];
      };

      const illuminanceGradients = [
        [0, 'linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(10, 10, 10, 0.8))'],
        [10, 'linear-gradient(to bottom, rgba(20, 10, 5, 1), rgba(40, 20, 10, 0.8))'],
        [50, 'linear-gradient(to bottom, rgba(50, 25, 15, 1), rgba(100, 50, 30, 0.8))'],
        [200, 'linear-gradient(to bottom, rgba(120, 80, 40, 1), rgba(180, 120, 80, 0.8))'],
        [500, 'linear-gradient(to bottom, rgba(180, 140, 80, 1), rgba(220, 180, 120, 0.8))'],
        [1000, 'linear-gradient(to bottom, rgba(220, 200, 160, 1), rgba(240, 220, 200, 0.8))'],
        [5000, 'linear-gradient(to bottom, rgba(240, 240, 220, 1), rgba(255, 255, 240, 0.8))'],
        [10000, 'linear-gradient(to bottom, rgba(255, 255, 250, 1), rgba(255, 255, 255, 0.8))'],
        [Infinity, 'linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8))']
      ];

      const illuminanceBorders = [
        [0, 'rgba(50, 50, 50, 0.8)'],
        [10, 'rgba(80, 40, 20, 0.8)'],
        [50, 'rgba(120, 60, 40, 0.8)'],
        [200, 'rgba(160, 120, 80, 0.8)'],
        [500, 'rgba(200, 180, 140, 0.8)'],
        [1000, 'rgba(240, 220, 200, 0.8)'],
        [Infinity, 'rgba(200, 200, 200, 0.8)']
      ];

      const illuminanceText = [
        [0, 'rgba(255,235,205,1)'],
        [10, 'rgba(255, 220, 180, 1)'],
        [50, 'rgba(255, 230, 200, 1)'],
        [200, 'rgba(255, 255, 230, 1)'],
        [500, 'rgba(0, 0, 0, 1)'],
        [1000, 'rgba(0, 0, 0, 0.8)'],
        [10000, 'rgba(0, 0, 0, 0.6)'],
        [Infinity, 'rgba(0, 0, 0, 1)']
      ];

      return `
        .bubble-button-card-container {
          background: ${
            isOn 
              ? rgbColor
                ? `linear-gradient(
                    to bottom, 
                    rgba(${rgbColor.join(', ')}, 0.6),
                    rgba(${rgbColor.map(c => c * 0.5).join(', ')}, 0.6),
                    rgba(${rgbColor.map(c => c * 0.6).join(', ')}, 0.6))`
                : 'linear-gradient(to bottom, rgba(204, 168, 106, 0.8), rgba(150, 110, 50, 0.6), rgba(204, 168, 106, 0.8))'
              : getIlluminanceColor(illuminanceGradients)
          } !important;

          border: 4px solid ${
            isOn
              ? rgbColor 
                ? `rgba(${rgbColor.join(', ')}, 0.8)`
                : 'rgba(255, 210, 90, 0.8)'
              : getIlluminanceColor(illuminanceBorders)
          } !important;
          box-sizing: border-box;
        }

        .bubble-button-background {
          background: rgba(0,0,0,0) !important;
        }

        .bubble-icon {
          color: ${
            isOn 
              ? rgbColor
                ? `rgba(${rgbColor.map(c => c * 0.7).join(', ')}, 1)`
                : 'rgba(250, 180, 60, 0.9)'
              : getIlluminanceColor(illuminanceText)
          } !important;
        }

        .bubble-name {
          color: ${
            isOn
              ? 'rgba(255, 255, 255, 1)'
              : getIlluminanceColor(illuminanceText)
          } !important;
        }

        .bubble-icon-container {
          background: rgba(0, 0, 0, 0) !important;
        }
      `;
    })()}

---

Screenshot:

[Clooos]

Hi! Congratulation on your first modules! I don't know how you did that but you haven't followed the publication template correctly, can you try again for more consistency? Like this, it shouldn’t appears here:

[Quokka1979]

Sorry, missed that. It should be fine now.

[Clooos]

Much better! 😃