Lights card inspired by IKEA Home Smart (sliders, folding and header toggle!)
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! 
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.
Requirements:
Lovelace YAML:
type: vertical-stack
title: Lights
cards:
- type: entities
state_color: true
title: Office
icon: mdi:desk
show_header_toggle: true
card_mod:
style: |
ha-card h1 {
font-size: 20px;
padding-bottom: 0px;
}
entities:
- entity: light.office_lights
style: |
:host { display: none; }
- type: custom:fold-entity-row
card_mod:
style: |
:host div#items {
margin-left: -24px;
}
:host ha-icon {
padding: 12px;
}
head:
entity: light.office_lights
type: custom:slider-entity-row
full_row: false
hide_state: true
style:
hui-generic-entity-row$: |
div.info.pointer.text-content {
display: none;
}
hui-generic-entity-row: |
div>ha-slider:not(.full) {
max-width: none;
}
entities:
- 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
configuration.yaml
# Light groups
light:
- platform: group
name: Office lights
entities:
- 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!
