First and foremost thank you for finding your way to my Home Assistant repo. This is my Home Assistant Lovelace user interface configuration. I've been using Home Assistant for a little less than a year now (not so long), and it has brought me a huge amount of joy!
Lovelace is the primary interface for Home Assistant, it is used to display all sorts of information. Sometimes though an excessive amount of information is displayed. My take on Lovelace is for it to be simple and drew some inspiration from Soft UI. I've tried to make this easy enough for even a very new user to able to implement it :)
Home Assistant forum discussions are here
Here are some pictures:
This is the first part of the step by step guide.
Please note I have posted my YAML above, if you prefer that instead.
These are some of the things you need before getting started.
You will need the following custom cards to be installed, it is easily done via HACS. Please read HACS documentations and install the following cards.
- Custom Header, by @maykar
- Button Card, by @RomRider
- Card Mod, by @thomasloven
- Search Card and Card Tools, by @postlund and @thomasloven
- Simple Weather Card, by @kalkih
- Mini Media Player, by @kalkih
- Mini Graph Card, also by @kalkih
For the cards to switch automatically to a dark/light theme, please make sure you have the sun.sun entity (should come preinstalled). If you don't have it please add the following to your configuration.yaml.
# Example configuration.yaml entry
sun:You would need to have an automation setup for automatically switching to a dark theme at sunset and back to a light them at sunrise. If you don't have one please add the following to your automations.yaml.
Click here
# Example automations.yaml entry
- alias: "Light theme after Sunrise"
trigger:
platform: sun
event: sunrise
action:
- service: frontend.set_theme
data:
# Change this to the name of your light theme
name: Light
- alias: "Dark theme after Sunset"
trigger:
platform: sun
event: sunset
action:
- service: frontend.set_theme
data:
# Change this to the name of your dark theme
name: Dark
- alias: 'Light theme after reboot in day'
trigger:
platform: homeassistant
event: start
condition:
- condition: state
entity_id: sun.sun
state: 'above_horizon'
action:
service: frontend.set_theme
data:
# Change this to the name of your light theme
name: Light
- alias: 'Dark theme after reboot in night'
trigger:
platform: homeassistant
event: start
condition:
condition: state
entity_id: sun.sun
state: 'below_horizon'
action:
service: frontend.set_theme
data:
# Change this to the name of your dark theme
name: DarkThis is the second part of the step by step guide.
Themes can also be installed with HACS, manual installation docs are here. @JuanMTech also made a great video explaining how to setup themes.
Any light theme consisting a milky white background should work.
Please note the background cannot be pure white.
Google Home Light theme and
Clear theme, by @liri and @naofireblade
Any dark theme consisting a dark grey/black background should work.
Please note the background of the theme cannot be completely black.
The following themes are available in HACS.
Slate theme and Grey Night theme, by @seangreen2 and @ksya
You can either have the header match the background color or display it's own color.
Slate theme header with and without color.
Click on the three dots on the top right, then go to Configure UI then Raw config editor.
Add the following if you would like the header to match the background color:
# Example entry
custom_header:
background: var(--primary-background-color);
compact_mode: trueOnly add the following if you would like the header to display it's own color:
# Example entry
custom_header:
compact_mode: trueThis is the third part of the step by step guide.
Finally we've arrived on how to configure the cards themselves. All the cards below will be able to adjust to dark/light themes depending on if the sun is above or below the horizon.
The following adding of cards uses the UI editor. If you use YAML mode, my YAML is above.
To add cards using the UI editor, click on the three dots on the top right, then go to Configure UI then click on the + on the bottom right, then select MANUAL CARD
Paste in the appropriate text for each card.
Text header cards with the Light and Dark themes.
- Card Mod, by @thomasloven
This card displays a text with transparent background.
Add the following:
Click here
# Example entry
cards:
- cards:
# Enter what you want to display
- content: |
# Enter what you want to display here
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: vertical-stack
Text header cards with subheader with the Light and Dark themes.
- Card Mod, by @thomasloven
This card displays a text with smaller text underneath with transparent background.
Add the following:
Click here
# Example entry
cards:
- cards:
# Enter what you want to display
- content: |
# Enter what you want to display here
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
# Enter what you want to display in the small text
- content: |
# Enter what you want to display here
style: |
ha-card {
height: 50px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: vertical-stack
Vertical buttons card with the Light and Dark themes.
- Button Card, by @RomRider
- Card Mod, by @thomasloven
{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}The following code will create three buttons: lights, alarm clock and irrigation. Each of the buttons will redirect you to a Lovelace tab with the corresponding name, i.e lovelace/lights. You can change the icons, names, redirect tabs, and texts beside them.
Add the following:
Click here
# Example entry
cards:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 80px
type: 'custom:button-card'
# This is first button with the light bulb icon
# Change this to an icon you want
- icon: 'mdi:lightbulb-multiple'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
# This is the tab that the first button redirects to
# Change this to the tab you want the button to redirect to
navigation_path: /lovelace/lights
type: 'custom:button-card'
- cards:
# This is the text beside the first button
# Change this to what you want it to say
- content: |
# Lights
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
# This is the smaller text beside the first button
# Change this to what you want it to say
- content: >
# There are {% if is_state('sensor.lights_on', '0') %}
currently no {% else %} {{states('sensor.lights_on')}} {%
endif %} lights on
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 80px
type: 'custom:button-card'
# This is second button with the alarm clock icon
# Change this to an icon you want
- icon: 'mdi:alarm'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
# This is the tab that the second button redirects to
# Change this to the tab you want the button to redirect to
navigation_path: /lovelace/alarm
type: 'custom:button-card'
- cards:
# This is the text beside the second button
# Change this to what you want it to say
- content: |
# Alarm clock
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
# This is the smaller text beside the second button
# Change this to what you want it to say
- content: >
# The weekday alarm is {% if
is_state('input_boolean.sleep_cycle_weekday', 'on') and
is_state('input_boolean.alarm_weekday_enabled', 'on')%} on
sleep cycle mode {% elif
is_state('input_boolean.alarm_weekday_enabled', 'on') %} set
for {{states('sensor.alarm_weekday_time')}} {% else %} not
set {% endif %}
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 80px
type: 'custom:button-card'
# This is third button with the pine tree icon
# Change this to an icon you want
- icon: 'mdi:pine-tree'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
# This is the tab that the third button redirects to
# Change this to the tab you want the button to redirect to
navigation_path: /lovelace/sprinklers/
type: 'custom:button-card'
- cards:
# This is the text beside the third button
# Change this to what you want it to say
- content: |
# Irrigation
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
# This is the smaller text beside the third button
# Change this to what you want it to say
- content: |
# The irrigation system is not activated
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
type: vertical-stack
Horizontal buttons card with the Light and Dark themes.
- Button Card, by @RomRider
- Card Mod, by @thomasloven
The code below will setup five button cards horizontally (like the picture). When the state of the entity is 'on', the button will be depressed. When the entity is 'off' it will be released (like normal).
Add the following:
Click here
cards:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
# You can change the entity_id and icon of the first button here
- entity: switch.family_room_lamp
icon: 'mdi:lamp'
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
# You also have to change the entity_ids in the following template
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('switch.family_room_lamp', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('switch.family_room_lamp', 'off') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.family_room_lamp', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.family_room_lamp', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
# You can change the entity_id and icon of the second button here
- entity: switch.kitchen_island_lights
icon: 'mdi:vanity-light'
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
# You also have to change the entity_ids in the following template
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('switch.kitchen_island_lights', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('switch.kitchen_island_lights', 'off') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.kitchen_island_lights', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.kitchen_island_lights', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
# You can change the entity_id and icon of the third button here
- entity: switch.dining_area
icon: 'mdi:ceiling-light'
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
# You also have to change the entity_ids in the following template
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('switch.dining_area', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('switch.dining_area', 'off') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.dining_area', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.dining_area', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
# You can change the entity_id and icon of the fourth button here
- entity: light.family_room_dimmer
icon: 'mdi:light-switch'
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
# You also have to change the entity_ids in the following template
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('light.family_room_dimmer', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('light.family_room_dimmer', 'off') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('light.family_room_dimmer', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('light.family_room_dimmer', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
# You can change the entity_id and icon of the fifth button here
- entity: switch.dining_table
icon: 'mdi:table-chair'
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
# You also have to change the entity_ids in the following template
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('switch.dining_table', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('switch.dining_table', 'off') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.dining_table', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.dining_table', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
type: vertical-stack
type: vertical-stack
Text to speech card with the Light and Dark themes.
- Mini Media Player, by @kalkih
- Card Mod, by @thomasloven
The code below will setup a text input for you to TTS to a desired media player. If you require further assistance on this card, check the TTS section of the Mini Media Player card.
Add the following:
Click here
# Example entry
type: vertical-stack
cards:
- type: vertical-stack
cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
- type: horizontal-stack
cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
- entities:
- type: 'custom:mini-media-player'
# Change this the media player you want to TTS to
entity: media_player.echo_dot
group: true
hide:
name: true
icon: true
info: true
power: true
source: true
sound_mode: true
controls: true
play_pause: true
play_stop: true
volume: true
mute: true
progress: true
runtime: true
artwork_border: true
power_state: true
icon_state: true
shuffle: true
tts:
# Change this to the platform for your TTS.
# For example: tts.google_translate_say would be google_translate
platform: alexa
style: |
ha-card {
background-color: var(--primary-background-color);
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
border-radius: 10px;
}
show_header_toggle: false
type: entities
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
Remote pop-up card with the Light and Dark themes.
- Button Card, by @RomRider
- Card Mod, by @thomasloven
- Browser Mod, by @thomasloven
This is a quite special card. Each button on it can be used to control your TV/device. It will pop up when you long press on an entity. For example, you can make it pop-up when you hold on your TV entity.
To add this card, click on the three dots on the top right, then go to Configure UI then click the three dots on the top right again, then select Raw config editor
Add the following to the first line:
Click here
popup_cards:
# Please change this to the entity you want to hold and get the remote
script.television:
title: Remote
card:
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 1px
- height: 1px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 50px
- height: 60px
type: 'custom:button-card'
- entities:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 150px
- height: 60px
type: 'custom:button-card'
- icon: 'mdi:power'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 100px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you call to toggle the TV/device
service: remote.send_command
service_data:
command: power
entity_id: remote.xiaomi
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 60px
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- cards:
- entities:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 63px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:menu-up'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you call to go 'up' on the TV/device
service: remote.send_command
service_data:
command: up
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:menu-left'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you call to go 'left' on the TV/device
service: remote.send_command
service_data:
command: left
entity_id: remote.xiaomi
type: 'custom:button-card'
- name: OK
show_icon: false
show_name: true
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-4px -4px 4px 0 rgba(255,255,255,.5),4px 4px 4px 0 rgba(0,0,0,.03);
{% else %}
-4px -4px 4px 0 rgba(50, 50, 50,.5),4px 4px 4px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 50px
- height: 50px
- border-radius: 100px
- background-color: var(--primary-background-color)
name:
- font-size: 20px
- font-weight: bold
- font-family: Helvetica
- letter-spacing: '-0.01em'
tap_action:
# Please change this to a service you call to 'enter' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: enter
entity_id: remote.xiaomi
type: 'custom:button-card'
- icon: 'mdi:menu-right'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you call to go 'right' on the TV/device
service: remote.send_command
service_data:
command: right
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 63px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:menu-down'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you call to go 'down' on the TV/device
service: remote.send_command
service_data:
command: down
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
inset -4px -4px 5px 0 rgba(255,255,255,.7), inset 4px 4px 5px 0 rgba(0,0,0,.07);
{% else %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% endif %}
border-radius: 30px;
background-color: var(--primary-background-color)
}
type: 'custom:hui-entities-card'
type: 'custom:hui-horizontal-stack-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- cards:
- entities:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 17px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:minus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you call to 'volume down' on the TV/device
service: remote.send_command
service_data:
command: volume_down_sony
entity_id: remote.xiaomi
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- name: VOL
show_icon: false
show_name: true
styles:
card:
- box-shadow: none
- width: 30px
- height: 30px
- border-radius: 100px
- background-color: var(--primary-background-color)
name:
- font-size: 13px
- font-weight: bold
- font-family: Helvetica
- letter-spacing: '-0.01em'
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:plus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you call to 'volume up' on the TV/device
service: remote.send_command
service_data:
command: volume_up_sony
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
border-radius: 30px;
background-color: var(--primary-background-color)
}
type: 'custom:hui-entities-card'
type: 'custom:hui-horizontal-stack-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- cards:
# The first button in the bottom, you can change the icon here. In my case it is 'home'
- icon: 'mdi:home'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you want to call on the first button
service: remote.send_command
service_data:
command: home
entity_id: remote.xiaomi
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
# The second button in the bottom, you can change the icon here. In my case it is 'return'
- icon: 'mdi:keyboard-return'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you want to call on the second button
service: remote.send_command
service_data:
command: return
entity_id: remote.xiaomi
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
# The third button in the bottom, you can change the icon here. In my case it is a set top box.
- icon: 'mdi:set-top-box'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
# Please change this to a service you want to call on the third button
service: script.turn_on
service_data:
entity_id: script.mi_box
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
background-color: var(--primary-background-color);
width: 250px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-6px -6px 6px 0 rgba(255,255,255,.5),6px 6px 6px 0 rgba(0,0,0,.03);
{% else %}
-6px -6px 6px 0 rgba(77, 77, 77,.5),6px 6px 6px 0 rgba(0,0,0,.3);
{% endif %}
border-radius: 10px;
}
type: entities
type: horizontal-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'Then for it to pop-up when you are holding a button.
Add the following to the button-card config of the entity you want to hold to get the remote:
hold_action:
action: more-info
Search Card and Card Tools, by @postlund and @thomasloven
To have a simple Soft UI look on other cards, what you have to do is set the card background as the same as the theme background as well as round the corners then adding a dark and light shadow. It can be done (with Card Mod) like this:
Click here
# Example entry
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
} This repository is maintained and developed by