Lights card inspired by IKEA Home Smart app (sliders, folding and header toggle!) - now with smart dimming too!

Lights card inspired by IKEA Home Smart (sliders, folding and header toggle!)
image image

I’ve been trying to mimic the UI in the IKEA Home Smart app, consider this my Home Assistant take on it. While this one looks simple, it actually solves a few things that turned out to be really hard to do:

  • The header toggle of the entities card toggles all the lights within the fold-entity-row
  • Full width slider and icon in the slider-entity-row
  • No left padding on the entities within the fold-entity-row
  • Increased touch area on the folding chevron for a better mobile experience

Getting the header toggle to control the lights below the fold was probably the biggest halleluja moment. I created a light group and added that as an entity to the entities card… and then thanks to card-mod I made it invisible, poof! :mage:

Using this approach I think you could make the header toggle control anything you want without having to display that entity.

This still creates a bit of space in the card but that was adjusted by setting less padding on the header.


Lovelace YAML:

type: vertical-stack
title: Lights
  - type: entities
    state_color: true
    title: Office
    icon: mdi:desk
    show_header_toggle: true
      style: |
        ha-card h1 {
          font-size: 20px;
          padding-bottom: 0px;
      - entity: light.office_lights
        style: |
          :host { display: none; } 
      - type: custom:fold-entity-row
          style: |
              :host div#items {
                margin-left: -24px;
              :host ha-icon {
                padding: 12px;
          entity: light.office_lights
          type: custom:slider-entity-row
          full_row: false
          hide_state: true
            hui-generic-entity-row$: |
                display: none;
            hui-generic-entity-row: |
              div>ha-slider:not(.full) {
                 max-width: none;
          - entity: light.office_top_corner
            type: custom:slider-entity-row
            toggle: true
            name: Top corner
            step: 1
          - entity: light.office_spotlights
            type: custom:slider-entity-row
            toggle: true
            name: Spotlights
            step: 1
          - entity: light.office_desk_lamp
            type: custom:slider-entity-row
            toggle: true
            name: Desk lamp
            step: 1


# Light groups 
  - platform: group
    name: Office lights
      - light.office_top_corner
      - light.office_spotlights
      - light.office_desk_lamp 

Since this is just a bunch of hacks thrown together, beware that this might break at any point!


Thanks to my findings over here, I am now myself using a light template + group instead of a light group to achieve smart relative dimming :nerd_face:

Screen Recording 2022-03-06 at 10.48.09

To achieve this, set up the template light as per my other post and then replace the references to the light group light.office_lights so it references the template light instead (in my case light.office_lights_smart).

1 Like