Skip to content

Light Card

Description

Image title Image title Image title Image title

This is the light-card, used to toggle a light or a light group. Shows state of the light and, if available, brightness in %.

This documentation refers to the new "All in one" light card. This card merges the following one :

  • legacy card_light (the old one)
  • legacy card_light_slider
  • legacy card_light_slider_collapse
  • legacy card_light_slider_horizontal
  • custom card_light_color by basbruss
  • custom card_light_horizontal_color by basbruss
  • custom card_light_slider_color by basbruss
  • custom card_light_slider_collapse_color by basbruss

Warning

This card has backward compatibilty with older template except custom names and icons. It means variables like ulm_card_XXX_name and ulm_card_XXX_icon must be replaced by ulm_card_light_name and ulm_card_light_icon. To use popup_light you need to set the variable ulm_card_light_enable_popup to true. This is a different approach as the other popup_cards use.

Variables

Variable/Entity Default Required Notes Requirement
entity Your HA entity
ulm_card_light_name friendly_name Customize name
ulm_card_light_icon mdi:lightbulb Customize icon
ulm_card_light_enable_slider false Enable slider
ulm_card_light_enable_slider_minSet 0 Minimum brightness value user can select in the slider Need ulm_card_light_enable_slider: true
ulm_card_light_enable_slider_maxSet 100 Maximum brightness value user can select in the slider Need ulm_card_light_enable_slider: true
ulm_card_light_enable_collapse false Collapse slider when off Need ulm_card_light_enable_slider: true
ulm_card_light_enable_horizontal false Enable horizontal card
ulm_card_light_enable_horizontal_wide false Wider slider Need ulm_card_light_enable_horizontal: true
ulm_card_light_enable_color false Enable icon and label light color
ulm_card_light_force_background_color false Force background light color even in light theme
ulm_card_light_enable_popup false Enable popup_light
ulm_card_light_enable_popup_tap false Enable popup_light on simple icon tap

Usage

- type: "custom:button-card"
  template: card_light
  entity: light.allee
  variables:
    ulm_card_light_enable_slider: true
    ulm_card_light_enable_color: true
    ulm_card_light_force_background_color: true
Template Code
card_light.yaml
---
### Card Light ###
card_light:
  template:
    - "icon_more_info_new"
    - "ulm_actions_card"
    - "ulm_translation_engine"
  variables:
    ulm_card_light_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_light_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_light_enable_collapse: false
    ulm_card_light_enable_slider: false
    ulm_card_light_enable_slider_minSet: 0
    ulm_card_light_enable_slider_maxSet: 100
    ulm_card_light_enable_horizontal: false
    ulm_card_light_enable_horizontal_wide: false
    ulm_card_light_enable_color: false
    ulm_card_light_force_background_color: false
    ulm_card_light_enable_popup: false
    ulm_card_light_enable_popup_tap: false
  show_icon: false
  show_name: false
  show_label: false
  state:
    - value: "on"
      styles:
        card:
          - background-color: >-
              [[[
                  var color = entity.attributes.rgb_color;
                  if (variables.ulm_card_light_enable_color == true){
                    if(variables.ulm_card_light_force_background_color == true || hass.themes.darkMode){
                      if (color){
                        return 'rgba(' + color + ',0.1)'
                      } else {
                        return 'rgba(var(--color-yellow-text),0.1)'
                      }
                    }
                  }
                  return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
              ]]]
  styles:
    grid:
      - grid-template-areas: >
          [[[
                if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
                    return "\"item1\"";
                } else if (variables.ulm_card_light_enable_horizontal) {
                    return "\"item1 item2\"";
                } else if (variables.ulm_card_light_enable_slider) {
                    return "\"item1\" \"item2\"";
                } else {
                    return "\"item1\"";
                }
          ]]]
      - grid-template-columns: >
          [[[
                if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
                    return "1fr";
                } else if (variables.ulm_card_light_enable_horizontal) {
                  if(variables.ulm_card_light_enable_horizontal_wide){
                    return "1fr 2fr";
                    } else {
                      return "1fr 1fr";
                    }
                } else {
                    return "1fr";
                }
          ]]]
      - grid-template-rows: >
          [[[
                if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
                    return "1fr";
                } else if (variables.ulm_card_light_enable_slider && !variables.ulm_card_light_enable_horizontal) {
                    return "min-content min-content";
                } else {
                    return "1fr";
                }
          ]]]
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
    custom_fields:
      item2:
        - display: >
            [[[
                  if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
                      return "none";
                  } else if (variables.ulm_card_light_enable_slider) {
                      return "block";
                  } else {
                      return "none";
                  }
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "[[[ return variables.ulm_card_light_icon ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
                ulm_card_light_enable_popup: "[[[ return variables.ulm_card_light_enable_popup; ]]]"
              styles:
                icon:
                  - color: >
                      [[[
                          var color = entity.attributes.rgb_color;
                          if (entity.state != "on"){
                            return 'rgba(var(--color-theme),0.2)';
                          }
                          else if (color && variables.ulm_card_light_enable_color){
                            return 'rgba(' + color + ',1)'
                          }
                          else{
                            return 'rgba(var(--color-yellow),1)'
                          }
                      ]]]
                img_cell:
                  - background-color: >
                      [[[
                          var color = entity.attributes.rgb_color;
                          if (entity.state != "on"){
                            return 'rgba(var(--color-theme),0.05)';
                          }
                          else if (color && variables.ulm_card_light_enable_color){
                            return 'rgba(' + color + ',0.2)';
                          }
                          else{
                            return 'rgba(var(--color-yellow),0.2)';
                          }
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
                ulm_card_light_enable_popup: "[[[ return variables.ulm_card_light_enable_popup; ]]]"
              name: "[[[ return variables.ulm_card_light_name ]]]"
              label: >-
                [[[
                  var label = variables.ulm_translation_state
                    if (entity.attributes.brightness != null && entity.state === 'on'){
                      var bri = Math.round(entity.attributes.brightness / 2.55);
                      var label = (bri ? bri : "0") + "%";
                    }
                  return label;
                ]]]
              state:
                - value: "on"
                  styles:
                    name:
                      - color: >-
                          [[[
                              var color = entity.attributes.rgb_color;
                              if (variables.ulm_card_light_enable_color == true){
                                if(variables.ulm_card_light_force_background_color == true || hass.themes.darkMode){
                                  if (color){
                                    return 'rgba(' + color + ',1)'
                                  } else {
                                    return 'rgba(var(--color-yellow-text),1)'
                                  }
                                }
                              }
                              return 'rgba(var(--color-yellow-text),1)'
                          ]]]
                    label:
                      - color: >-
                          [[[
                              var color = entity.attributes.rgb_color;
                              if (variables.ulm_card_light_enable_color == true){
                                if(variables.ulm_card_light_force_background_color == true || hass.themes.darkMode){
                                  if (color){
                                    return 'rgba(' + color + ',1)'
                                  } else {
                                    return 'rgba(var(--color-yellow-text),1)'
                                  }
                                }
                              }
                              return 'rgba(var(--color-yellow-text),1)'
                          ]]]
    item2:
      card:
        type: "custom:my-slider"
        entity: "[[[ return entity.entity_id ]]]"
        radius: "14px"
        height: "42px"
        minSet: "[[[ return variables.ulm_card_light_enable_slider_minSet ]]]"
        maxSet: "[[[ return variables.ulm_card_light_enable_slider_maxSet ]]]"
        mainSliderColor: >
          [[[
              var color = entity.attributes.rgb_color;
              if (entity.state == "unavailable"){
                 return "rgba(var(--color-grey),1)";
              }
              else if (color && variables.ulm_card_light_enable_color){
                 return "rgba(" + color + ",1)";
              }
              else{
                return "rgba(var(--color-yellow),1)";
              }
          ]]]
        secondarySliderColor: >
          [[[
              var color = entity.attributes.rgb_color;
              if (entity.state == "unavailable"){
                 return "rgba(var(--color-grey),0.2)";
              }
              else if (color && variables.ulm_card_light_enable_color){
                 return "rgba(" + color + ",0.2)";
              }
              else{
                return "rgba(var(--color-yellow),0.2)";
              }
          ]]]
        thumbColor: >
          [[[
              var color = entity.attributes.rgb_color;
              if (entity.state == "unavailable"){
                 return "rgba(var(--color-grey),1)";
              }
              else if (color && variables.ulm_card_light_enable_color){
                 return "rgba(" + color + ",1)";
              }
              else{
                return "rgba(var(--color-yellow),1)";
              }
          ]]]
        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
        thumbHorizontalPadding: "0px"
        thumbVerticalPadding: "0px"
        thumbWidth: "12px"
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }