This is really great! Thanks for the inspiration!
Is it possible that you could post the scripts that you are using for your vacuum? Selecting multiple zones and pressing start sounds really handy and cleaver.
1 Like
Here you go.
---
rounded:
########################################################
############### Default global variables ###############
########################################################
# Spacings and radius
horizontal-stack-card-margin: 0px 8px
vertical-stack-card-margin: 8px 0px
grid-card-gap: 16px
ha-card-border-width: "0px" # Removes default 1px line
ha-card-border-radius: 24px
masonry-view-card-margin: 40px 20px
# Main Interface Colors
primary-color: var(--blue)
accent-color: var(--blue)
primary-background-color: var(--contrast1)
secondary-background-color: var(--contrast2)
divider-color: var(--contrast3)
# Text
primary-text-color: var(--contrast20)
secondary-text-color: var(--contrast9)
text-primary-color: var(--contrast20)
disabled-text-color: var(--contrast6)
text-accent-color: var(--contrast1)
# Header:
app-header-background-color: var(--contrast1)
app-header-text-color: var(--contrast20)
app-header-selection-bar-color: transparant
app-header-edit-background-color: var(--contrast2)
app-header-edit-text-color: var(--contrast20)
# Cards
card-background-color: var(--contrast2)
ha-card-background: var(--contrast2)
ha-card-border-color: var(--contrast6)
paper-listbox-background-color: var(--contrast3)
# Tile card
state-unavailable-color: var(--contrast6)
state-light-off-color: var(--contrast10)
state-light-on-color: var(--yellow)
# Sidebar Menu
sidebar-icon-color: var(--contrast6)
sidebar-text-color: var(--contrast20)
sidebar-background-color: var(--contrast2)
sidebar-selected-icon-color: var(--blue)
sidebar-selected-text-color: var(--blue)
# Buttons
paper-item-icon-color: var(--contrast9)
mdc-button-outline-color: var(--contrast6)
# States and Badges
state-icon-color: var(--contrast9)
# Sliders
paper-slider-knob-color: var(--contrast20)
paper-slider-knob-start-color: var(--contrast15)
paper-slider-pin-color: var(--contrast5)
paper-slider-pin-start-color: var(--contrast4)
paper-slider-active-color: var(--contrast15)
paper-slider-secondary-color: var(--contrast7)
paper-slider-container-color: var(--contrast5)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--green)
switch-unchecked-button-color: var(--contrast9)
switch-unchecked-track-color: var(--contrast6)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--contrast2)
table-row-alternative-background-color: var(--contrast3)
data-table-background-color: var(--contrast1)
mdc-text-field-fill-color: var(--contrast3)
# Input
input-fill-color: var(--contrast3)
input-dropdown-icon-color: var(--contrast9)
material-background-color: var(--contrast2)
material-secondary-background-color: red
input-ink-color: var(--contrast20)
input-label-ink-color: var(--contrast9)
input-idle-line-color: var(--contrast7)
input-hover-line-color: var(--contrast20)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--input-idle-line-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-disabled-fill-color: var(--contrast3)
# Modal screen
mdc-theme-surface: var(--contrast2)
# Checkboxes
mdc-checkbox-unchecked-color: var(--contrast15)
# Colors
orange-color: var(--orange)
green-color: var(--green)
blue-color: var(--blue)
red-color: var(--red)
purple-color: var(--purple)
yellow-color: var(--yellow)
grey-color: var(--contrast10)
#######################################################
############### Custom global variables ###############
#######################################################
# Black / White
black: "#000000"
white: "#FFFFFF"
# Colors
purple: rgb(var(--purple-rgb))
yellow: rgb(var(--yellow-rgb))
orange: rgb(var(--orange-rgb))
red: rgb(var(--red-rgb))
green: rgb(var(--green-rgb))
blue: rgb(var(--blue-rgb))
# Color tints
purple-tint: rgba(var(--purple-rgb),var(--color-tint))
yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
orange-tint: rgba(var(--orange-rgb),var(--color-tint))
red-tint: rgba(var(--red-rgb),var(--color-tint))
green-tint: rgba(var(--green-rgb),var(--color-tint))
blue-tint: rgba(var(--blue-rgb),var(--color-tint))
# Gradients
brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
# Color RGB variables
purple-rgb: 239, 177, 255
yellow-rgb: 255, 218, 120
orange-rgb: 255, 181, 129
red-rgb: 255, 145, 138
green-rgb: 206, 245, 149
blue-rgb: 144, 191, 255
# Gradient RGB variables
brightness-low-rgb: 232, 176, 29
brightness-high-rgb: 255, 211, 94
temperature-low-rgb: 177, 197, 255
temperature-high-rgb: 255, 175, 131
# Contrast variables
black1: "#000000"
black2: "#111318"
black3: "#171A21"
black4: "#1C1F27"
black5: "#262A35"
black6: "#353946"
black7: "#434856"
black8: "#535865"
black9: "#636774"
black10: "#777A83"
white10: "#898C94"
white9: "#969AA6"
white8: "#A4A9B6"
white7: "#B3B8C6"
white6: "#C3C8D5"
white5: "#D4D8E2"
white4: "#E1E5EF"
white3: "#EAEDF6"
white2: "#F4F6FB"
white1: "#FFFFFF"
########################################################
############### Variables based on modes ###############
########################################################
modes:
dark:
# Black white contrats
contrast1: var(--black1)
contrast2: var(--black2)
contrast3: var(--black3)
contrast4: var(--black4)
contrast5: var(--black5)
contrast6: var(--black6)
contrast7: var(--black7)
contrast8: var(--black8)
contrast9: var(--black9)
contrast10: var(--black10)
contrast11: var(--white10)
contrast12: var(--white9)
contrast13: var(--white8)
contrast14: var(--white7)
contrast15: var(--white6)
contrast16: var(--white5)
contrast17: var(--white4)
contrast18: var(--white3)
contrast19: var(--white2)
contrast20: var(--white1)
# Color tint transparancy
color-tint: "0.15"
# Contrast RGB variables
contrast1-RGB: 0,0,0
light:
# Black white contrats
contrast1: var(--white1)
contrast2: var(--white2)
contrast3: var(--white3)
contrast4: var(--white4)
contrast5: var(--white5)
contrast6: var(--white6)
contrast7: var(--white7)
contrast8: var(--white8)
contrast9: var(--white9)
contrast10: var(--white10)
contrast11: var(--black10)
contrast12: var(--black9)
contrast13: var(--black8)
contrast14: var(--black7)
contrast15: var(--black6)
contrast16: var(--black5)
contrast17: var(--black4)
contrast18: var(--black3)
contrast19: var(--black2)
contrast20: var(--black1)
# Color tint transparancy
color-tint: "0.20"
# Contrast RGB variables
contrast1-RGB: 255,255,255
card-mod-theme: "rounded"
card-mod-view-yaml: |
hui-masonry-view:
$: |
/* Swipe-card full width on mobile */
@media screen and (max-width: 599px) {
#columns .column swipe-card {
margin-left: -4px;
margin-right: -4px;
}
}
ha-fab {
margin-bottom: 80px;
}
.: |
/* Correct spaces top and bottom for bottom tabbar */
hui-view {
padding-bottom: 80px;
margin-top: -80px;
}
card-mod-card-yaml: |
.: |
/* General changes */
ha-card {
transition: none !important;
font-family: 'custom font, otherwise remove this line', 'Roboto', sans-serif !important;
}
/* Graph card style */
.graph {
background: var(--blue-tint);
display: flex;
overflow: hidden; /* Temporary fix for graph overflow bug */
}
.graph .name {
font-size: 12px;
line-height: 18px;
background: var(--black);
color: var(--white);
padding: 6px 10px;
border-radius: 100px;
z-index: 1;
}
.graph .icon {
display: none;
}
.graph .info {
margin-top: 0;
padding: 24px 24px 0 24px;
order: 1;
}
.graph hui-graph-header-footer {
order: 3;
}
.graph .header {
padding: 0 24px;
order: 2;
margin: 4px 0 -16px 0;
z-index: 1;
}
card-mod-root: |
/* ___________ Bottom tabbar ___________ */
app-header {
top: auto;
bottom: 0;
transform: translate3d(0px, 0px, 0px) !important;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
-moz-backdrop-filter: blur(50px);
-o-backdrop-filter: blur(50px);
-ms-backdrop-filter: blur(50px);
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
app-header::before {
box-shadow: none;
height: 20px;
bottom: -20px;
}
app-toolbar {
height: 80px !important;
padding: 4px 8px 20px 8px;
background-color: rgba(0,0,0,0) !important;
}
app-header div[sticky] {
margin: -20px 0 20px 0 !important;
transform: none !important;
}
ha-tabs, ha-menu-button, ha-button-menu {
color: var(--contrast20);
}
ha-tabs, paper-tabs {
--paper-tabs-selection-bar-color: none !important;
}
paper-tab {
opacity: 0.4;
border-radius: 16px;
}
paper-tab.iron-selected {
opacity: 1;
}
@Loony1 Have not allot of time but this will work, only thing that need to be changed is the slider color so will check that later.
type: custom:button-card
name: Desk
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.desk
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: "[[[ return entity.entity_id ]]]"
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: In case of a custom font, otherwise you can remove this line
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ')'
}
else{
return 'var(--yellow)'
}
]]]
icon:
- color: var(--black)
name:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
5 Likes
Thank you!!
@StickyClient Thanks a lot for the addition! If you’re fine with it I can add the colored light card version to the main post?
I’ve also fixed some small tweaks in theme yaml (removed / tweaked some old leftover code) so here’s the updated complete yaml file @freibiergesicht @CM000n
Complete Rounded.yaml file - Updated for HA version 2023.4
This is including the bottom bar from the ‘Beta stuff’ section
Rounded:
########################################################
############### Default global variables ###############
########################################################
# Spacings and radius
horizontal-stack-card-margin: 0px 8px
vertical-stack-card-margin: 8px 0px
grid-card-gap: 16px
ha-card-border-width: "0px" # Removes default 1px line
ha-card-border-radius: 24px
masonry-view-card-margin: 40px 20px
# Main Interface Colors
primary-color: var(--blue)
accent-color: var(--blue)
primary-background-color: var(--contrast1)
secondary-background-color: var(--contrast2)
divider-color: var(--contrast3)
# Text
primary-text-color: var(--contrast20)
secondary-text-color: var(--contrast9)
text-primary-color: var(--contrast20)
disabled-text-color: var(--contrast6)
text-accent-color: var(--contrast1)
# Header:
app-header-background-color: var(--contrast1)
app-header-text-color: var(--contrast20)
app-header-selection-bar-color: transparant
app-header-edit-background-color: var(--contrast2)
app-header-edit-text-color: var(--contrast20)
# Cards
card-background-color: var(--contrast2)
ha-card-background: var(--contrast2)
ha-card-border-color: var(--contrast6)
paper-listbox-background-color: var(--contrast3)
# Tile card
state-unavailable-color: var(--contrast6)
state-light-off-color: var(--contrast10)
state-light-on-color: var(--yellow)
# Sidebar Menu
sidebar-icon-color: var(--contrast6)
sidebar-text-color: var(--contrast20)
sidebar-background-color: var(--contrast2)
sidebar-selected-icon-color: var(--blue)
sidebar-selected-text-color: var(--blue)
# Buttons
paper-item-icon-color: var(--contrast9)
mdc-button-outline-color: var(--contrast6)
# States and Badges
state-icon-color: var(--contrast9)
# Sliders
paper-slider-knob-color: var(--contrast20)
paper-slider-knob-start-color: var(--contrast15)
paper-slider-pin-color: var(--contrast5)
paper-slider-pin-start-color: var(--contrast4)
paper-slider-active-color: var(--contrast15)
paper-slider-secondary-color: var(--contrast7)
paper-slider-container-color: var(--contrast5)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--green)
switch-unchecked-button-color: var(--contrast9)
switch-unchecked-track-color: var(--contrast6)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--contrast2)
table-row-alternative-background-color: var(--contrast3)
data-table-background-color: var(--contrast1)
mdc-text-field-fill-color: var(--contrast3)
# Input
input-fill-color: var(--contrast3)
input-dropdown-icon-color: var(--contrast9)
material-background-color: var(--contrast2)
input-ink-color: var(--contrast20)
input-label-ink-color: var(--contrast9)
input-idle-line-color: var(--contrast7)
input-hover-line-color: var(--contrast20)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--input-idle-line-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-disabled-fill-color: var(--contrast3)
# Modal screen
mdc-theme-surface: var(--contrast2)
# Checkboxes
mdc-checkbox-unchecked-color: var(--contrast15)
# Colors
orange-color: var(--orange)
green-color: var(--green)
blue-color: var(--blue)
red-color: var(--red)
purple-color: var(--purple)
yellow-color: var(--yellow)
grey-color: var(--contrast10)
#######################################################
############### Custom global variables ###############
#######################################################
# Black / White
black: "#000000"
white: "#FFFFFF"
# Colors
purple: rgb(var(--purple-rgb))
yellow: rgb(var(--yellow-rgb))
orange: rgb(var(--orange-rgb))
red: rgb(var(--red-rgb))
green: rgb(var(--green-rgb))
blue: rgb(var(--blue-rgb))
# Color tints
purple-tint: rgba(var(--purple-rgb),var(--color-tint))
yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
orange-tint: rgba(var(--orange-rgb),var(--color-tint))
red-tint: rgba(var(--red-rgb),var(--color-tint))
green-tint: rgba(var(--green-rgb),var(--color-tint))
blue-tint: rgba(var(--blue-rgb),var(--color-tint))
# Gradients
brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
# Color RGB variables
purple-rgb: 239, 177, 255
yellow-rgb: 255, 218, 120
orange-rgb: 255, 181, 129
red-rgb: 255, 145, 138
green-rgb: 206, 245, 149
blue-rgb: 144, 191, 255
# Gradient RGB variables
brightness-low-rgb: 232, 176, 29
brightness-high-rgb: 255, 211, 94
temperature-low-rgb: 177, 197, 255
temperature-high-rgb: 255, 175, 131
# Contrast variables
black1: "#000000"
black2: "#111318"
black3: "#171A21"
black4: "#1C1F27"
black5: "#262A35"
black6: "#353946"
black7: "#434856"
black8: "#535865"
black9: "#636774"
black10: "#777A83"
white10: "#898C94"
white9: "#969AA6"
white8: "#A4A9B6"
white7: "#B3B8C6"
white6: "#C3C8D5"
white5: "#D4D8E2"
white4: "#E1E5EF"
white3: "#EAEDF6"
white2: "#F4F6FB"
white1: "#FFFFFF"
########################################################
############### Variables based on modes ###############
########################################################
modes:
dark:
# Black white contrats
contrast1: var(--black1)
contrast2: var(--black2)
contrast3: var(--black3)
contrast4: var(--black4)
contrast5: var(--black5)
contrast6: var(--black6)
contrast7: var(--black7)
contrast8: var(--black8)
contrast9: var(--black9)
contrast10: var(--black10)
contrast11: var(--white10)
contrast12: var(--white9)
contrast13: var(--white8)
contrast14: var(--white7)
contrast15: var(--white6)
contrast16: var(--white5)
contrast17: var(--white4)
contrast18: var(--white3)
contrast19: var(--white2)
contrast20: var(--white1)
# Color tint transparancy
color-tint: "0.15"
# Contrast RGB variables
contrast1-RGB: 0,0,0
light:
# Black white contrats
contrast1: var(--white1)
contrast2: var(--white2)
contrast3: var(--white3)
contrast4: var(--white4)
contrast5: var(--white5)
contrast6: var(--white6)
contrast7: var(--white7)
contrast8: var(--white8)
contrast9: var(--white9)
contrast10: var(--white10)
contrast11: var(--black10)
contrast12: var(--black9)
contrast13: var(--black8)
contrast14: var(--black7)
contrast15: var(--black6)
contrast16: var(--black5)
contrast17: var(--black4)
contrast18: var(--black3)
contrast19: var(--black2)
contrast20: var(--black1)
# Color tint transparancy
color-tint: "0.20"
# Contrast RGB variables
contrast1-RGB: 255,255,255
card-mod-theme: Rounded
card-mod-root-yaml: |
.: |
/* ___________ Bottom tabbar ___________ */
#view {
margin-top: 0 !important;
}
.header {
top: auto !important;
bottom: 0;
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: 80px !important;
padding: 4px 4px 16px 4px !important;
}
paper-tab {
color: var(--contrast10);
border-radius: 16px;
}
paper-tab.iron-selected {
color: var(--contrast20);
}
ha-menu-button, ha-button-menu {
color: var(--contrast10);
}
card-mod-view-yaml: |
hui-masonry-view:
$: |
/* Swipecard full width on mobile */
@media screen and (max-width: 599px) {
#columns .column swipe-card {
margin-left: -4px;
margin-right: -4px;
}
}
card-mod-card-yaml: |
.: |
/* General changes */
ha-card {
transition: none !important;
font-family: 'hk nova semibold', 'Roboto', 'Noto', sans-serif !important;
}
/* Vacuum card load transition disabled */
.type-custom-xiaomi-vacuum-map-card {
transition: none !important;
}
/* Graph card style */
.graph {
background: var(--blue-tint);
display: flex;
overflow: hidden; /* Temporary fix for graph overflow bug */
}
.graph .name {
font-size: 12px;
line-height: 18px;
background: var(--black);
color: var(--white);
padding: 6px 10px;
border-radius: 100px;
z-index: 1;
}
.graph .icon {
display: none;
}
.graph .info {
margin-top: 0;
padding: 24px 24px 0 24px;
order: 1;
}
.graph hui-graph-header-footer {
order: 3;
}
.graph .header {
padding: 0 24px;
order: 2;
margin: 4px 0 -16px 0;
z-index: 1;
}
/* Entities card style */
.type-entities {
background: none;
}
.type-entities .card-header {
padding: 0 0 12px 0;
}
.type-entities .card-content {
padding: 0;
}
card-mod-row: |
/* Entities card row style */
:host {
display: block;
background: var(--contrast2);
border-radius: 24px;
padding: 6px 12px 6px 6px;
}
6 Likes
Sure, take everything you need. 
@LE0N Do you have a colored light that supports attributes rgb_color? If yes can you test this card to see if the slider also works wen changing color. Btw, the main yellow color in HA is RGB 255, 193, 7 or HEX #ffc540.
type: custom:button-card
name: Desk
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.desk
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: "[[[ return entity.entity_id ]]]"
colorMode: brightness
intermediate: true #Instant updates the brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast4)';
}
else if (color){
return 'linear-gradient(90deg, rgba(' + color + ',0.3) 0%, rgba(' + color + ',1) 100%)'
}
else{
return 'linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)'
}
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: In case of a custom font, otherwise you can remove this line
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ',1)'
}
else{
return 'var(--yellow)'
}
]]]
icon:
- color: var(--black)
name:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
1 Like
@agoberg2 Sure thing! I have defined 6 vacuum sections as follows:
- Living room
- Kitchen (part of living room)
- Rug (part of living room)
- Bedroom
- Study
- Hallway
For each of these sections, I have created a toggle helper (which the custom button-cards toggle) and when the start button is pressed, a script is activated.
Essentially, the script is just a call-service to the vacuum, but depending on which section is toggled, it sends over different parameters in an array. If no section is selected, the script sends over an empty array which the vacuum translates to ‘vacuum everything’, which is perfect for my use case.
Each time the script is run, it also resets the “number of repetitions” input helper back to 1.
Here’s the complete code of the script:
alias: Selectie stofzuigen
icon: mdi:robot-vacuum
sequence:
- service: vacuum.send_command
target:
device_id: 706c3120ce0571b7d9094a1e359da416
data:
command: app_zoned_clean
params: >-
[{%if states.input_boolean.woonkamer_keuken_robotstofzuiger_selecteren_voor_stofzuigen.state=='on'%}
[22300,29400,28400,31000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
{%endif%}
{%if states.input_boolean.woonkamer_vloerkleed_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
[25900,26100,27200,28000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
{%endif%}
{%if states.input_boolean.woonkamer_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
[22300,24400,28400,31000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
{%endif%}
{%if states.input_boolean.gang_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
[15650,28120,22300,31000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],[15650,27900,18530,28110,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],{%endif%}
{%if states.input_boolean.studeerkamer_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
[15990,25060,18530,27900,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
{%endif%}
{%if states.input_boolean.slaapkamer_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
[22000,25060,18530,28120,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
{%endif%}]
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.gang_robotstofzuiger_selecteren_voor_stofzuigen
- input_boolean.slaapkamer_robotstofzuiger_selecteren_voor_stofzuigen
- input_boolean.studeerkamer_robotstofzuiger_selecteren_voor_stofzuigen
- input_boolean.woonkamer_keuken_robotstofzuiger_selecteren_voor_stofzuigen
- input_boolean.woonkamer_robotstofzuiger_selecteren_voor_stofzuigen
- input_boolean.woonkamer_vloerkleed_robotstofzuiger_selecteren_voor_stofzuigen
data: {}
- service: input_number.set_value
data:
value: 1
target:
entity_id: input_number.algemeen_robotstofzuiger_zone_herhalingen
mode: single
1 Like
@StickyClient Unfortunately I do not, so if anyone can double check this that would be awesome! I’ve also included your original code to the main post btw.
1 Like
I also added intermediate: true so the brightness will instant change instead of updating the brightness wen you stop moving the slider. This behaviour is also default for the new UI light slider that was added in the latest core update.
1 Like
This dashboard is awesome, and I’ve already managed to make some tweaks to fit my needs 
I have a question though, how did you get your custom font to work? The font I want to use isn’t a google font, and most of the guides I’ve found only use google fonts.
Hi Leon!
Thank you for this awsome theme. I started right away when i saw this!!
However, can you please post the code from youre light section? You use grid cards but how did you do this in combination with the slider / button card?
@LE0N
I think I butchered your wonderful theme a bit 
The WAF factor plays a big role here and I had to think of something to represent the individual rooms. Now, you can simply jump to the individual rooms from the start page via the buttons, or switch off the lights in them. No more and no less
6 Likes
Can you post youre code please? That looks awsome!
An easy fix could be to add a margin that fits your dashboard
- margin-bottom: 5px
You mean me? If so, here you go
homeassistant/rounded.yaml at main · CM000n/homeassistant · GitHub
1 Like
Really great thank you!
In my setup I just have individual scripts for each zone, then I trigger them with buttons. But its really handy to be able to do two or more zones in one go.
Yes thank you!
You are using yaml mode only? TO edit youre dashboard?
Yes, I use .yaml mode only. This is easier for me than fiddling around with the GUI and I can use standard .yaml anchors relatively easily.
@Diggs Hey, ye you can use the ‘height: 100%’ statement and remove any aspect ratio statement. Here’s an example:
square: false
columns: 2
type: grid
cards:
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: media_player.volume_down
service_data:
entity_id: media_player.sonos
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:volume-minus
name: Volume omlaag
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: media_player.volume_up
service_data:
entity_id: media_player.sonos
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:volume-plus
name: Volume omhoog
- type: custom:button-card
icon: mdi:sofa-single
tap_action:
action: call-service
service: scene.turn_on
haptic: medium
service_data:
entity_id: scene.gezellig
styles:
card:
- border-radius: 24px
- background-color: var(--blue)
- height: 100%
icon:
- color: var(--black)
- height: 40px
- type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_rewind
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:rewind-10
name: Sec achteruit
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_forward
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:fast-forward-10
name: Sec vooruit
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_prev
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:skip-previous
name: Vorige
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_next
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:skip-next
name: Volgende
@CM000n Haha no worries, it’s looking great. And if it suits your needs it’s perfect!
@eterpstra Certainly! It was something I had been searching for a long time, and I’m really happy with how it’s currently working.
To get started, create a regular group that includes all the lights you want to combine. This should be a standard group, not a light group.
woonkamer_lampen:
group:
name: Woonkamer lampen
entities:
- light.plafondlamp_groep
- light.tafellamp_groep
- light.ikea_lamp
- light.tv_lamp
Next, create a light template using the following code (which I found in this forum post):
light:
- platform: template
lights:
actieve_woonkamer_lampen:
friendly_name: "Actieve Woonkamer Lampen"
level_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
{% if is_state(s, 'on') %}
{% set data.numbers = [state_attr(s, "brightness")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
value_template: >
{%- set data = namespace(res="off") -%}
{% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
{% if is_state(s, 'on') %}
{%- set data.res = "on" -%}
{% endif %}
{%- endfor -%}
{{data.res}}
temperature_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
{% if state_attr(s, "color_temp") %}
{% set data.numbers = [state_attr(s, "color_temp")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
turn_on:
- service: light.turn_on
data:
entity_id: group.woonkamer_lampen
turn_off:
- service: light.turn_off
data:
entity_id: group.woonkamer_lampen
set_level:
- service: light.turn_on
target:
# wat te doen als alles uit staat? If statement om alles aan te zetten
entity_id: "{{ expand('group.woonkamer_lampen') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
brightness: "{{ brightness }}"
set_temperature:
- service: light.turn_on
target:
entity_id: "{{ expand('group.woonkamer_lampen') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
color_temp: "{{ color_temp }}"
And use that group for for the slider entity.
3 Likes
Thanks it worked!
Last question: You have 4 groups of Lights in the home screen. But when i add the cards each by each, they are placed below each other. How can I fix this?