Custom header theme

custom_header_template.yaml

template:

  - sensor:

      - unique_id: custom_header_option_template
        name: Custom header template
        state: >
          {% if is_state('input_boolean.menu_options_template','on') %}
            {% if states('sensor.your_browsermod_id') not in ['unknown','unavailable'] %} /*replace with correct sensor id */
            {{state_attr('sensor.your_browsermod_id','path')
            .split('/')[-1].replace('_',' ').capitalize()}} - {{states('sensor.temp_current')}} °C
            {% else %} Initializing....
            {% endif %}
          {% endif %}
        availability: >
          {% set x = ['unavailable','unknown'] %}
          {{states('sensor.your_browsermod_id') not in x and
            states('sensor.temp_current') not in x}}

      - unique_id: custom_header_option_template_version_2
        name: Custom header template 2
        state: >
          {% if is_state('input_boolean.menu_options_template','on') %}
           {{states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C
          {% endif %}

themes_card_mod.yaml

##########################################################################################
# https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/419
# My 'Custom header' card-mod theme, allowing to color individual view icons and have an
# optional replacement for the three-dots option menu
# Set left menu icons, animations and colors, and add a notification next to it
# set backgrounds to override the default background set in theme
# https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1070
# most interface elements are now set using the new Kiosk-mode on
# https://github.com/NemesisRE/kiosk-mode
# last_update 20240108 using HA 2024.1.2 and card_mod 3.4.2
##########################################################################################

theme-mods:

#   card-mod-row: |
#     :host {
#       --card-mod-icon:
#         {% set state = states(config.entity) %}
#         {% if state_attr(config.entity,'device_class') == 'running' %}
#         mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
#         {% endif %}
#     }

# dont do this, as it slows down the Dashboard. Better set mods on the cards.
#     :host {
#       --paper-item-icon-color:
#         {% if config.entity in
#           states.sensor|selectattr('entity_id','search','illuminance')
#             |map(attribute='entity_id')|list %}
#         {% set state = states(config.entity)|int(-5) %}
#         {% if state < 1 %} black
#         {% elif state < 2 %} firebrick
#         {% elif state < 10 %} orange
#         {% elif state < 50 %} green
#         {% elif state < 150 %} gold
#         {% elif state < 350 %} teal
#         {% elif state < 700 %} dodgerblue
#         {% elif state < 2000 %} lighskyblue
#         {% elif state < 10000 %} lightblue
#         {% else %} lightcyan
#         {% endif %};
#     }

# https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#classes
#   card-mod-row: |
#     :host(.class-row-red) {
#       color: red;
#       --paper-item-icon-color: red;
#     }

# move to under -yaml, as per https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#first-section

#   <<: &card-mod-card
#     card-mod-card: |
#       ha-card {
#         transition: none !important;
#       }

#   - !include /config/dashboard/includes/include_christmas_footer.yaml

  card-mod-glance: |
    :host {
      transition: none !important;
    }

  card-mod-sidebar-yaml: |

    .: |

      {% set kerst = states('input_select.theme') == 'Kerst' %}
      {% set alerts = states('sensor.alerts_notifying')|int(default=0) > 0 %}
      {% set netto = states('sensor.netto_verbruik')|int(default=0) >= 0 %}
      {% set feest = is_state('binary_sensor.feest_alerts','on') %}
      {% set vent = is_state('input_boolean.ventilate','on') %}

      :host {
        background: {{'url("/local/season/kerst_smurfen.png")' if kerst}};
      }

      .menu .title {
        color: {{states('sensor.presence_color')}};
      }

      .menu .title:after {
        content: "{%- set alerts = states('sensor.marquee_alerts')|int(default=0) %}
                  {%- set phrase = 'Alert: ' if alerts == 1 else 'Alerts:' -%}
                  {{'\A ' ~ phrase ~ alerts if alerts > 0 }}";
        white-space: pre;
        font-size: 12px;
        font-weight: bold;
        display: block;
        line-height: 4px;
        color: var(--alert-color);
        animation: marquee 4s alternate infinite
      }
      @keyframes marquee {
        from {transform: translateX(0%);}
        to {transform: translateX(50%);}
      }

      a[data-panel='ui-overzicht'] paper-icon-item ha-icon {
        --card-mod-icon: {{'mdi:home-alert' if alerts else 'mdi:home'}};
        color: {{'var(--alert-color)' if alerts else 'green'}};
      }

      a[data-panel='ui-overzicht'] paper-icon-item {
        {% if is_state('binary_sensor.watermeter_leak_detected','on') %}
          --sidebar-text-color: blue;
          background-color: lightblue;
          animation: blink 2.5s ease infinite;
        {% endif %}
      }
      @keyframes blink {
        50% {opacity: 0.2;}
      }
      @keyframes blinkhard {
        0%,49% {opacity:0;}
        50%,100% {opacity:1;}
      }

      a[data-panel='ui-overzicht'] paper-icon-item:after {
        {%- set id = states('sensor.buienradar_temperature') %}
        {% set x = ['unknown','unavailable'] %}
        content: "{{id if id not in x else '?'}}";
        {%- set length = id|length %}
        {%- set table = {1:44,2:48,3:52,4:52,5:60} %}
        {%- set pix = table.get(length,42) %}
        left: calc(var(--app-drawer-width,248px) - {{pix}}px);
        position: absolute;
        min-width: 20px;
        box-sizing: border-box;
        border-radius: 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        padding: 0px 6px;
        background-color: {{states('sensor.temperature_color_name')}};
        color: {{'dimgray' if 5 < id|int(default=0) < 20 else 'ivory'}};
      }

      a[data-panel='ui-data'] paper-icon-item ha-icon {
        color: {{'saddlebrown' if netto else 'gold'}};
        /*background: {{'gold' if netto else 'saddlebrown'}};*/
      }

      a[data-panel='ui-data'] paper-icon-item:after {
        {%- set id = states('sensor.netto_verbruik')|default('?') %}
        content: "{{id}}";
        {%- set length = id|length %}
        {%- set table = {1:44,2:48,3:52,4:56,5:60} %}
        {%- set pix = table.get(length,42) %}
        left: calc(var(--app-drawer-width,248px) - {{pix}}px);
        position: absolute;
        min-width: 20px;
        box-sizing: border-box;
        border-radius: 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        padding: 0px 6px;
        background-color: {{'saddlebrown' if id|int(default=0) >= 0 else 'gold'}};
        color: {{'ivory' if id|int(default=0) >= 0 else 'saddlebrown'}};
      }

      a[data-panel='ui-instellingen'] paper-icon-item ha-icon {
        color: {%- if vent %} var(--alert-color)
               {%- elif is_state('switch.vijverpompen','on') %} lightseagreen
               {%- endif %};
        animation: {{'spin 2s ease 0s infinite normal' if vent else 'none'}};
      }
      @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
      }

      a[data-panel='ui-instellingen'] paper-icon-item:after {
        {%- set check = states('binary_sensor.wekker_voor_morgen') %}
        {%- set wekker = states('sensor.next_alarm') %}
        {% set content = wekker if check != 'off' %}
        content: "{{content}}";

        /*{%- set length = content|length %}
        {%- set table = {1:44,2:48,3:52,4:56,5:56} %}
        {%- set pix = table.get(length,42) %}
        left: calc(var(--app-drawer-width,248px) - {{pix}}px);*/

        left: calc(var(--app-drawer-width,248px) - 56px);
        position: absolute;
        min-width: 20px;
        box-sizing: border-box;
        border-radius: 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        padding: 0px 6px;
        background-color: {{'crimson' if check != 'off'}};
        color: ivory;
      }

      a[data-panel='ui-familie'] paper-icon-item ha-icon {
        --card-mod-icon: {{'mdi:party-popper' if feest else
                           states('sensor.presence_icon')}};
        color: {{'orange' if feest else states('sensor.presence_color')}};
        animation: {{'blink 2s ease infinite' if feest else 'none'}};
      }
      @keyframes blink {
        50% {opacity: 0.2;}
      }

      a[data-panel='ui-familie'] paper-icon-item:after {
        content: "{{states('sensor.familie_samenvatting')}}";
        left: calc(var(--app-drawer-width,248px) - 44px);
        position: absolute;
        min-width: 20px;
        box-sizing: border-box;
        border-radius: 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        padding: 0px 6px;
        background-color: {{states('sensor.presence_color')}};
        color: {{'saddlebrown' if states('sensor.presence_color') == 'gold'
                 else 'ivory'}};
      }

      a[data-panel='ui-develop'] paper-icon-item ha-icon {
        {% set core = is_state('update.home_assistant_core_update','on') %}
        --card-mod-icon: {{'mdi:package-up' if core else 'mdi:home-assistant'}};
        color: {{'red' if states('sensor.memory_use_percent')|int(default=0) > 25 or
                       core else 'var(--ha-color)'}};
      }

      a[data-panel='ui-develop'] paper-icon-item:after {
        {%- set id = states('sensor.memory_use_percent') %}
        content: "{{id}}";
        {%- set length = id|length %}
        {%- set table = {1:44,2:48,3:52,4:52,5:60} %}
        {%- set pix = table.get(length,42) %}
        left: calc(var(--app-drawer-width,248px) - {{pix}}px);
        position: absolute;
        min-width: 20px;
        box-sizing: border-box;
        border-radius: 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        padding: 0px 6px;
        background-color: {{'red' if id|int(default=0) > 25 else 'var(--ha-color)'}};
        color: ivory;
      }

      a[data-panel='ui-cctv'] paper-icon-item ha-icon {
        color: {{'var(--alert-color)' if is_state('switch.poe_inside_cameras','on')
                  else 'var(--primary-color)'}};
      }

# not reliable, use config-template-card to set conditional Map dark_mode
#   card-mod-row-yaml: |
#
#      ha-card.map {
#        {{'dark_mode: true' if states('input_select.theme') == 'Dark blue'}};
#      }
#
# set classes for card-headers, with and without margin (used for starting entities
# cards with fold-entity-rows)

  <<: &card-mod-card-yaml
    card-mod-card-yaml: |
      hui-buttons-header-footer $ hui-buttons-base:
        $ : |
          .ha-scrollbar {
            justify-content: space-evenly;
            height: 50px;
            align-content: center;
            margin: -8px 0px 0px 0px;
          }

      hui-buttons-header-footer $ hui-buttons-base $: |
          ha-assist-chip {
            border: 1px solid var(--primary-color);
            border-radius: var(--ha-card-border-radius);
            /*--ha-assist-chip-filled-container-color: yellow;*/
            --secondary-text-color: var(--primary-color);
            --primary-text-color: var(--primary-color);
            --_label-text-weight: bold;
          }
          ha-assist-chip state-badge {
            justify-content: space-between;
            margin-left: 4px;
          }
 
          /*.mdc-chip__ripple {
            border-radius: var(--ha-card-border-radius) !important;
          }*/

      .: |

        {% set kerst = states('input_select.theme') == 'Kerst' %}

        ha-card.class-header-margin-no-color .card-header {
          font-weight: 400;
          font-size: 20px;
          padding: 0px 12px;
          margin: 0px 0px 16px 0px;
        }

        ha-card.class-header-margin .card-header {
          background-color: var(--background-color-off);
          font-weight: 400;
          font-size: 20px;
          color: var(--text-color-off);
          padding: 0px 12px;
          margin: 0px 0px 16px 0px;
        }

        ha-card.class-header-no-margin-no-color .card-header {
          font-weight: 400;
          font-size: 20px;
          padding: 0px 12px;
        }

        ha-card.class-header-no-margin .card-header {
          background-color: var(--background-color-off);
          font-weight: 400;
          font-size: 20px;
          color: var(--text-color-off);
          padding: 0px 12px;
        }

        ha-card {
          transition: none !important;
          overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
          background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}};
        }

        {{ "ha-card::before
              {
                content: '';
                background: top / contain no-repeat url('/local/season/snow.png');
                height: 16%;
                position: absolute;
                left: -1%;
                width: 102%;
                top: -30px;
              }"
        if kerst}}

#         {{ "ha-card::after
#               {
#                 content: '';
#                 backdrop-filter: blur(20px);
#                 background: top / contain no-repeat url('/local/season/lightchain.png');
#                 height: 24%;
#                 position: absolute;
#                 width: 100%;
#                 bottom: 48px;
#               }"
#             if kerst }}

##########################################################################################
# Set the animation of the currently selected tab icon, color and icon itself are/
# set below the .: section to prevent background animation
# https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1094
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/5174
# https://github.com/thomasloven/lovelace-card-mod/issues/268
##########################################################################################

  card-mod-root-yaml: |

    paper-tab[aria-label='Ventilatoren'] ha-icon$: |
      ha-svg-icon {
        animation: {%- if is_state('input_boolean.ventilate','on') %}
                     spin 1s infinite linear;
                   {%- elif is_state('switch.vijverpompen','on') %}
                     spin 3s infinite linear;
                   {%- else %} none;
                   {%- endif %}
      }
      @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
      }

    paper-tab[aria-label='Weer'] ha-icon$: |
      ha-svg-icon {
        animation: {{'blink 2s ease infinite' if
                     is_state('binary_sensor.meteoalarm_brabant','on') else 'none'}};
      }
      @keyframes blink {
        50% {opacity: 0.2;}
      }

    paper-tab[aria-label='Kalender'] ha-icon$: |
      ha-svg-icon {
        animation: {{'spin 3s infinite linear' if
                     is_state('binary_sensor.feest_alerts','on') else 'none'}};
      }
      @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
      }

    paper-tab[aria-label='Feest'] ha-icon$: |
      ha-svg-icon {
        animation: {{'spin 3s infinite linear' if
                     is_state('binary_sensor.feest_alerts','on') else 'none'}};
      }
      @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
      }

    paper-tab[aria-label='Water'] ha-icon$: |
      ha-svg-icon {
        animation: {{'spin 3s infinite linear' if
                     is_state('binary_sensor.watermeter_leak_detected','on')
                     else 'none'}};
      }
      @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
      }

    paper-tab[aria-label='Summary'] ha-icon$: |
      ha-svg-icon {
        {%- if states('sensor.hubs_samenvatting')|int(default=-1) > 0 or
               states('sensor.kritieke_schakelaars_samenvatting')|int(default=-1) > 0 %}
          animation: pulse 2s ease 0s infinite normal none;
        {%- endif %}
      }
      @keyframes pulse {
        0% {opacity: 0.8;transform: scale(0.2);}
        80% {opacity: 0;transform: scale(1.2);}
        100% {opacity: 0;transform: scale(2.2);}
      }

    .: |

      {% set kerst = states('input_select.theme') == 'Kerst' %}
      {% set feest = is_state('binary_sensor.feest_alerts','on') %}
      {% set lek = is_state('binary_sensor.watermeter_leak_detected','on') %}
      {% set vent = is_state('input_boolean.ventilate','on') %}
      {% set pomp = is_state('switch.vijverpompen','on') %}
      {% set netto = states('sensor.netto_verbruik')|int(default=0) %}
      {% set meteo = is_state('binary_sensor.meteoalarm_brabant','on') %}
      {% set alerts = states('sensor.alerts_notifying')|int(default=0) > 0  %}
      {% set motion = is_state('binary_sensor.motion_sensors_all','on') %}
      {% set template = is_state('input_boolean.menu_options_template','on') %}
      {% set temp = states('sensor.buienradar_temperature') %}

      /* Set the three-dots transparency, to allow replacement template text. */
      ha-button-menu {
        color: {{'transparent' if template}};
      }

      /* Optionally set a replacement template text. */
      ha-button-menu::before {
        content: "{%- set symbol =
                    states('sensor.buienradar_symbol')|truncate(21, False, '') %}
                  {%- if template %}
                  {{- symbol}} | {{temp}} °C
                  {%- endif %}";
        color: var(--app-header-text-color);
        visibility: visible;
        position: relative;
        top: 24px;
        white-space: nowrap;
      }

      /* Set the toolbar background. */
      .header, .toolbar {
        background: {% if kerst %} url('/local/wallpapers/snow.mp4')
                    {% elif states('input_select.theme')
                                                 |regex_search('(ight|Dark|Matrix)') %}
                      radial-gradient(var(--primary-color),var(--card-background-color))
                    {% else %} var(--primary-color)
                    {% endif %};
        color: var(--app-header-text-color)';
      }

      /* Set the color of the currently selected tab indicator. */
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--text-primary-color);
      }

      /* Set the color of the currently selected tab indicator.
         Set size of the currently selected tab icon*/
      paper-tab[aria-selected=true] {
        color: var(--tab-active-color);
        background-color: rgba(var(--primary),0.3);
        --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
      }

      /* This hides the help button when in edit mode*/
      a.menu-link[target="_blank"] {
        {% if is_state('input_boolean.hide_edit_mode_help','on') %}
        visibility: hidden;
        margin-right: -30px;
        {% endif %}
      }

      /* Dynamically set the color and icons of individual tabs. */
      paper-tab[aria-label='Wekker instellingen'] {
        color: {{'green' if is_state('binary_sensor.wekker_voor_morgen','off') else
                 'crimson'}};
      }

      paper-tab[aria-label='Welkom'] {
        --card-mod-icon: {{'mdi:home-alert' if alerts }};
        color: {{'crimson' if alerts else 'green'}};
      }

      paper-tab[aria-label='Summary'] {
        {%- if states('sensor.hubs_samenvatting')|int(default=-1) > 0 or
               states('sensor.kritieke_schakelaars_samenvatting')|int(default=-1) > 0 %}
          --card-mod-icon: mdi:alert;
           color: var(--alert-color);
        {%- endif %}
      }

      paper-tab[aria-label='Beweging'] {
        --card-mod-icon: {{'mdi:motion-sensor' if motion}};
        color: {{'red' if motion}};
      }

      paper-tab[aria-label='Alarm'] {
        --card-mod-icon: {{states('sensor.alarm_panel_icon')}};
        color: {{states('sensor.alarm_panel_icon_color')}};
      }

      paper-tab[aria-label='Verwarming'] {
        {%- set hvac =  state_attr('climate.voorkamer','hvac_action') %}
        --card-mod-icon: {%- set icon =
                           {'heating':'radiator','idle':'radiator-disabled'} -%}
                         mdi:{{icon.get(hvac,'radiator-off')}};
        color: {%- set color = {'off':'black','heating':'maroon',
                                'cooling':'dodgerblue','auto':'darkgreen'} %}
               {{color.get(hvac,'')}};
      }

      paper-tab[aria-label='Updates'] {
        {%- set update = expand(integration_entities('hacs'))
                                |selectattr('state','eq','on')|list|count != 0 or
                         is_state('update.home_assistant_core_update','on') %}
        --card-mod-icon: mdi:package{{'-up' if update}};
        color: {{'red' if update }};
      }

      paper-tab[aria-label='Kalender'] {
        --card-mod-icon: {{'mdi:party-popper' if feest}};
        color: {{'orange' if feest else
                 states('sensor.trash_color') if states('sensor.trash_color') != 'grey'
                 else 'red' if is_state('binary_sensor.wekker_voor_morgen','on')}};
      }

      paper-tab[aria-label='Familie overzicht'] {
        color: {{states('sensor.presence_color')}};
      }

      paper-tab[aria-label='Feest'] {
        color: {{'orange' if feest}};
      }

      paper-tab[aria-label='Klimaat'] {
        color: {{states('sensor.inside_temperature_color_name')}};
      }

      paper-tab[aria-label='Rolluiken'] {
        --card-mod-icon: mdi:window-shutter{{'-alert' if
                             states('cover.slaapkamers') in ['unknown','unavailable']
                             else '-open' if is_state('cover.slaapkamers','open')}};
      }

      paper-tab[aria-label='Verlichting'] {
        --card-mod-icon: mdi:lightbulb-group{{'-off' if
                           is_state('light.all_lights_only','off') }};
        color: {{'gold' if states('light.all_inside_lights') == 'on'}};
      }

      paper-tab[aria-label='Weer'] {
        --card-mod-icon: {%- if meteo %} {{states('sensor.meteoalarm_icon')}}
                         {%- else %} {{states('sensor.weather_icon')}}
                         {%- endif %};
        color: {{'maroon' if meteo else states('sensor.temperature_color_name')}};
      }

      paper-tab[aria-label='Energie'] {
        color: {{'brown' if netto >= 0 else 'gold'}};
      }

      paper-tab[aria-label='Zonne-energie'] {
        color: {{'gold' if netto < 0}};
      }

      paper-tab[aria-label='Water'] {
        --card-mod-icon: {{'mdi:pipe-leak' if lek}};
        color: {%- if lek %} var(--alert-color)
               {%- elif is_state('binary_sensor.watermeter_update_available','on') %}
                 blue
               {%- endif %};
      }

      paper-tab[aria-label='Ventilatoren'] {
        --card-mod-icon: {{'mdi:fan' if vent else 'mdi:turbine' if pomp}};
        color: {%- if vent %} var(--alert-color)
               {%- elif pomp %} lightseagreen
               {%- endif %};
      }

      paper-tab[aria-label='Tijd'] {
        --card-mod-icon: {{state_attr('sensor.hour_icon','icon')}};
        color: {{'purple' if is_state('binary_sensor.donker_buiten','on') else
                 'deepskyblue'}};
      }

  card-mod-more-info-yaml: |

    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px) !important;
        -webkit-backdrop-filter: blur(17px) !important;
      }
      /*.mdc-dialog .mdc-dialog__content {
        padding: var(--dialog-content-padding, 24px);
      }*/

weather-background:
  card-mod-theme: weather-background
#   <<: *card-mod-card
  <<: *card-mod-card-yaml
  card-mod-view: |
    horizontal-layout {
      {% if is_state('input_boolean.weer_view_background','on') %}
        background: repeat url({{state_attr('camera.buienradar','entity_picture')}});
      {% endif %}
    }

#   card-mod-view: |
#     horizontal-layout {
#       {% if is_state('input_boolean.weer_view_background','on') %}
#         background: repeat url('/local/wallpapers/snow.mp4');
#       {% endif %}
#     }

seizoen-background:
  card-mod-theme: seizoen-background
#   <<: *card-mod-card
  <<: *card-mod-card-yaml
  card-mod-view: |
    vertical-layout {
      {% set seizoen = states('sensor.season_astronomical') %}
      background: repeat url('/local/season/{{seizoen}}_2.png');
    }