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-top-header:
  card-mod-theme: no-top-header

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

With only one view

With multiple views

Remove the header fully

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

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

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 secondary-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: |
    "hui-masonry-view$#columns" {
      flex-direction: column !important;
      margin: 0 auto;
      max-width: 500px;
    }

Compact header

⚠️ This is advanced, make sure you fully understand it before modifying it. Also, this chunk is based off of a card-mod theme, and this chunk might not be regularly updated For some reason now it's more frequently updated? Maybe more people scream at me in the card-mod thread than in the other thread. This supports uncommenting various items to do stuff like moving it to the bottom. Scream at @KTibow over there if you want more functionality. that was sarcastic

compact-header:
  card-mod-theme: compact-header
  header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there.
  card-mod-root-yaml: |
    paper-tabs$: |
      /* Uncomment this for header on the bottom. You're 2/3 there.
      #selectionBar {
        bottom: unset !important;
      }
      */
    .: |
      /* This moves the header up. */
      app-header {
        transform: translate3d(0px, -48px, 0px);
      }
      /* Let's change the background. */
      app-header, app-toolbar {
        background: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      }
      /* We're still going to need a way to see that we're in edit mode. */
      app-header.edit-mode {
        padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
        border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
      }
      /* This changes the color of the currently selected tab. */
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--primary-color) !important;
      }
      /* This hides the help button. */
      a.menu-link[target="_blank"] {
        display: none;
      }
      /* This makes the plus color the same as the background. */
      #add-view {
        color: var(--primary-background-color);
      }
      /* This hides the title. */
      [main-title] {
        display: none;
      }
      /* This hides the app-toolbar in edit mode. */
      app-toolbar.edit-mode {
        height: 0;
      }
      /* This moves the edit mode buttons back in. */
      app-toolbar.edit-mode > mwc-icon-button {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      app-toolbar.edit-mode > ha-button-menu {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      }
      /* This adds a bit more padding, mainly for unused entities. */
      app-header.edit-mode > div {
        padding-left: 5px;
      }
      /* Uncomment this for header on the bottom. You're 3/3 there.
      app-header {
        top: calc(100vh - 60px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }
      */

With only one view:

With multiple views: In edit mode: