Thanks that worked 
But as far as i can see, the spacing between the 4 grids, there is a bigger gap with my own grids?
Worked, great job !
Thanks.
Works perfectly for brightness and color temperature, is there also a solution to change the color uniformly?
Has anyone managed to do this?
Greetings
Moss
Hi,
I have created a button and want to toggle it to turn on a switch. however, the toggle is not working:
type: custom:button-card
icon: mdi:water-boiler
aspect_ratio: 1/1
tap_action:
action: toggle
haptic: medium
service: siwtch.turn_off
entity_id: switch.sonoff
What am i doing wrong?
siwtch dont work 
Try switch.toggle
omg haha thanks!
Thanks for this. Looks good. I’ll definitely be ‘stealing’ parts of this.
Just a heads up for you in Rounded.yaml
app-header-selection-bar-color: transparant → app-header-selection-bar-color: transparent
Anyone knows why on stack-in-a-card, the borders does not work?
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 5
type: grid
cards:
- type: custom:button-card
icontype: custom:button-card
icon: mdi:power
entity: media_player.ytube_music_player
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
haptic: success
service: media_player.toggle
service_data:
entity_id: media_player.ytube_music_player
styles:
card:
- border-radius: 24px
- background: var(--green)
icon:
- width: 32px
- color: var(--black)
state:
- value: playing
styles:
card:
- background: var(--red)
- type: custom:button-card
icon: mdi:play
entity: media_player.ytube_music_player
show_name: false
tap_action:
action: call-service
haptic: medium
service: script.youtubemusic_play_pause
aspect_ratio: 1/1
styles:
icon:
- width: 32px
- color: var(--green)
card:
- border-radius: 24px
- background-color: var(--contrast4)
state:
- value: playing
name: Pausar
icon: mdi:pause
styles:
card:
- background-color: var(--yellow)
- type: custom:decluttering-card
template: card_players
variables:
- entity: media_player.ytube_music_player
What’s that?
I have just noticed that the temperature slider goes in the other direction than it is usual in the more-info dialogues of Homeassistant. There it goes from left (warm) to right (cold) colour temperature.
I have therefore set the temperature slider template to inverse: true under the my-slider-v2 options and have also inverted the colour gradients for temperature and temperature-tint in the theme .yaml file. Just in case anyone else notices this. So it’s quite easy to change 
Unfortunately, the current solution with the dynamic template light groups, for switched-on lights, in combination with the sliders is somewhat unreliable for me. For the brightness it works wonderfully, but for the colour temperature the slider jumps back and forth, and usually does not manage to apply the desired colour temperature. Does anyone else have this problem?
nvmd. it was because of my inverse: true setting under the my-slider-v2 options. Instead I had to use flipped: true.
BTW: @LE0N: Which custom font are you using?
Thank you! Kinda works, but I guess it’s a tad too much 
Works better if you just leave the brightness section as it is. At least as long as you don’t switch the light to White:
1 Like
No Idea haha, I removed and nothing changed, maybe a misswriting.
Too bad. Wondered, if it is a hidden feature 
Hi @LE0N !
Thank you so much for sharing your awesome dashboard theme. It looks soo clean.
Could you tell which font are you using in yours dashboard? It looks really cool.
2 Likes
Hi,
I want to add a label with the tempature tike @CM000n has done with his light button card.
But for some reason the label isnt popping up in the card.
What is wrong?
type: custom:button-card
name: Woonkamer
icon: mdi:floor-lamp-dual
label: '[[[ return states[''sensor.temperatuur_garage''].state + '' °C'' ]]]'
entity: light.woonkamer_lampen
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.woonkamer_lampen
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: '-6px'
- height: 12px
- width: 12px
- border-radius: 100px
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(--yellow)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
You have to set show_label: true according to button card documentation:
Besides the show_label: true setting you sould also specify a dedicated place with l for the label in the card styles. In my case for my navigation buttos, for example, it is like this: homeassistant/rounded.yaml at main · CM000n/homeassistant (github.com)
No, not realy. Now you are using a ‘light’ area in the card grid style but have only a ‘slider’ configured under custom_fields Please think twice, before you copy & paste code and sharing it afterwards
Hi,
any rounded design ideas for cover and climate cards?
Thank you
Hope this becomes an addon / cards to make it easier like mushroom!