Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

Share your Projects!
,
8561

This code is the one that works with my light that also doesnt have rgb_color just as yours.

image
image447×712 18.9 KB

image

Code 
type: custom:mushroom-light-card
entity: light.kitchen_down_light_1
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;
      }

But it is the same as the code here: