Mushroom light slider color change help

Configuration Frontend
1

I need help with some Mushroom cards, I want to be able to change color on the lamp slider bar, i have tried some variants of code but without any luck, i think my problem is that i using different syntaxes??? new to coding btw, any tips? :slight_smile:

Skärmbild 2025-10-23 130943
Skärmbild 2025-10-23 130943248×134 1.05 KB

type: custom:mushroom-light-card
entity: light.koket
fill_container: false
show_color_control: false
show_color_temp_control: false
show_brightness_control: true
secondary_info: none
use_light_color: false
icon_color: light-grey
primary_info: name
icon: mdi:ceiling-light
name: "  "
card_mod:
  style: >
    {% set hour = now().hour %} {% set month = now().month %} {% set is_on =
    is_state(config.entity, 'on') %} {% set month_color = '#5F5F55' %} 

    {% if month >= 1 and month <= 3 %}
      {% set month_color = '#3ac5a4' %}
    {% elif month >= 4 and month <= 6 %}
      {% set month_color = '#37c876' %}
    {% elif month >= 7 and month <= 8 %}
      {% set month_color = '#07d049' %}
    {% elif month >= 9 and month <= 10 %}
      {% set month_color = '#de8121' %}
    {% elif month >= 11 and month <= 12 %}
      {% set month_color = '#b1d2f1' %}
    {% endif %}

    {% if is_on %}
      ha-state-icon {
        animation: wobbling 0.8s linear infinite alternate;
        color: {{ month_color }}99 !important; 
      }
    {% else %}
      ha-state-icon {
        color: #495a59; 
      }
    {% endif %}

    @keyframes wobbling {
      0% {transform: rotate(-5deg);}
      100% {transform: rotate(5deg);}
    }

    {% set background_color = 'transparent' if hour >= 6 and hour < 20 else
    '#181915' %} 

    ha-card {
      background-color: {{ background_color }};
      border: 2px solid {{ month_color }};
      transition: background-color 2s, border-color 2s; 
    }
2

here’s some styling for mushroom cards. Not sure where did you get the card mod yaml from but that seem like for a calendar.

3

I have tried those, they dont work because of “style: >” instead of just “style:”, when im removing the > the whole code stops working, so im just wondering if its possible to implent the change bar color code differently?
The calendar aspects of the code are for my auto changing border colors :slight_smile:

Skärmbild 2025-10-23 175716
Skärmbild 2025-10-23 175716445×447 13.1 KB

4

This seem to work for me. Maybe start with a basic light first.

light
light905×406 18.6 KB

type: custom:mushroom-light-card
entity: light.carport_light
use_light_color: false
show_brightness_control: true
card_mod:
  style:
    mushroom-light-brightness-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }
5

Can I ask the source of this code?

I believe this is what you are trying to achieve or at least a starting point.

card_mod:
  style: |
    {% set hour = now().hour %}
    {% set month = now().month %}
    {% set is_on = is_state(config.entity, 'on') %}
    {% set month_color = '#5F5F55' if month < 1 else '#3ac5a4' if month <= 3 else '#37c876' if month <= 6 else '#07d049' if month <= 8 else '#de8121' if month <= 10 else '#b1d2f1' %}
    ha-state-icon {
      {% if is_on %}
        animation: wobbling 0.8s linear infinite alternate;
        color: {{ month_color }};
      {% else %}
        color: #495a59;
      {% endif %}
    }
    @keyframes wobbling {
      0% {transform: rotate(-15deg);}
      100% {transform: rotate(15deg);}
    }
    ha-card {
      background: {{ 'transparent' if 6 <= hour < 20 else '#181915' }} !important;
      border: 2px solid {{ month_color }};
    }
    mushroom-light-brightness-control {
     --slider-color: lime !important;
     --slider-bg-color: blue !important;
       }
1 Like
6

Wow :face_with_peeking_eye: so easy… Im been trying to solve this for two days, thanks a LOT

1 Like
7

Happy to assist!

Check out the main Mushroom threads here and here.

2 Likes