Try setting the secondary text color like this:
type: custom:mushroom-climate-card
entity: climate.air_conditioner
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'rgb(var(--rgb-green))' if not is_state('climate.air_conditioner', 'off') else 'rgb(var(--rgb-disabled))' }};
}
It works!! Thanks!!!
So my individual light color wheel page is also complete.
it is also greyed out when turned off.
The light can be turned on and off with a simple click to the picture.
Am starting to think about a tablet dashboard inspired by Mushroom and Minimalist, keen to see everyones creations for tablets so far 
looking good!
Do you mind sharing your code?
Question/Request concerning the climate card:
Is it yet possible to change the steps of + and - to 0,5 instead of 0,1 ?
Edit: Nevermind, just had to set ‘precision: 0.5’ in the climate.yaml
Sure
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: picture-entity
show_name: false
show_state: false
camera_view: auto
entity: light.extended_color_light_1_2
image: local/png2/spot3.png
tap_action:
action: toggle
double_tap_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: script.browser_mode_pop_up_close
- type: custom:mushroom-template-card
primary: Tavan Sol
entity: light.extended_color_light_1_2
secondary: Salon
picture: /local/png/colorbulb15.png
tap_action:
action: toggle
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 43px;
height: 66px;
margin-left: -5px !important;
}
ha-card {
padding: 1px;
background: rgba(var(--rgb-primary-background-color), 0.1);
}
- type: custom:light-entity-card
shorten_cards: false
consolidate_entities: true
child_card: false
hide_header: true
header: ''
color_wheel: true
persist_features: true
brightness: true
color_temp: true
white_value: false
color_picker: true
smooth_color_wheel: true
speed: false
intensity: false
force_features: true
show_slider_percent: true
full_width_sliders: false
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
speed_icon: speedometer
intensity_icon: transit-connection-horizontal
entity: light.extended_color_light_1_2
effects_list: false
card_mod:
style: |
ha-card {
padding: -15px;
background: rgba(var(--rgb-primary-background-color), 0.1);
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.1);
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
You have to install Light entity card from Hacs for the color wheel.
Does the lamp get always the color you select?
thank you very much! fixed doing to tabs left
nope. It is just an image. But it can be done with a template I guess.
How are you greying out the picture when it’s off?
It is a picture entity card with a png on it. Picture entity card has greying option natively. When the state of the light turns into off, the picture is also turned into black and white. But using picture entity card is not your only option. You can also use card-mod to make the picture black and white during off state.
How can i get this kind of icons?
This is from the climate mushroom card: Cooling - Idle - Heating - Off
I want to use them on a template mushroom card… but i will love to be able to use them as any convination that i want…
Your question is very vague. You can achieve the same result by setting the badge.
Do you know how to do that with card mod?
What card do you plan to use?
I plan to add a picture to the entities that will appear in this auto-entities and make
icon_type: entity-picture
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
state: 'off'
entity_id: /[li]ghts/
options:
type: custom:mushroom-light-card
vertical: true
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod: null
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
--ha-card-background: transparent;
--card-primary-font-size: 12px;
--icon-symbol-size: 55px;
}
Sorry I don’t use this card but
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi
primary: null
secondary: Sleep
entity: input_boolean.notify_home3
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: url( '/local/icons/automation/sleep.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home3', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: #1a1a2a;, 1.25);
{% if is_state('input_boolean.notify_home3', 'on') %}
{% else %}
background: rgba(var(--rgb-primary-background-color), 0.3);
{% endif %}
width: 66px;
border-radius: 30px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
card_mode:
style: |
:host {
background: rgba(var(--rgb-primary-background-color), 8.5);
border-radius: 50px;!important
}
As in this example
style: |
mushroom-card {
background: url( '/local/icons/automation/sleep.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home3', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
You can replace input.boolean.notify_home3 with your light entity and with that as long as the light stays on it will be colored, when its off css will give it a grayscale.
There’s nothing between your if and else is that expected?
Yes that is because there is only one condition which is the state of input_boolean.notify_home3.