kitchen.yaml

type: custom:stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: light.kitchen_lights
        name: Kitchen
        secondary_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            :host {
              --mush-icon-size: 80px;
              margin-left: -20px !important;
              margin-top: -20px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.kitchen_motion_any
                state: 'off'
            chip:
              type: template
              icon_color: yellow
              icon: mdi:motion-sensor
          - type: conditional
            conditions:
              - entity: binary_sensor.window
                state: 'on'
            chip:
              type: template
              icon_color: yellow
              icon: mdi:window-open
          - type: conditional
            conditions:
              - entity: binary_sensor.window
                state: 'on'
            chip:
              type: template
              icon_color: yellow
              icon: mdi:door-open
          - type: entity
            entity: sensor.kitchen_motion_temperature_air
            icon_color: blue
          - type: entity
            entity: sensor.kitchen_motion_humidity_air
            icon_color: green
        card_mod:
          style: |
            ha-card {
              position: relative;
              float: right;
              --chip-spacing: -16px;
              --chip-background: none;
            }
  - type: conditional
    conditions:
      - entity: input_select.kitchen_light_state
        state: Manual
    card:
      type: custom:mushroom-light-card
      entity: light.kitchen_lights
      layout: horizontal
      fill_container: true
      primary_info: none
      secondary_info: none
      use_light_color: true
      show_brightness_control: true
      show_color_temp_control: true
      show_color_control: false
      collapsible_controls: false
      icon_type: none
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb
        primary: Lighting scene
        secondary: |
          {{ states.input_select.kitchen_light_state.state }}
        icon_color: blue
        tap_action: none
      - type: custom:mushroom-template-card
        icon: |
          {% if is_state('input_boolean.kitchen_light_motion_enabled', 'on') %}
            mdi:motion-sensor
          {% else %}
            mdi:motion-sensor-off
          {% endif %}
        primary: Motion enabled lights
        secondary: |
          {% if is_state('input_boolean.kitchen_light_motion_enabled', 'on') %}
            Enabled ({{ states.input_number.kitchen_light_motion_timeout.state|int }} Minutes)
          {% else %}
            Disabled
          {% endif %}
        icon_color: |
          {% if is_state('input_boolean.kitchen_light_motion_enabled', 'on') %}
            blue
          {% endif %}
        tap_action:
          action: call-service
          service: input_boolean.toggle
          service_data:
            entity_id: input_boolean.kitchen_light_motion_enabled
  - type: grid
    square: false
    columns: 5
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:theme-light-dark
        layout: vertical
        secondary: Auto
        icon_color: |
          {% if is_state('input_select.kitchen_light_state', 'Auto') %}
            blue
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.kitchen_light_state
            option: Auto
        style: |
          ha-card {
            --icon-border-radius: 10px
          }
      - type: custom:mushroom-template-card
        icon: mdi:weather-sunny
        layout: vertical
        secondary: Day
        icon_color: |
          {% if is_state('input_select.kitchen_light_state', 'Day') %}
            blue
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.kitchen_light_state
            option: Day
        style: |
          ha-card {
            --icon-border-radius: 10px
          }
      - type: custom:mushroom-template-card
        icon: mdi:weather-night
        layout: vertical
        secondary: Night
        icon_color: |
          {% if is_state('input_select.kitchen_light_state', 'Night') %}
            blue
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.kitchen_light_state
            option: Night
        style: |
          ha-card {
            --icon-border-radius: 10px
          }
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb-night
        layout: vertical
        secondary: Nightlight
        icon_color: |
          {% if is_state('input_select.kitchen_light_state', 'Nightlight') %}
            blue
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.kitchen_light_state
            option: Nightlight
        style: |
          ha-card {
            --icon-border-radius: 10px
          }
      - type: custom:mushroom-template-card
        icon: mdi:account
        layout: vertical
        secondary: Manual
        icon_color: |
          {% if is_state('input_select.kitchen_light_state', 'Manual') %}
            blue
          {% else %}
            grey
          {% endif %}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.kitchen_light_state
            option: Manual
        style: |
          ha-card {
            --icon-border-radius: 10px
          }

outside.yaml

type: custom:stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: weather.kitchener_waterloo
        name: Outside
        card_mod:
          style: |
            :host {
              --mush-icon-size: 80px;
              margin-left: -20px !important;
              margin-top: -20px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.air_ar_00017281_temperature
            icon_color: blue
          - type: entity
            entity: sensor.air_ar_00017281_humidity
            icon_color: green
        card_mod:
          style: |
            ha-card {
              position: relative;
              float: right;
              --chip-spacing: -16px;
              --chip-background: none;
            }
  - type: custom:weather-card
    entity: weather.kitchener_waterloo
    current: false
    details: false
    forecast: true
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.air_ar_00017281_temperature
        name: Temperature
        color: '#00bb33'
      - entity: sensor.air_ar_00017281_humidity
        name: Humidity
        color: '#2196f3'
        y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

thermostat.yaml

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        style: |
          :host {
            --mush-icon-size: 80px;
            margin-left: -20px !important;
            margin-top: -20px !important;
          }
          ha-card {
            padding-bottom: 1px !important;
          }
        primary: Thermostat
        secondary: |
          Currently: {{ state_attr('climate.living_room', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.living_room') %}
          {% if mode == 'off' %}
          mdi:power
          {% elif mode == 'cool' %}
          mdi:snowflake
          {% elif mode == 'heat' %}
          mdi:fire
          {% elif mode == 'heat_cool' %}
          mdi:autorenew
          {% else %}
          mdi:home-thermometer
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.living_room','hvac_action') %}
          {% if status == 'off' %}
          grey
          {% elif status == 'cooling' %}
          blue
          {% elif status == 'heating' %}
          red
          {% else %}
          grey
          {% endif %}
        tap_action: none
      - type: vertical-stack
        cards:
          - type: custom:simple-thermostat
            style: |
              ha-card {
                --st-spacing: 0px;
              }
              ha-card .current--value {
                color: #ffffff;
              }
              header {
                margin-bottom: 12px !important;
                padding-bottom: 0px !important;
              }
              ha-card .thermostat-trigger { 
                color: #9e9e9e;
              }
            entity: climate.living_room
            header:
              name: false
              icon: false
            decimals: '1'
            fallback: 'Off'
            hide:
              temperature: true
              state: true
            layout:
              mode:
                names: false
                icons: false
                headings: false
              step: row
            step_size: '.5'
            control:
              hvac:
                'off': false
                heat: false
                cool: false
                heat_cool: false
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
      }
    alignment: justify
    chips:
      - type: template
        entity: climate.living_room
        content: |
          {{ state_attr(entity, 'fan_mode') }}
        icon: mdi:fan
        icon_color: green
        tap_action: none
      - type: template
        content: '{{state_attr(entity, ''current_temperature'')}} °C'
        entity: climate.living_room
        icon: mdi:home-thermometer
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='cool' %}
          blue
          {% elif state=='heat' %}
          red
          {% else %}
          grey
          {% endif %}
      - type: weather
        entity: weather.kitchener_waterloo
        show_conditions: true
        show_temperature: false
      - type: template
        double_tap_action:
          action: none
        content: '{{ states(entity) }}% Humidity'
        entity: sensor.air_ar_00017281_humidity
        icon: mdi:water
        icon_color: blue
        tap_action:
          action: none
        hold_action:
          action: none
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 0px;
        --st-mode-background: #262626;
        margin-left: 12px;
        margin-right: 12px;
      }
      ha-card .mode-item.active.off { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item.active.cool { 
        background: #1d3447;
        color: #2196f3;
      }
      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }
      ha-card .mode-item.active.heat_cool { 
        background: #493516;
        color: #ff9800;
      }
      ha-card .mode-item.active { 
        background: #263926;
        color: #4caf50;
      }
      ha-card .mode-item.active:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item {
        --st-spacing: 10px;
        border-radius: 10px;
      }
      ha-card .modes {
        grid-gap: 12px
      }
    entity: climate.living_room
    header: false
    setpoints: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: false
      step: row
    control:
      hvac:
        'off':
          name: Power
        heat:
          name: Heat
        cool:
          name: Cool
        heat_cool:
          name: Auto
  - type: grid
    square: false
    columns: 3
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.living_room_temperature
        primary_info: state
        secondary_info: name
        name: Inside
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.air_ar_00017281_temperature
        primary_info: state
        secondary_info: name
        name: Outside
        icon_color: blue
      - type: custom:simple-thermostat
        style: |
          ha-card {
            --st-font-size-toggle-label: 6px
            --st-spacing: 0px;
            --st-default-spacing: 1.6px;
            --st-mode-background: #2d2d2d;
            margin-right: 12px;
          }
          ha-card .mode-item.active { 
            background: #263926;
            color: #4caf50;
          }
          ha-card .mode-item.active:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item {
            --st-spacing: 6px;
            border-radius: 10px;
          }
          ha-card .modes {
            grid-gap: 12px
          }
        entity: climate.living_room
        header: false
        setpoints: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            names: false
            icons: true
            headings: false
          step: row
        control:
          hvac:
            'off': false
            heat: false
            cool: false
            heat_cool: false
          preset:
            none:
              name: Normal
              icon: mdi:home
            eco:
              name: Eco
              icon: mdi:leaf
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.living_room_temperature
        name: Inside Temperature
        color: '#4caf50'
      - entity: sensor.air_ar_00017281_temperature
        name: Outside Temperature
        color: '#2196f3'
        y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade