Theme cookbook

Note: If you mix a non--yaml chunk with a -yaml chunk, substitute like this:

First section

  card-mod-root: |
    app-toolbar {
      display: none;
    }

Second section

  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }

Mixed

  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
    .: |
      app-toolbar {
        display: none;
      }

Remove top part of header

no-header:
  card-mod-theme: no-header

  card-mod-root: |
    app-toolbar {
      display: none;
    }

With only one view

With multiple views

Compact header

⚠️ This is advanced, make sure you fully understand it before modifying it.

compact-header:
  card-mod-theme: compact-header
  card-mod-root-yaml: |
    paper-tabs:
      $: |
        .not-visible {
          display: none;
        }
    "ha-app-layout":
      $: |
        #contentContainer {
          padding-top: 70px;
        }
    .: |
      app-toolbar {
        height: 0;
      }
      .edit-mode, app-header, app-toolbar {
        background-color: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      }
      app-header.edit-mode {
        border-bottom: 2px var(--primary-color) solid;
        padding-bottom: 10px;
      }
      app-header[shadow] > ::before {
        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.3);
      }
      #add-view ha-svg-icon {
        background-color: var(--primary-color) !important;
        color: #EEE !important;
        border-radius: 5px !important;
      }
      .edit-icon {
        color: var(--primary-color) !important;
      }
      mwc-icon-button[label="Start conversation"] {
        top: 0;
        right: calc(48px * 1);
        z-index: 2;
        position: absolute;
      }
      mwc-icon-button[title="Help"] {
        top: 0;
        right: calc(48px * 2);
        position: absolute;
        z-index: 2;
      }
      mwc-icon-button[title="Close"] {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      }
      mwc-icon-button#add-view {
        position: fixed;
        right: calc(48px * 1);
      }
      ha-button-menu {
        top: 0;
        right: 0;
        z-index: 2;
        margin-left: 5px;
        position: absolute;
      }
      app-toolbar > [main-title] {
        display: none;
      }
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      ha-menu-button {
        z-index: 2;
        top: 24px;
      }
      paper-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
        margin-left: 48px !important;
      }
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--primary-color) !important;
      }
      paper-tab[aria-selected="true"] {
        color: var(--primary-color) !important;
      }
      @media (orientation: portrait) {
        paper-tabs {
          margin-left: 64px !important;
          margin-right: 32px !important;
        }
        ch-header > paper-tabs,
        app-header.edit-mode > * > paper-tabs {
          margin-left: 10px !important;
          margin-right: 10px !important;
        }
      }
      ch-header > ha-button-menu {
        top: unset;
      }
      ch-header > paper-tabs,
      app-header.edit-mode > paper-tabs {
        margin-left: 0;
      }
      app-toolbar a {
        color: var(--primary-text-color) !important;
      }

With only one view:

With multiple views: In edit mode:

Make header transparent and add background to everything

transparent-header:
  card-mod-theme: transparent-header
  card-mod-root: |
    ha-app-layout {
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTR-Hllcy5CR5U90nMlW8bZA_VM7w4VlP2lZg&usqp=CAU");
    }
    app-header {
      background: rgba(0,0,0,0.5) !important;
    }
    app-toolbar {
      background: none !important;
    }

Note: app-header and app-toolbar overlap, so if you make both of them transparent, things will look weird. Better to make one have no background. Note2: the --lovelace-background variable applies a background to the view, but the header is outside of the view, so you can't use that to get a background behind it - unless you also move it 🤔

Remove unused space when chevrons are not needed in header

tabs-to-edge:
  card-mod-theme: tabs-to-edge
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }

Display battery level in background of entities with battery or battery_level attributes

battery-rows:
  card-mod-theme: battery-rows

  card-mod-row: |
    :host {
      display: block;
      {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
      {% if battery %}
        background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
      {% endif %}
    }

Put a custom secodary-info text in entities that have a battery

custom-secondary:
  card-mod-theme: custom-secondary
  card-mod-row-yaml: |
    hui-generic-entity-row$: |
      {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
      {% if battery %}
        .info.text-content::after {
          content: "{{battery}}%";
          display: block;
          color: var(--secondary-text-color);
        }
      {% endif %}

.info.text-content will select only rows that don't already have a secondary-info row.

Make fans spin while on

fan-spinning:
  card-mod-theme: fan-spinning
  card-mod-card: |
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
    ha-icon[data-domain="fan"][data-state="on"] {
      animation: spin 4s infinite linear;
    }
  card-mod-row-yaml: |
    "*:first-child$": |
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
          animation: spin 4s infinite linear;
        {% endif %}
      }

Force one column for cards

one-column:
  card-mod-theme: one-column
  card-mod-view: |
    #columns {
      flex-direction: column !important;
      margin: 0 auto;
      max-width: 500px;
    }