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: relative
      custom_fields:
        bypass:
          - position: absolute
          - right: 0%
          - bottom: 0%
          - height: 30px
          - width: 30px
  area:
    template: color
    styles:
      grid:
        - grid-template-areas: >-
            "topLeft topCenter topRight" "middleLeft i middleRight" "bottomLeft
            bottomCenter bottomRight"
        - grid-template-columns: 1fr 1fr 1fr
        - grid-template-rows: 1fr 1fr 1fr
      icon:
        - width: 100%
      card:
        - padding: 0%
        - color: ivory
        - font-size: 9px
        - text-shadow: 0px 0px 5px black

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
  confirmation:
    text: '[[[ return `Do you want to toggle the Bedroom Sleep Script?` ]]]'
show_name: false
icon: mdi:sofa-outline
styles:
  grid:
    - position: relative
  custom_fields:
    notification:
      - position: absolute
      - right: 5%
      - top: 5%
      - height: 23px
      - width: 23px
      - font-size: 8px
      - line-height: 20px
custom_fields:
  notification: |
    [[[
        return `<ha-icon
          icon="mdi:weather-night"
          style="width: 23px; height: 23px;">
          </ha-icon>`
      ]]]

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:
  - value: 'on'
    color: red
    icon: mdi:alert
    styles:
      card:
        - animation: blink 2s ease infinite
  - operator: default
    color: green
    icon: mdi:shield-check
styles:
  grid:
    - position: relative
  custom_fields:
    notification:
      - position: absolute
      - right: 1%
      - bottom: 0%
      - height: 30px
      - width: 30px
      - font-size: 8px
      - line-height: 20px
custom_fields:
  notification: |
    [[[
        if (states["input_boolean.secutiry"].state === 'on') return `<ha-icon
          icon="mdi:lock"
          style="width: 30px; height: 30px; color: red;">
          </ha-icon>`
        else return `<ha-icon
          icon="mdi:lock-open-outline"
          style="width: 30px; height: 30px;">
          </ha-icon>`
        
      ]]]

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: |
    [[[
        if (states["input_boolean.bedroom_door"].state === 'off') return 
        else return `<ha-icon
          icon="mdi:door-open"
          style="width: 23px; height: 23px;">
          </ha-icon>`        
      ]]]
  topCenter: |
    [[[
        if (states["switch.samsung_tv"].state === 'on') 
        return `<ha-icon
          icon="mdi:television"
          style="width: 23px; height: 23px;">
          </ha-icon>`
      ]]]
  topRight: >
    [[[  return `<span>${states['sensor.temperature_bedroom'].state}°</span>
                <br/>
                <span>${states['sensor.humidity_bedroom'].state}%</span>`  
    ]]]
  middleLeft: |
    [[[
        
        if ( states["binary_sensor.bedroom_window_sensor"].state === 'on') 
        return `<ha-icon
          icon="mdi:window-open-variant"
          style="width: 23px; height: 23px;">
          </ha-icon>`
        else
        return `<ha-icon
          icon="mdi:window-closed-variant"
          style="width: 23px; height: 23px;">
          </ha-icon>`
        
      ]]]
  middleRight: |
    [[[
        if (states["media_player.bedroom"].state !== 'off' 
        && states["media_player.bedroom"].state !== 'idle'
        && states["media_player.bedroom"].state !== 'paused') 
        return `<ha-icon
          icon="mdi:music-circle-outline"
          style="width: 23px; height: 23px;">
          </ha-icon>`
        
      ]]]
  bottomLeft: |
    [[[
        if (states["binary_sensor.bedroom_motion_sensor"].state === 'on') 
        return `<ha-icon
          icon="mdi:motion-sensor"
          style="width: 23px; height: 23px;">
          </ha-icon>`
        else
        return `<span>${states['sensor.bedroom_on'].state}</span><br />
                <span>min</span>`        
      ]]]
  bottomCenter: |
    [[[
        if (states["fan.bedroom"].state === 'on') 
        return `<ha-icon
          icon="mdi:fan"
          style="width: 23px; height: 23px;">
          </ha-icon>`
        
      ]]]
  bottomRight: |
    [[[
        if (states["input_boolean.bypass_bedroom"].state === 'on') return `<ha-icon
          icon="mdi:lock"
          style="width: 23px; height: 23px; ">
          </ha-icon>`
        else return 
        
      ]]]

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;">
          </ha-icon>`
        else return `<ha-icon
          icon="mdi:lock-open-outline"
          style="width: 30px; height: 30px;">
          </ha-icon>`
        
      ]]]

I would love to hear your comments, or suggestions on this post.

Build the Perfect Home Assistant Dashboard

TABLE OF CONTENTS

Related

Tags