Build the Perfect Home Assistant Dashboard

Prerequisites
#

Set Theme Automation
#

config/automations.yaml

alias: Set Theme
description: ""
trigger:
  - platform: homeassistant
    event: start
condition: []
action:
  - service: frontend.set_theme
    data:
      name: Graphite
mode: single

Button Card Templates
#

Templates

button_card_templates:
  color:
    state:
      - value: 'on'
        color: rgb(28, 128, 199)
      - value: 'off'
        color: ivory
      - operator: default
        color: var(--disabled-text-color)
  bypass:
    template: color
    styles:
      grid:
        - position

Color Button Card Template
#

Color Button Card

type: custom:button-card
aspect_ratio: 1/1
template: color
entity: light.all_lights
show_name: false
icon: mdi:lightbulb-group
tap_action:
  action: navigate
  navigation_path: lights
hold_action:
  action: more-info

Script Color Button Card

type: custom:button-card
aspect_ratio: 1/1
template: color
tap_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.livingroom_sleep
  confirmation:
    text: '[[[ return `Do you want to toggle the LivingRoom Sleep Script?` ]]]'
hold_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.bedroom_sleep

Light Color Button Card

type: custom:button-card
aspect_ratio: 1/1
color: auto
tap_action:
  action: toggle
hold_action:
  action: more-info
entity: light.bedroom_led_strip
show_name: false
show_state: false
icon: mdi:led-strip-variant

Vertical Color Button Card

type: custom:button-card
aspect_ratio: 2/0.95
template: color
tap_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.ambient_light
entity: switch.bt_plug
icon: mdi:movie-open-star
show_name: false

Security Card Template Example
#

Security Card Template

type: custom:button-card
aspect_ratio: 1/1
color_type: card
tap_action:
  action: call-service
  service: input_boolean.toggle
  service_data:
    entity_id: input_boolean.segurity
entity: input_boolean.intruder_alert
show_name: false
hold_action:
  action: call-service
  service: input_boolean.turn_off
  service_data:
    entity_id: input_boolean.intruder_alert
state

Timer Bar Card Example
#

Timer Bar Card

type: custom:timer-bar-card
entity: timer.livingroom_timer
mushroom:
  color: blue

Area Button Card Example
#

Area Button

type: custom:button-card
icon: mdi:bed-empty
show_name: false
show_state: false
entity: light.bedroom_lights
tap_action:
  action: navigate
  navigation_path: bedroom
hold_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.turnoff_bedroom
template: area
custom_fields:
  topLeft:

Movement 'Minutes Ago' Sensor Template
#

Sensor Template

sensor:
  - platform: template
    sensors:
      ## One For Each Device
      livingroom_on:
        friendly_name: LivingRoom minutes ago
        value_template: "{{ ((as_timestamp(now()) - as_timestamp(states.binary_sensor.livingroom_motion_sensor.last_changed)) / 60) | round(0) }}"

Title Markdown Example
#

Title Card

type: markdown
content: '## LIVING ROOM'

Mushroom Light Card Example
#

Mushroom Card

type: custom:mushroom-light-card
entity: light.living_room_lights
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon_color: blue
name: Lights

Bypass Button Card Example
#

Bypass Example

type: custom:button-card
entity: light.lamp
icon: mdi:lamp-outline
show_name: false
tap_action:
  action: more-info
hold_action:
  action: call-service
  service: input_boolean.toggle
  service_data:
    entity_id: input_boolean.control_lamp
template: bypass
custom_fields:
  bypass: |
    [[[
        if (states["input_boolean.control_lamp"].state === 'on') return `<ha-icon
          icon="mdi:lock"
          style="width: 30px; height: 30px; color: red;">