Mushroom Inspiration!

[AwesomeGuyNamedMatt (Matt)]

The post above should get you on your way for setting up the general layout. Here is code for my Garage section. Each of the individual rooms is a section similar to what I am posting now. Just add a new card and throw this code in. Then substitute your own entities and such. Entities will show up in rows of 3.

square: false
columns: 1
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
        subtitle: Garage
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          width: 300
          grid-template-columns: 130px 130px 130px
        cards:
          - type: custom:mushroom-cover-card
            entity: cover.garage
            layout: vertical
          - type: custom:mini-graph-card
            entities:
              - sensor.garage_freezer_temperature
            line_color: lightblue
            line_width: 4
            font_size: 50
            font_size_header: 10
            align_icon: state
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Shopping List
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:gap-card
                        height: 24
                      - type: shopping-list
            height: 50
            card_mod:
              style: |
                ha-card {
                  max-height: 120px;
                }
          - type: custom:mushroom-entity-card
            entity: input_boolean.help_needed_when_arriving_home
            icon: phu:rooms-carport
            icon_color: red
            layout: vertical
            name: Help Unload
            tap_action:
              action: toggle
          - type: custom:mushroom-template-card
            entity: sensor.waste_collection_trash_formated
            primary: Trash Day
            secondary: '{{ states(''sensor.waste_collection_trash_formated'') }}'
            icon: mdi:trash-can
            layout: vertical
            icon_color: >
              {% if is_state('sensor.waste_collection_trash_formated', 'Today')
              %} lime {% endif %}
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: custom:mushroom-template-card
            entity: sensor.waste_collection_recycle_formated
            primary: Recycling Day
            secondary: '{{ states(''sensor.waste_collection_recycle_formated'') }}'
            icon: mdi:recycle
            layout: vertical
            icon_color: >
              {% if is_state('sensor.waste_collection_recycle_formated',
              'Today') %} purple {% endif %}
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: custom:mushroom-template-card
            primary: Garage Door
            secondary: >-
              {% if
              is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_opening",
              "off") -%}
                Closed
              {%- elif
              is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_opening",
              "on") -%}
                Open
              {% else %}
                Unknown
              {%- endif %}
            icon: >-
              {% if
              is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening',
              'on') %} mdi:door-open {%- else -%} mdi:door {% endif %}
            entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
            layout: vertical
            icon_color: >
              {% if
              is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening',
              'on') %} red {% endif %}
            tap_action:
              action: more-info

[AwesomeGuyNamedMatt (Matt)]

I am also using a custom theme.

homekit:
  modes:
    light:
      # Background image
      lovelace-background: 'center / cover no-repeat url("https://hassio_url/local/images/backgrounds/light-theme-wallpaper.png") fixed'
      ha-card-background: '#f6f6f6'
    dark:
      # Background image
      lovelace-background: 'center / cover no-repeat url("https://hassio_url/local/images/backgrounds/homekit_bg_dark.png") fixed'
      primary-color: steelblue
# blurring-background-behind-popup
  dialog-backdrop-filter: blur(5px)
  dialog-border-radius: 20px;
  dialog-box-shadow: 0em 0em 0.5em;
  iron-overlay-backdrop-opacity: 0.5
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
  mdc-dialog-box-shadow: 0em 0em 15px 15px slategray
  mdc-shape-medium: 25px

[duetoxplode (Josh Kay)]

I’ve been making heavy use of card_mod styling in my dashboard. Just wondering if anyone else has issues where the styling is applied after a slight delay, causing everything to flicker on the initial page load?

[dimitri.landerloos]

I have made some significant improvements and changes to my battery card that i posted a while back that i feel like it warrants another post if that is ok. if not i will remove and update my original post instead.

• Card now lists lowest battery detected with auto entities only, and gives the option for a dropdown menu to see the rest. i really like this change as it now doesnt take up loads of space at the bottom of my room cards, only when i expand it to see all of them will it take up that space
  
  

• The auto entities filter is now based on a template instead of static values in include and exclude. means more complex filtering that you can do!

{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}

• Because we are using a template filter we can now also edit the name of the entity on the fly. so removing things from the name that are redundant. in my case i remove the word battery, because… of course its a battery…? and then removing the name off the room. i clicked on the room, i know what room i am looking at, so doesnt need to be in the name.

'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],

• You can now set the text color based on the battery percentage as well. this is good for when you have a color set on the bar that doesnt work well with the default text color. you can also set this based on whether dark or light theme is being used.
  (this is now a bit messy looking, but trust me when i say that this was the only way to implement it.)

{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
  /* Bar color */
  --bar-color: #ff0026 !important;
  /* Icon */
  --card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
  /* Dark theme text colors */
  bar-card-name {
    color: var(--primary-text-color) !important;
  }
  bar-card-value {
    color: #cccccc !important;
  }
}
@media (prefers-color-scheme: light) { 
  /* Light theme text colors */
  bar-card-name {
    color: var(--primary-text-color)  !important;
  }
  bar-card-value {
    color: #3b3b3b !important;
  }
}

• Fixed some alignment issues. and made it perfectly match the sizing of mushroom cards

You do now need to fill in your values for bar color, icon type, and text color in 2 seperate places rather than 1 like before. but it is just a duplicate of the other, so you can copy and paste once you have finished 1 full {% if %} {% endif %} section into the other one and then fix the indentation.

here is what it looks like expanded. safe to say that i am in love with this card

The code is too big to post in a single reply, so i will post it in 2 sections. just put them together right under eachother in the same card!

1st Half of Code

type: custom:stack-in-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              background: transparent;
              box-shadow: none;
              border: none;
            }
        cards:
          - type: grid
            square: false
            columns: 2
            cards:
              - type: custom:auto-entities
                card:
                  type: custom:stack-in-card
                  card_mod:
                    style: |
                      ha-card {
                        padding-top: 5px;
                        {% if states('input_boolean.spare_bedroom_battery_dropdown') == 'on' %}
                          padding-bottom: 5px;
                        {% else %}
                          padding-bottom: 0px;
                        {% endif %}
                        padding-right: 30px;
                        width: 200%;
                        background: transparent !important;
                        box-shadow: none;
                        border: none !important;
                      }
                card_param: cards
                filter:
                  template: >-
                    {%- for state in states.sensor |
                    selectattr('entity_id','search','battery') |
                    selectattr('entity_id','search','spare_bedroom') -%}
                      {{
                        {
                          'type': 'custom:bar-card',
                          'entity': state.entity_id,
                          'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
                          'card_mod':
                            {
                            'style': 'bar-card-currentbar, bar-card-backgroundbar {
                                      border-radius: 12px !important;
                                      height: 41px !important;
                                      margin-top: -8px !important;
                                      width: 101%;
                                      right: 0.5%;
                                    }
                                    ha-icon {
                                      position: relative;
                                      padding: 11px;
                                      border-radius: 50%;
                                      --mdc-icon-size: 21px;
                                      margin-top: -15px;
                                      right: 4px;
                                    }
                                    {% if states(config.entity) | int <= 10 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ff0026 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-10 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;

                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 20 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ff4d00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-20 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 30 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ff9900 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-30 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 40 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ffcc00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-40 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 50 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                      /* Bar color */
                                      --bar-color: #e3eb00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-50 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 60 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                      /* Bar color */
                                      --bar-color: #aaff00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-60 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 70 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #77ff00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-70 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 80 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #00ff1a !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-80 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 90 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #22c402 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-90 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 100 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #22c402 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% else %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #0033ff !important
                                      /* Icon */
                                      --card-mod-icon: mdi:bug
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% endif %}
                                    bar-card-row, ha-icon {
                                      color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                                      background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                                    }
                                    bar-card-indicator {
                                      color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                                      top: -8px;
                                    } 
                                    bar-card-name {
                                      margin-top: -27px !important;
                                      font-weight: bold;
                                      left: 0px;
                                    }
                                    bar-card-value {
                                      margin-top: 8px !important;
                                      font-weight: bold;
                                      font-size: 11px;
                                      right: 96.9%;
                                      width: 0px;
                                    }
                                    ha-card {
                                      margin: -4px 0px !important;
                                      height: 60px;
                                    }'
                                  }
                        }
                     }},
                    {%- endfor %}
                sort:
                  method: state
                  numeric: true
                  count: 1
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    icon: >-
                      {% if
                      states('input_boolean.spare_bedroom_battery_dropdown') ==
                      'on' %}

                      mdi:chevron-up

                      {% else %}

                      mdi:chevron-down

                      {% endif %}
                    entity: input_boolean.spare_bedroom_battery_dropdown
                    card_mod:
                      style: |
                        ha-card {
                          top: 13px;
                          right: 10px;
                          --chip-icon-size: 23px;
                          border: none !important;
                          box-shadow: none !important;
                          background: transparent !important;
                        }
                alignment: end

EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: | without card_mod: before is entirely dead now.

[dimitri.landerloos]

2nd Half of Code

      - type: conditional
        conditions:
          - entity: input_boolean.spare_bedroom_battery_dropdown
            state: 'on'
        card:
          type: custom:auto-entities
          card:
            type: custom:stack-in-card
            card_mod:
              style: |
                ha-card {
                  padding-top: 5px;
                  padding-bottom: 5px;
                  margin: -14px 0px 0px 0px;
                  background: transparent;
                  box-shadow: none;
                  border: none;
                }
          card_param: cards
          filter:
            template: >-
              {%- for state in states.sensor |
              selectattr('entity_id','search','battery') |
              selectattr('entity_id','search','spare_bedroom') -%}
                {{
                  {
                    'type': 'custom:bar-card',
                    'entity': state.entity_id,
                    'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
                    'card_mod':
                      {
                      'style': 'bar-card-currentbar, bar-card-backgroundbar {
                                border-radius: 12px !important;
                                height: 41px !important;
                                margin-top: -8px !important;
                                width: 103%;
                                left: -1.5%;
                              }
                              ha-icon {
                                position: relative;
                                padding: 11px;
                                border-radius: 100px;
                                --mdc-icon-size: 21px;
                                margin-top: -15px;
                                right: 4px;
                              }
                              {% if states(config.entity) | int <= 10 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ff0026 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-10 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;

                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 20 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ff4d00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-20 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 30 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ff9900 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-30 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 40 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ffcc00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-40 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 50 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                /* Bar color */
                                --bar-color: #e3eb00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-50 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 60 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                /* Bar color */
                                --bar-color: #aaff00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-60 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 70 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #77ff00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-70 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 80 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #00ff1a !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-80 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 90 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #22c402 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-90 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 100 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #22c402 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% else %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #0033ff !important
                                /* Icon */
                                --card-mod-icon: mdi:bug
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% endif %}
                              bar-card-row ha-icon {
                                color: color-mix(in srgb, var(--bar-color) 100%, transparent);
                                background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                              }
                              bar-card-indicator {
                                color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                                top: -8px;
                              }
                              bar-card-name {
                                margin-top: -27px !important;
                                font-weight: bold;
                                left: 0px;
                              }
                              bar-card-value {
                                margin-top: 8px !important;
                                font-weight: bold;
                                font-size: 11px;
                                right: 97%;
                                width: 0px;
                              }
                              ha-card {
                                margin: -4px 0px !important;
                                height: 60px;
                              }'
                            }
                  }
                }},
              {%- endfor %}
          sort:
            method: state
            numeric: true
            first: 1
            count: 100

EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: | without card_mod: before is entirely dead now.

[dimitri.landerloos]

Hi All,
I have built an alternative to the existing mushroom horizontal layout that currently exists with card_mod:

i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this:

and its alternative that keeps the text in 2 rows:

You need to ensure that you have layout: horizontal in your card

it works with no buttons, 1 button or both of the buttons:

it will auto adjust the widths so that everything fits neatly on any screen size. (even in a grid, but i wouldnt recommend having the buttons enabled as there is limited space in a grid).

it also auto adjusts the text color/button icon color, so that it doesnt blend into the slider itself. (still will blend in with the slider background sometimes, but best i can do!).

i have tested this with many screen sizes and it seems to work consistently
(which i am actually really proud of, i have worked on this one for a while to reduce the amount of “magic numbers”).

Light mode:

Code slider with text in 1 row option

type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
name: Standing Light
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --primary-text-color: #1a1a1a;
            {% else %}
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          flex-shrink: 1;
          flex-grow: 0;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --secondary-text-color: #3b3b3b;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --secondary-text-color: #3b3b3b;
            {% else %}
              --secondary-text-color: #c9c9c9;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }

Code slider with text in 2 rows option

type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
name: Standing Light
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --primary-text-color: #1a1a1a;
            {% else %}
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          flex-shrink: 1;
          flex-grow: 0;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --secondary-text-color: #3b3b3b;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --secondary-text-color: #3b3b3b;
            {% else %}
              --secondary-text-color: #c9c9c9;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }

[WebPower (Karoly Papp)]

Nice!! Thank you!

[TheWanderingTurkey]

I really like this! I had been playing around with expanding the slider and reducing the device name to solve for the wasted space, but using shorter names wasn’t always viable. I tweaked your code a bit to preserve the accessibilty of the slider on the end and make the text a little easier to read when brightness is reduced.

card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          padding-left: 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --primary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          flex-shrink: 1;
          flex-grow: 0;
          margin-right: 10px;
          padding: 0 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --secondary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}

            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --secondary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
              --secondary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        # margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            # --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_control == true and config.show_color_temp_control == true) %}
            width: calc(100% - 190px);
          {% elif (config.show_color_control == false and config.show_color_temp_control == true) %}
            width: calc(100% - 136px);
          {% elif (config.show_color_control == true and config.show_color_temp_control == false) %}
            width: calc(100% - 136px);
          {% else %}
            width: calc(100% - 80px);
          {% endif %}
          left: 68px;
          top: 18.2%;
        }
        .slider-track-background {
          background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_temp_control == true) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_control == true) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }

Edit: For some reason, lights without RGB or tunable white would not show correctly. I made an adjustment to the CSS in order to address this. There’s probably a “better” way to align the brightness percentage text using flexbox, but this works well enough:

card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
            flex-shrink: 0;
            flex-grow: 0;
          {% else %}
            flex-shrink: 1;
            flex-grow: 1;
          {% endif %}
          padding-left: 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              text-shadow: 0px 0px 7px orange;
              --primary-text-color: #1a1a1a;
            {% else %}
            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --primary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
            {% if states(config.entity) == 'on' %}
              position: absolute;
              right: 15px;
              top: 23px;
            {% else %}
            {% endif %}
          {% else %}
            flex-shrink: 1;
          {% endif %}
          flex-grow: 0;
          margin-right: 10px;
          padding: 0 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              text-shadow: 0px 0px 7px orange;
              --secondary-text-color: #1a1a1a;
            {% else %}
            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --secondary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
              --secondary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
          {% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
          {% if (rgb == true and color_temp == true) %}
            width: calc(100% - 190px);
          {% elif (rgb == false and color_temp == true) %}
            width: calc(100% - 136px);
          {% elif (rgb == true and color_temp == false) %}
            width: calc(100% - 136px);
          {% else %}
            width: calc(100% - 80px);
          {% endif %}
          left: 68px;
          top: 18.2%;
        }
        .slider-track-background {
          background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
          flex-grow: 9;
          flex-shrink: 1;
        {% else %}
          flex-grow: 0;
          flex-shrink: 0;
        {% endif %}
      }
      mushroom-state-info {
        display: flex;
      }

[0tto0o]

Can I ask: How did you set up which batteries will be shown?

[kbrown01]

Nice. I really appreciate this as a layout.
A few minor comments I am going to try and fix.

1. I think the width should be governed by state_attr(config.entity.‘supported_color_modes’) and not whether you say to show/hide controls (that you cannot have maybe). I would be surprised if people do not want to display some control if it is available but then again for generic implementation probably needs both like if light supports HS and you choose to show that control, then …

2. IMHO … the color of the “buttons” for temp, hs should not have anything to do with the color of the light (greatly simplifying this). The color of the state on the left is already there as well as the bar, the others are buttons and really should not take on characteristics of the rgb_color.

[TheWanderingTurkey]

I’m actually using this with decluttering-card and wanted the option to disable the controls for a couple of lights that erroneously report RGB support despite being temperature/brightness only, but I agree that this is a super specific use case not generally applicable to most people. My non-decluttered (“cluttered”? lol!) version looks like this:

type: custom:mushroom-light-card
entity: light.craft_room_wall_sconce
name: Wall Sconce
icon: mdi:wall-sconce
show_brightness_control: true
show_color_control: >-
  {{ state_attr(config.entity, 'supported_color_modes')|contains('rgb') or
  state_attr(config.entity, 'supported_color_modes')|contains('xy') }}
show_color_temp_control: >-
  {{ state_attr(config.entity, 'supported_color_modes')|contains('color_temp')
  }}
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
  action: toggle
hold_action:
  action: more-info
double_tap_action:
  action: none
layout: horizontal
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          padding-left: 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --primary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          flex-shrink: 1;
          flex-grow: 0;
          margin-right: 10px;
          padding: 0 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --secondary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}

            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --secondary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
              --secondary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            # --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% set rgb = (config.show_color_control != false) %}
          {% set color_temp = (config.show_color_temp_control != false) %}

          {% if (rgb == true and color_temp == true) %}
            width: calc(100% - 190px);
          {% elif (rgb == false and color_temp == true) %}
            width: calc(100% - 136px);
          {% elif (rgb == true and color_temp == false) %}
            width: calc(100% - 136px);
          {% else %}
            width: calc(100% - 80px);
          {% endif %}
          left: 68px;
          top: 18.2%;
        }
        .slider-track-background {
          background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_temp_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }

If you want the righthand buttons to follow the default color scheme rather than the RGB of the light, you could remove the mushroom-button:nth-child(2)$ and mushroom-button:nth-child(3)$ sections. I’ve tried both ways and I’m on the fence about which I prefer, but I see the appeal!

[kbrown01]

I like it. I also use decluttering (in fact this entire thing is 7 decluttering cards). These actually include other decluttering cards for mushroom-light, mushroom-chip for quick colors and currently custom button until I change them to mushroom for the 8 modes built-in plus speed control of the modes. SO easy to manage this way, decluttering is the best!

Going to make the modification now to extend the slider bar for the RGBW lights.

[madlan]

Sorry, was viewing the wrong group when I composed - previous issue was resolved with some hacking about at the css.

[madlan]

Here’s what I’ve managed to create from Rhys cards and the guide from Dimitri to replace my ui minimalist layout:
Dark:

Light:

Room Card: Room card with card mod (no UI minimalist) - Pastebin.com

card mod changes to Rhys top bar:

card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -8px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px ;

      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: 0px;
    }

I’ve only just started rooms, but will be using the light control from Tyler, which will work great in rooms that have two ceiling lights:

Light control: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #7498 by Numotiv

[WebPower (Karoly Papp)]

Hi, if you feel like it, insert the code here like everyone else who posts examples here.

[madlan]

Hi Karoly, certainly, I’m just cleaning it up a bit then I’ll update the post with the code + sources.

[Mobiledude (Ronin)]

Looking forward to your code. In the end they are starting to look like eachother

[AlexGreenUK (Alex Green)]

Would you care sharing the yaml and theme? It’s the perfect theme I have been looking for.

Thanks

[Noah]

I’ve been using your theme for a few months now, it makes it much easier to use on mobile.
Since version 2023.10, however, it no longer seems to work. Have you already created a new version?

[mase]

could you show what‘s not working?
don‘t have any problems on my side