[JS+Editor Module] Dynamic Translucent Lighting Style

[FLYINORION123]

Dynamic Translucent Lighting Style

Version: v1.1.2
Creator: FLYINORION123

Important

Unsupported cards:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Select
• Separator
• Calendar

This module allows the user to select a light entity to dynamically change the background color and set the opacity (tested with Home Assistant default styling and visionOS theme).

The background opacity can be customized for the on and/or off states. The background color can also be customized for the off state. Please note that you must toggle the options to use the background color and opacity for the off state. Furthermore, just toggling the opacity will not do anything on its own, the "use_color_off" state must be turned on as well (set to true).

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

dynamic_translucent_lighting:
  light_entity: light.entity_name
  background_opacity: 25
  use_background_opacity_off: false
  background_opacity_off: 50
  use_color_off: false
  rgb_color_off:
    - 0
    - 0
    - 0

---

🧩 Get this Module

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

dynamic_translucent_lighting:
    name: "Dynamic Translucent Lighting Style"
    version: "v1.1.2"
    creator: "FLYINORION123"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1446"

    unsupported:
      - cover
      - climate
      - horizontal-buttons-stack
      - media-player
      - select
      - separator
      - calendar

    description: |
        This module allows the user to select a light entity to dynamically change the background color and set the opacity (tested with Home Assistant default styling and visionOS theme). 
        
        The background opacity can be customized for the on and/or off states. The background color can also be customized for the off state. Please note that you must toggle the options to use the background color and opacity for the off state. Furthermore, just toggling the opacity will not do anything on its own, the "use_color_off" state must be turned on as well (set to true). 
         
        Configure this module via the editor or in YAML, for example:
        <br><br>
        <code-block><pre>
        dynamic_translucent_lighting: 
            light_entity: light.entity_name
            background_opacity: 25
            use_background_opacity_off: false
            background_opacity_off: 50
            use_color_off: false
            rgb_color_off:
        </pre></code-block>

    code: |
        ${(() => {
          // Get entity state
          const light = hass?.states[this.config?.dynamic_translucent_lighting?.light_entity];  
        
          // Determine if light is on
          const isLightOn = light?.state === `on`;
        
          // Get use_background_opacity_off
          const useBackgroundOpacityOff = this.config?.dynamic_translucent_lighting?.use_background_opacity_off;
          
          // Get use_color_off state
          const useColorOff = this.config?.dynamic_translucent_lighting?.use_color_off;
        
          // Get RGB color values with fallback
          const rgbColorLight = light?.attributes?.rgb_color || [255, 210, 90];
          const rgbColorOff = this.config?.dynamic_translucent_lighting?.rgb_color_off || [0, 0, 0];
        
          // Get opacity value for On state
          const rawBackgroundOpacity = this.config?.dynamic_translucent_lighting?.background_opacity;
          const parsedBackgroundOpacity = parseFloat(rawBackgroundOpacity);
          // Default to 0.25, otherwise set backgroundOpacity
          const backgroundOpacity = isNaN(parsedBackgroundOpacity) ? 0.25 : Math.max(0, Math.min(1, parsedBackgroundOpacity / 100));
        
          // Get opacity value for Off state
          const rawBackgroundOpacityOff = this.config?.dynamic_translucent_lighting?.background_opacity_off;
          const parsedBackgroundOpacityOff = parseFloat(rawBackgroundOpacityOff);
          // Default to 0.25, otherwise set backgroundOpacityOff
          const backgroundOpacityOff = isNaN(parsedBackgroundOpacityOff) ? 0.5 : Math.max(0, Math.min(1, parsedBackgroundOpacityOff / 100));
        
          // Build rgba string for On state
          const rgbaColor = `rgba(${rgbColorLight[0]}, ${rgbColorLight[1]}, ${rgbColorLight[2]}, ${backgroundOpacity})`;
          // Build rgba string for Off state
          const rgbaColorOff = `rgba(${rgbColorOff[0]}, ${rgbColorOff[1]}, ${rgbColorOff[2]}, ${backgroundOpacityOff})`;
          // Build rgb string for Off state
          const rgbColorOffString = `rgb(${rgbColorOff[0]}, ${rgbColorOff[1]}, ${rgbColorOff[2]})`;
        
          return `
            .bubble-button-card-container {
              background: ${isLightOn ? rgbaColor : useColorOff && useBackgroundOpacityOff ? rgbaColorOff : useColorOff ? rgbColorOffString : '' } !important;
            }
          `;
        })()}

    editor:
      - type: expandable
        title: Light Entity (Required)
        icon: mdi:lightbulb
        schema:
          - name: light_entity
            label: Light Entity (Required)
            selector:
              entity:
                domain: light
            required: true
      - type: expandable
        title: Opacity %
        icon: mdi:circle-opacity
        schema:
          - name: background_opacity
            label: Background Opacity % (Optional)
            selector:
              number:
                min: 0
                max: 100
                step: 1
                mode: box
            default: 25
            required: false
          - name: use_background_opacity_off
            label: Use Background Opacity % - Off ("Use RGB Color - Off" must be On)
            selector:
              boolean: false
            default: false
            required: false
          - name: background_opacity_off
            label: Background Opacity % - Off (Optional)
            selector:
              number:
                min: 0
                max: 100
                step: 1
                mode: box
            default: 50
            required: false
      - type: expandable
        title: RGB Off
        icon: mdi:palette
        schema:
          - name: use_color_off
            label: Use RGB Color - Off
            selector:
              boolean: false
            default: false
            required: false
          - name: rgb_color_off
            label: RGB Color - Off (Optional)
            selector:
              color_rgb:
                - 0
                - 0
                - 0
            default:
              - 0
              - 0
              - 0
            required: false

---

Screenshot:

Example with Home Assistant default styling:

Example with visionOS theme: