💫 Simple and clean Lovelace configuration
This project originally stemmed from just me redoing my UI. However, it has evolved into something much bigger. Today, in this repo, you will find detailed instructions on applying this style to your cards and a collection of custom-configured cards that match best with this style.
This would have not been possible without the support of the Home Assistant community. If you need help, please consult the community forums or the issues tab. New contributions are most welcomed. Thank you, and please check out other great alternatives:
First, we will need card-mod to style our cards. The easiest way to install card-mod is via HACS.
Second, we will need to apply our card-mod style through themes.
We first need to install custom themes (can also be found via HACS),
then we will add our card-mod style to the theme YAML files, typically found at:
config/themes/{theme_name}/{theme_name}.yaml
There are two ways to style our cards: the Universal method, which styles all cards, and the Individual method, which only styles specific cards.
Universal
To universally style all cards, add the following to your theme YAML file:
Light version:
# Example light_theme.yaml entry
theme_name:
card-mod-theme: theme_name # Change to your theme name
card-mod-card: |
ha-card {
margin: 20px;
border-radius: 15px;
background-color: var(--primary-background-color);
box-shadow: -5px -5px 15px #ffffff, 5px 5px 15px #ebebeb;
}
# This is needed for the "pressed" buttons
soft-ui-pressed: 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb'
Dark version:
# Example dark_theme.yaml entry
theme_name:
card-mod-theme: theme_name # Change to your theme name
card-mod-card: |
ha-card {
margin: 20px;
border-radius: 15px;
background-color: var(--primary-background-color);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
# This is needed for the "pressed" buttons
soft-ui-pressed: 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919'
Individual
To individually style cards, first, we will create a styling class in our theme YAML:
Light version:
# Example light_theme.yaml entry
theme_name:
card-mod-theme: theme_name # Change to your theme name
card-mod-card: |
ha-card.soft-ui {
margin: 20px;
border-radius: 15px;
background-color: var(--primary-background-color);
box-shadow: -5px -5px 15px #ffffff, 5px 5px 15px #ebebeb;
}
# This is needed for the "pressed" buttons
soft-ui-pressed: 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb'
Dark version:
# Example dark_theme.yaml entry
theme_name:
card-mod-theme: theme_name # Change to your theme name
card-mod-card: |
ha-card.soft-ui {
margin: 20px;
border-radius: 15px;
background-color: var(--primary-background-color);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
# This is needed for the "pressed" buttons
soft-ui-pressed: 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919'
Then to use the style, simply reference the soft-ui
class in any card
by adding the following to the YAML card configuration:
# Example card configuration entry
card_mod:
class: soft-ui
All cards below have been made to work with both the Universal styling method and the Individual styling method. However, Button cards require the additional installation of the custom button-card. Add cards via the Manual card option in the Lovelace UI.
Heading
Get card here
Heading & Subheading
Get card here
Button
Get card here
Button Border
Get card here
Button Text
Get card here
Button Border Text
Get card here
Button Description
Get card here