Home Assistant Dashboard basics & Code

Example Style:

card_mod:
  style: |
    ha-card {
      --chip-icon-size: 80px;
      width: 100px !important;
      height: 100px !important
    }

card_mod:
  style:
    .: |
      ha-card {
        --icon-primary-color:
        {% if is_state('sensor.foo', 'unavailable') %}
         #1C1C1C;
        {% elif states('sensor.foo')|int <= 5 %}
         blue;
        {% elif state_attr(config.entity, "current_position")|float(0) >= 30 %}
          --tile-color: orange;
        {% else %}
         green;
        {% endif %}
         --text-color:
        {% if is_state('sensor.foo', 'unavailable') %}
         gray;
        {% elif states('sensor.foo')|int <= 5 %}
         blue;
        {% else %}
         green;
        {% endif %}
        }</pre>
styles:
  card:
    - box-shadow: 0px 0px 5px 1px var(--button-card-light-color)
    - border-radius: 5px
    - color: ivory
    - opacity: 1
    - background-color: '#242e42'
    - text-shadow: 0px 0px 5px black
  label:
    - color: gray
    - font-size: 11px
    - padding: 0px 10px
  state:
    - font-size: 11px
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: bold
    - padding-left: 10px
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - align-self: center
    - text-align: start
    - margin-left: 10px
  name:
    - justify-self: start
    - padding-left: 10px
    - font-weight: bold
    - font-size: 13px

Actions

tap_action:
  action: toggle
hold_action:
  action: more-info
double_tap_action:
  action: assist
tap_action:
  action: navigate
  navigation_path: /lovelace/power-ii

ICON and Icon color

icon: >-
  [[[ if (entity.state == "off") return "mdi:fuse-alert"; else return "mdi:fuse" ]]]
	  
icon_color: |-
  {% if is_state(entity, "open") %}
    red
  {% elif is_state('sensor.knmi_weercode', 'Code geel') %}
    yellow
  {% else %}
    green
  {% endif %}
  
icon: |-
  {% if is_state(entity, "closed") %}
    mdi:garage
  {% else %}
    mdi:garage-open
  {% endif %}


 type: vertical-stack, horizontal-stack, vertical-stack-in-card
 title: foo
 Cards:
  - type: *

 type: custom:mushroom-person-card 
 type: custom:mushroom-title-card 
 type: custom:mushroom-template-card
 type: custom:stack-in-card
 type: custom:layout-card

 type: custom:apexcharts-card
 type: custom:webrtc-camera
 type: custom:button-card
 type: custom:slider-button-card
 type: custom:config-template-card
 
 type: custom:timer-bar-card
 type: media-control
 
 type: picture-elements
  elements:
    - type: state-icon
      entity: cover.foo

 type: custom:digital-clock
 type: weather-forecast
 type: custom:windrose-card

 show_name: true
 show_icon: true
 show_state: true
 columns: 4
 title: foo
 type: glance
   entities: 

 type: custom:mushroom-chips-card
 chips:
    - type: template
	- type: entity

type: conditional
  conditions:
    - entity: binary_sensor.contact_front_door_contact
      state: 'on'
  chip:
    type: template
    picture: https://img.icons8.com/plasticine/344/door-opened.png
    content: Open

Leave a Reply