My wife wanted simple, minimal tapping, way to adjust the lights.
This is where we landed.
From this single card she can do literally everything she could possibly want with our lights. A big thing that she loves and hates is having Adaptive Lighting on when she wants to completely control things herself. A key to this designis her ability to turn it off if she wants.
type: custom:mod-card
card_mod:
style: |
ha-card {
background: var(--ha-card-background,var(--card-background-color,#fff));
box-shadow: var(--ha-card-box-shadow,none);
box-sizing: border-box;
border-radius: var(--ha-card-border-radius,12px);
border-width: var(--ha-card-border-width,1px);
border-style: solid;
border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
color: var(--primary-text-color);
display: block;
transition: all 0.3s ease-out 0s;
position: relative;
padding-bottom: 8px;
margin-bottom: 12px;
}
card:
type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 72px 72px
cards:
- type: custom:button-card
icon: mdi:silverware-fork-knife
label: Dining Room
show_label: true
show_icon: true
tap_action:
action: navigate
navigation_path: '#dining_room'
styles:
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: 12% auto
icon:
- width: 100%
- margin-top: '-2px'
card:
- background: none
- border: 0px
- margin: 0px
label:
- margin-top: '-2px'
- margin-left: 8px
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 24px
- type: tile
entity: switch.adaptive_lighting_dining_room
hide_state: true
vertical: false
name: ' '
icon: mdi:white-balance-sunny
card_mod:
style: |
ha-card {
margin-left: 26px;
border-width: 0px;
background: none;
margin-top: -8px;
}
- type: tile
entity: light.dining_room
hide_state: true
name: ' '
icon: mdi:power
card_mod:
style: |
ha-card {
margin-left: 8px;
border-width: 0px;
background: none;
margin-top: -8px;
}
- type: custom:mushroom-light-card
entity: light.dining_room
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
layout: horizontal
fill_container: false
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
border-width: 0px;
background: none;
margin-top: -16px;
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
border-width: 0px;
background: none;
margin-top: -4px;
margin-left: 10px;
}
chips:
- type: entity
entity: scene.dining_room_cool_bright
name: Bright
content_info: name
icon_color: white
tap_action:
action: toggle
- type: entity
entity: scene.dining_room_read
name: Read
content_info: name
icon_color: yellow
tap_action:
action: toggle
- type: entity
entity: scene.dining_room_relax
name: Relax
content_info: name
icon_color: amber
tap_action:
action: toggle
- type: entity
entity: scene.dining_room_rest
name: Rest
content_info: name
icon_color: accent
tap_action:
action: toggle
