Merging all light cards into an "all-in-one"

[schumijo]

Hi @basbruss,

What do you think about merging your custom light cards with default ones into an powerfull "all-in-one" card ?
We could have some variables to enable/disable functionnality :
ulm_card_light_slider_aio_enable_collapse: false
ulm_card_light_slider_aio_enable_slider: false
ulm_card_light_slider_aio_enable_horizontal: false
ulm_card_light_slider_aio_enable_color: false
ulm_card_light_slider_aio_enable_background_color: false

I already have something working except background 😉

Maybe other active developpers have an opinion ? @CM000n @sildehoop @bavo ?

If guys you are agree, I will share a PR in next days.

PS : I am still working on popup cards (media_player is coming) but I needed a "break" 🤣

[bavo]

Seems like the way to go.

I would prefer this much more instead of having 3 or 4 cards.

[sildehoop]

I have been thinking about thad too with the fan card but the only down side is thad you will get a lof of variables and I don't now what is better.

[sildehoop]

- type: 'custom:button-card'
  template:
    - custom_card_nas
  variables:
    ulm_custom_card_nas_sensor: sensor.pinas_disk_use

Requirements

n/a

Variables

Variable	Example	Required	Explanation
ulm_custom_card_nas_sensor	sensor.nas_disk_use	yes	The sensor that shows your sensor state, eg. the disk use on your NAS
ulm_custom_card_nas_text	HDD used	no	The text to show on your card
ulm_custom_cad_nas_unit	%	no	The unit to show after your sensors state

[sildehoop]

like this

[schumijo]

True this way you can make the base card simple and add optional variables.

That's the idea.
Without wariables, card_light (without slider) is displayed.
If you need to display slider, just add "ulm_card_light_slider_aio_enable_slider: true"

[bavo]

If you need to display slider, just add "ulm_card_light_slider_aio_enable_slider: true"

Yes, and then some extra variables to show vertical or on the side ...

[CM000n]

Yes, that would certainly be more user-friendly and intuitive than x different light cards.

[basbruss]

I do think that's the way to go. If you can upload your progress in a new branch @schumijo I will look into it and can make some adjustments. This will definitely lead to some breaking changes.

[schumijo]

@basbruss

My repo : https://github.com/schumijo/UI/tree/card_light_aio

Card name "card_light_slider_aio" is temporary. You can find the code at the end of button_card_templates.yaml.

To-do list :

• Background-color
• Legacy template for retro-compatibilty
• Maybe integrate icon-info and colorpick custom cards
• Clean code and names.

Variables list :

• ulm_card_light_slider_aio_enable_collapse => enable collapse slider
• ulm_card_light_slider_aio_enable_slider => enable slider
• ulm_card_light_slider_aio_enable_horizontal=> enable horizontal slider
• ulm_card_light_slider_aio_enable_color=> enable color slider + icon
• ulm_card_light_slider_aio_enable_background_color=> enable background color
• ulm_card_light_slider_aio_force_background_color=> force background color (maybe need to be adjust to match your ulm_card_light_mode variable)

[basbruss]

@schumijo
Do you also want the icon-info as a standard feature?

I will include the light/dark mode selector when color mode is on.

I also will look into the background color with a template based on the color-function of vertical_buttons_custom_state so people can also choose different colors instead of only yellow or the auto color based feature.

[schumijo]

About icon-info, I said maybe 😀
To be honest, I don't know if it should be included.
And moreover, cards with multiple items are a problem for popup cards. So I need to think about it.

About background color, I personnaly not a fan of multiple colors on the dashboard. 7ahang projet, which is originally tben's inspiration, only use blue color for background. But maybe community could be interested

[basbruss]

@schumijo I've altered your really nice work 😀 with the addition of the background-color, icon_variable, icon-info and changed ulm_card_light_slider_aio_force_background_color to ulm_card_light_slider_aio_enable_mode This has the same functions as my own custom cards.
Icon-info function can be removed by changing the template in item1. As I think it gives more easy control to the lights for the most of the users.

card_light_slider_aio:
  template:
    - "ulm_language_variables"
  variables:
    ulm_card_light_slider_aio_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_light_slider_aio_enable_collapse: false
    ulm_card_light_slider_aio_enable_slider: false
    ulm_card_light_slider_aio_enable_horizontal: false
    ulm_card_light_slider_aio_enable_color: false
    ulm_card_light_slider_aio_enable_background_color: false
    ulm_card_light_slider_aio_force_background_color: false
  show_icon: false
  show_name: false
  show_label: false
  state: 
    - value: "on"
      styles:
        card:
          - background-color: >
              [[[ 
                var mode = variables.ulm_card_light_slider_aio_enable_mode;
                var color = entity.attributes.rgb_color;
                if (variables.ulm_card_light_slider_aio_enable_background_color == true){  
                  if (mode != null){
                    if (mode == 'dark'){
                        if (color){
                          return 'rgba(' + color + ',0.1)'
                        } else{
                          return 'rgba(var(--color-yellow),0.1)'
                        }
                    } else if (mode == 'light'){
                      return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
                    }
                  } else {
                    if (states['sun.sun'].state == "below_horizon"){
                      if (color){
                        return 'rgba(' + color + ',0.1)'
                      } else{
                        return 'rgba(var(--color-yellow),0.1)'
                      }
                    } else if (states['sun.sun'].state == "above_horizon"){
                      return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
                    }
                  }
                } else {
                  return 'none';
                }
              ]]]
  styles:
    grid:
      - grid-template-areas: >
          [[[
                if (variables.ulm_card_light_slider_aio_enable_collapse && entity.state == "off") {
                    return "\"item1\"";
                } else if (variables.ulm_card_light_slider_aio_enable_horizontal) {
                    return "\"item1 item2\"";
                } else if (variables.ulm_card_light_slider_aio_enable_slider) {
                    return "\"item1\" \"item2\"";
                } else {
                    return "\"item1\"";
                }
          ]]]
      - grid-template-columns: >
          [[[
                if (variables.ulm_card_light_slider_aio_enable_collapse && entity.state == "off") {
                    return "1fr";
                } else if (variables.ulm_card_light_slider_aio_enable_horizontal) {
                    return "1fr 1fr";
                } else {
                    return "1fr";
                }
          ]]]
      - grid-template-rows: >
          [[[
                if (variables.ulm_card_light_slider_aio_enable_collapse && entity.state == "off") {
                    return "1fr";
                } else if (variables.ulm_card_light_slider_aio_enable_slider && !variables.ulm_card_light_slider_aio_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_slider_aio_enable_collapse && entity.state == "off") {
                      return "none";
                  } else if (variables.ulm_card_light_slider_aio_enable_slider) {
                      return "block";
                  } else {
                      return "none";
                  }
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_info_light"
        entity: "[[[ return entity.entity_id ]]]"
        variables:
          ulm_card_light_slider_aio_enable_mode: "[[[ return variables.ulm_card_light_slider_aio_enable_mode ]]]"
          ulm_card_light_slider_aio_name: "[[[ return variables.ulm_card_light_slider_aio_name ]]]"
          ulm_card_light_slider_aio_icon: "[[[ return variables.ulm_card_light_slider_aio_icon ]]]"
          ulm_card_light_slider_aio_enable_color: "[[[ return variables.ulm_card_light_slider_aio_enable_color ]]]"
        label: >-
          [[[
            if (entity.state !="unavailable"){
              if (entity.state =="off"){
                return variables.ulm_off;
              } else if (entity.state == "on"){
                if (entity.attributes.brightness != null){
                  var bri = Math.round(entity.attributes.brightness / 2.55);
                  return (bri ? bri : "0") + "%";
                } else {
                  return variables.ulm_on
                }
              }
            } else {
              return variables.ulm_unavailable;
            }
          ]]]
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - background: "none"
            - box-shadow: "none"
            - border-radius: "var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)"
            - padding: "0px"     
    item2:
      card:
        type: "custom:my-slider"
        entity: "[[[ return entity.entity_id ]]]"
        radius: "14px"
        height: "42px"
        mainSliderColor: >
          [[[
              var color = entity.attributes.rgb_color;
              if (entity.state == "unavailable"){
                 return "rgba(var(--color-grey),1)";
              }
              else if (color && variables.ulm_card_light_slider_aio_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_slider_aio_enable_color){
                 return "rgba(" + color + ",0.2)";
              }
              else{
                return "rgba(var(--color-yellow),0.2)";
              }
          ]]]
        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
        thumbHorizontalPadding: "0px"
        thumbVerticalPadding: "0px"
        thumbWidth: "0px"
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }
icon_info_light:
  template:
    - "list_items_light_color"
    - "ulm_language_variables"
  variables:
    ulm_card_light_slider_aio_enable_mode: "[[[ return variables.ulm_card_light_slider_aio_enable_mode ]]]"
    ulm_card_light_slider_aio_name: "[[[ return variables.ulm_card_light_slider_aio_name ]]]"
    ulm_card_light_slider_aio_icon: "[[[ return variables.ulm_card_light_slider_aio_icon ]]]"
    ulm_card_light_slider_aio_enable_color: "[[[ return variables.ulm_card_light_slider_aio_enable_color ]]]"
  show_icon: false
  show_name: false
  show_label: false
  styles:
    grid:
      - grid-template-columns: "min-content auto"
      - column-gap: "0px"
    card:
      - background-color: "rgba(0,0,0,0)"
  tap_action:
    action: "toggle"
  hold_action:
    action: "more-info"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        entity: "[[[ return entity.entity_id ]]]"
        variables:
          ulm_card_light_slider_aio_enable_color: "[[[ return variables.ulm_card_light_slider_aio_enable_color ]]]"
        template:
          - "icon"
          - "auto_color"
        icon: >
          [[[
            var icon = 'mdi:lightbulb';
              if (variables.ulm_card_light_slider_aio_icon != null){
                var icon = variables.ulm_card_light_slider_aio_icon;
              }
              else{
                return icon ;
              }
            return icon ;
          ]]]
        tap_action:
          action: "more-info"
    item2:
      card:
        type: "custom:button-card"
        entity: "[[[ return entity.entity_id ]]]"
        template:
          - "icon_info"
        show_icon: false
        label: >-
          [[[
            if (entity.state !='unavailable'){
              if (entity.state =='off'){
                return variables.ulm_off;
              } else if (entity.state == 'on'){
                if (entity.attributes.brightness != null){
                  var bri = Math.round(entity.attributes.brightness / 2.55);
                  return (bri ? bri : '0') + '%';
                } else {
                  return variables.ulm_on
                }
              }
            } else {
              return variables.ulm_unavailable;
            }
          ]]]
        name: "[[[ return variables.ulm_card_light_slider_aio_name ]]]"
        state:
          - value: "on"
            styles:
              label:
                - color: >
                    [[[
                      var mode = variables.ulm_card_light_slider_aio_enable_mode
                      var color = entity.attributes.rgb_color;
                      if (variables.ulm_card_light_slider_aio_enable_color == true){  
                        if (mode != null){
                          if (mode == 'dark'){
                              if (color){
                                return 'rgba(' + color + ',1)'
                              } else{
                                return 'rgba(var(--color-yellow-text),1)'
                              }
                          } else if (mode == 'light'){
                            return 'rgba(var(--color-yellow-text),1)';
                          }
                        } else {
                          if (states['sun.sun'].state == "below_horizon"){
                            if (color){
                              return 'rgba(' + color + ',1)'
                            } else{
                              return 'rgba(var(--color-yellow-text),1)'
                            }
                          } else if (states['sun.sun'].state == "above_horizon"){
                            return 'rgba(var(--color-yellow-text),1)';
                          }
                        }
                      } else {
                        return 'rgba(var(--color-yellow-text),1)';
                      }
                    ]]]
              name:
                - color: >
                    [[[
                      var mode = variables.ulm_card_light_slider_aio_enable_mode;
                      var color = entity.attributes.rgb_color;
                      if (variables.ulm_card_light_slider_aio_enable_color == true){  
                        if (mode != null){
                          if (mode == 'dark'){
                              if (color){
                                return 'rgba(' + color + ',1)'
                              } else{
                                return 'rgba(var(--color-yellow-text),1)'
                              }
                          } else if (mode == 'light'){
                            return 'rgba(var(--color-yellow-text),1)';
                          }
                        } else {
                          if (states['sun.sun'].state == "below_horizon"){
                            if (color){
                              return 'rgba(' + color + ',1)'
                            } else{
                              return 'rgba(var(--color-yellow-text),1)'
                            }
                          } else if (states['sun.sun'].state == "above_horizon"){
                            return 'rgba(var(--color-yellow-text),1)';
                          }
                        }
                      } else {
                        return 'rgba(var(--color-yellow-text),1)';
                      }
                    ]]]
        styles:
          card:
            - box-shadow: "none"
            - border-radius: "var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)"
            - padding: "6px"
            - margin-left: "-7px"
            - background-color: "rgba(0,0,0,0)"
        custom_fields:
        notification: >
          [[[
            if (entity.state ==".."){
              return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
            }
          ]]]
list_items_light_color:
  styles:
    card:
      - box-shadow: "none"
      - padding: "0px"
    grid:
      - grid-template-areas: "'item1 item2'"
      - grid-template-columns: "2fr 1fr"
      - grid-template-rows: "min-content"
      - column-gap: "7px"
auto_color:
  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_slider_aio_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_slider_aio_enable_color){
                return 'rgba(' + color + ',0.2)';
              }
              else{
                return 'rgba(var(--color-yellow),0.2)';
              }
          ]]]

[schumijo]

Thank you @basbruss
I will take a look because copy-paste break down my cards.
About ulm_card_light_slider_aio_enable_mode, I would prefer a true/false variable to make it easier to understand. I really think we could use true=dark and false=light

[schumijo]

@schumijo I achieved that function by combining icon and icon_info templates into icon_info_light. The templates needed for this light card are included in the code snippet above. I agree that it would be nice to add this to all cards. I can look if i can simplify and more standardize icon_info_light into a new template icon_more_info and to be interchangeable with the old icon_info template which is mostly used to show an icon and; label and name.

@basbruss That's exactly what I want to do

[basbruss]

@schumijo I've tried something out. This is the most general template I am able to create.

icon_more_info:
  show_icon: false
  show_name: false
  show_label: false
  template:
    - list_2_items
  styles:
    grid:
      - grid-template-columns: "min-content auto"
      - column-gap: "0px"
    card:
      - background-color: "rgba(0,0,0,0)"
  hold_action:
    action: "more-info"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        entity: "[[[ return entity.entity_id ]]]"
        template:
          - "icon"
        tap_action:
          action: "more-info"
    item2:
      card:
        type: "custom:button-card"
        show_icon: false
        entity: "[[[ return entity.entity_id ]]]"
        template:
          - "icon_info"
        styles:
          card:
            - border-radius: "21px 8px 8px 21px"
            - padding: "6px"
            - margin-left: "-6px"
            - background-color: "rgba(0,0,0,0)"
        custom_fields:

Then we only have to specify the icon, label and name in item1 and item2 respectively for each different type of card.
I already made it workable with your latests commits in the card_light_slider_aio card.

card_light_slider_aio:
  template:
    - "ulm_language_variables"
  variables:
    ulm_card_light_slider_aio_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_light_slider_aio_icon: '[[[ return "mdi:lightbulb" ]]]'
    ulm_card_light_slider_aio_enable_collapse: false
    ulm_card_light_slider_aio_enable_slider: false
    ulm_card_light_slider_aio_enable_horizontal: false
    ulm_card_light_slider_aio_enable_color: false
    ulm_card_light_slider_aio_enable_background_color: false
    ulm_card_light_slider_aio_force_background_color: 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_slider_aio_enable_background_color == true){  
                    if(variables.ulm_card_light_slider_aio_force_background_color == true){
                      if (color){
                        return 'rgba(' + color + ',0.1)'
                      } else {
                        return 'rgba(var(--color-yellow),0.1)'
                      }
                    } else {
                      if (states['sun.sun'].state == "below_horizon"){
                        if (color){
                          return 'rgba(' + color + ',0.1)'
                        } else {
                          return 'rgba(var(--color-yellow),0.1)'
                        }
                      }
                    }
                  }
                  return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
              ]]]
  styles:
    grid:
      - grid-template-areas: >
          [[[
                if (variables.ulm_card_light_slider_aio_enable_collapse && entity.state == "off") {
                    return "\"item1\"";
                } else if (variables.ulm_card_light_slider_aio_enable_horizontal) {
                    return "\"item1 item2\"";
                } else if (variables.ulm_card_light_slider_aio_enable_slider) {
                    return "\"item1\" \"item2\"";
                } else {
                    return "\"item1\"";
                }
          ]]]
      - grid-template-columns: >
          [[[
                if (variables.ulm_card_light_slider_aio_enable_collapse && entity.state == "off") {
                    return "1fr";
                } else if (variables.ulm_card_light_slider_aio_enable_horizontal) {
                    return "1fr 1fr";
                } else {
                    return "1fr";
                }
          ]]]
      - grid-template-rows: >
          [[[
                if (variables.ulm_card_light_slider_aio_enable_collapse && entity.state == "off") {
                    return "1fr";
                } else if (variables.ulm_card_light_slider_aio_enable_slider && !variables.ulm_card_light_slider_aio_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_slider_aio_enable_collapse && entity.state == "off") {
                      return "none";
                  } else if (variables.ulm_card_light_slider_aio_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_slider_aio_icon ]]]"
              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_slider_aio_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_slider_aio_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 ]]]"
              name: "[[[ return variables.ulm_card_light_slider_aio_name ]]]"
              label: >-
                [[[
                  if (entity.state !="unavailable"){
                    if (entity.state =="off"){
                      return variables.ulm_off;
                    } else if (entity.state == "on"){
                      if (entity.attributes.brightness != null){
                        var bri = Math.round(entity.attributes.brightness / 2.55);
                        return (bri ? bri : "0") + "%";
                      } else {
                        return variables.ulm_on
                      }
                    }
                  } else {
                    return variables.ulm_unavailable;
                  }
                ]]]
    item2:
      card:
        type: "custom:my-slider"
        entity: "[[[ return entity.entity_id ]]]"
        radius: "14px"
        height: "42px"
        mainSliderColor: >
          [[[
              var color = entity.attributes.rgb_color;
              if (entity.state == "unavailable"){
                 return "rgba(var(--color-grey),1)";
              }
              else if (color && variables.ulm_card_light_slider_aio_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_slider_aio_enable_color){
                 return "rgba(" + color + ",0.2)";
              }
              else{
                return "rgba(var(--color-yellow),0.2)";
              }
          ]]]
        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
        thumbHorizontalPadding: "0px"
        thumbVerticalPadding: "0px"
        thumbWidth: "0px"
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }

[basbruss]

Two small remarks: the name and label do not change of color in the 'dark-mode'; And the auto theme-mode (on sunset for most devices) is not anymore supported. As for now it's a boolean with true=dark and false=light while there are 3 possible scenarios for the GUI (auto, light or dark).

Edit:
I noticed that after sunset the background-color of the card also changes when ulm_card_light_slider_aio_force_background_color: false is applied. While I think the intention is to have always a white background if you choose false

[schumijo]

Hi @basbruss,

Thank you I will take a look to your code.
About name and label, you're right. I forgot it for default background and also colored background.

Tell me if I'm wrong, but with your card :

• auto = background color when below_horizon / white when above_horizon
• dark = force background color
• light = disable background color

And with my dev :

• auto = ulm_card_light_slider_aio_enable_background_color: true
• dark = ulm_card_light_slider_aio_enable_background_color: true + ulm_card_light_slider_aio_force_background_color
• light = ulm_card_light_slider_aio_enable_background_color: false

Am I crazy ? 🤣

[basbruss]

Ah I see. Didn't came to my mind that enable_background_color controls the light and auto mode instead of force_background_color. Sorry for the confusion 🤣
The PR I've send you fixes the colors for name and label.

[schumijo]

Hi @basbruss

PR merged. I think everything is ok now.
I am working on legacy template, but I can't get variable name working when not defined even with this code :

card_light_slider_collapse:
  template: "card_light_slider_aio"
  variables:
    ulm_card_light_slider_aio_enable_collapse: true
    ulm_card_light_slider_aio_enable_slider: true
    ulm_card_light_slider_aio_name: >
      [[[
            if (variables.ulm_card_light_slider_collapse_name) {
                return variables.ulm_card_light_slider_collapse_name;
            } else {
                return entity.attributes.friendly_name;
            }
      ]]]

Do you have an idea ?

@CM000n
We are nearly ready with this card.
But I think it can't be used by end user without documentation (we use a lot of true/false variables).
How can we proceeed ? (This card is not a custom but an improvement of default light cards)

[stokkie90]

@schumijo Base docs are in dev branch

I think it might be smart to extend: https://github.com/UI-Lovelace-Minimalist/UI/blob/dev/docs/usage/cards/light.md

Use as the header the card name so it will pop up on the right in the TOC

---
title: Lights
---

## All-in-One light card

foo bar

|variable|default|required|notes|
|----------|----------|------|------|
|name| | X | |
|background| `true` | X | Enable background |

Result

All-in-One light card

foo bar

variable	default	required	notes
name		X
background	true	X	Enable background

[schumijo]

@stokkie90
Ok I will try to produce something tomorrow

[schumijo]

PR #253 submitted

[CM000n]

Cool! Thank you very much. Will have a look on it later.
Do you need any help with the remaining code quality issues?
Meanwhile we have introduced also linting for our markdown files to have a consistent look of the documentation.

[schumijo]

Yes please I need help

[basbruss]

Hi @schumijo

As Saxel mentioned in #278 there seems to be way to get info from hass to determine which theme-mode is being used with hass.themes.darkMode == "true"
I will suggest to implement this in the card_light so users do not need to set 3 different variables based on the mode they use.
For instance we can only use ulm_card_light_enable_color and ulm_card_light_force_background_color.
Where ulm_card_light_enable_color: true enables the color mode based on the dashboards light or dark mode.
(lightMode only change of icon and slider and darkMode changes all objects)
And ulm_card_light_force_background_color: true also forces to change all objects in color in light mode.

[basbruss]

I've altered the code already in my own dev-branch. If you could review the changes it would be nice to merge it.
https://github.com/basbruss/UI/blob/dev/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml

[schumijo]

Hi @basbruss

Excellent finding to replace the test on sun position. But I don't understand what this change with variables usage 🤔
I take a look to your code and I don't understand why you removed ulm_card_light_enable_background_color variable ?

Few minutes ago, I created a PR to make popup light working with our light card #282 . Maybe it will create conflict with your changes.

[schumijo]

@basbruss
Thank you for popup enhancement. I was thinking about this but not sure what was the best solution. Let's go with yours because as you said, other popups work like this.
About light card, it means now we can't choose to enable or not background color in dark mode, that's it ? But in light mode, we can...

[basbruss]

Yes that's is totally correct 😄 Or do you want users also to be able to not change the background color in the dark mode?
I've just made a PR with all needed changes #283
We only need to update the documentation to be inline with the current improvements.

[schumijo]

I thought it was something interesting for users to let them customize the card

[basbruss]

I do agree that it's interesting to let users customize. But if we allow them to disable a colored background when in darkMode and color mode is on it's prone to get some ugly styling effects. This is due to the theme-file does change the default background color to yellow in darkMode as showed in the image below. With the one above showing the somewhat ugly styling effect.

[schumijo]

Hum interesting I don't have the same result in my configuration which is not up-to-date 🤣