This should do what you need. It offsets the hue of the color elements in degrees:
Cool:
Heat:
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.office_air_conditioner
picture: /local/aircon.png
content: '{{ state_attr(entity, ''friendly_name'') }}'
card_mod:
style: |
ha-card {
{{ 'filter: hue-rotate(140deg);' if is_state('climate.office_air_conditioner', 'heat') }}
}
Glad you finally got this sorted. I have updated the original post to list the cards required.
This is what I am seeing.
home:
not_home:
type: custom:mushroom-person-card
entity: person.rhys
primary_info: none
secondary_info: none
use_entity_picture: true
card_mod:
style: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state('person.rhys', 'not_home') }}
}
no but i like yours!
Thanks for sharing Rhys! So I used your code with my person, this doesn’t work on Safari (on Mac and iOS) but it does work in Firefox.
So I’ve narrowed it down to the culprit being CSS in Safari.
Currently messing around with
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Not sure if this syntax is correct, it doesn’t work yet:
{{ '-webkit-transform: translateZ(0);-webkit-perspective: 1000;-webkit-backface-visibility: hidden;-webkit-filter: grayscale(100%);filter: grayscale(100%);' if is_state('person.step', 'not_home') }} }
Sorry, not a mac man 
. Using -webkit-filter: grayscale(100%); should do the trick.
From the amount of troubleshooting that I’ve done, the normal filter: grayscale(100%) should work with Safari 15+. A snippet of code on JSFiddle works perfectly fine in the browser.
It’s like Home Assistant overwrites/overrides the image to undo the grayscale (but only on Safari?).
I’ll leave it as it is for now as I am no CSS expert, if anyone else on Safari (Mac/iOS) has a solution, please do let me know.
hey like you room card any chance if the code please?
Trying to change the font color and show no icon but so far it’s not working out…
Anyone have any suggestions?
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.12hourtime
icon: ""
card_mod:
style: |
ha-card {
width: 50%;
color: "#999999";
--chip-font-weight: bold;
--chip-font-size: 25px;
}
All the css is working except font color 
How do I show NO icon?
Thank you all!
Try:
ha-card {
width: 50%;
--text-color: #999999;
--chip-font-weight: bold;
--chip-font-size: 25px;
}
Thank you!!! That worked great!
Thank you all! I figured out the no icon by simply putting “icon: none”
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.12hourtime
icon: none
card_mod:
style: |
ha-card {
width: 50%;
--text-color: #000000;
--chip-font-weight: bold;
--chip-font-size: 25px;
}
Couple questions on the media card - first, any plans to include input selector on the card (w/o going into more info) and second, and plans to modify the power button/service so it can send magic packets to turn on TVs and such that WoL? Thanks! Love the mushroom cards, makes for a very straightforward way to create a nice looking dashboard.
Really appreciate (and I know everyone else does too) how willing you are to share and support.
Could you give me a nudge as to what style modifiers would bring my avatars more in-line with the example you provided? Ideally I’d like as little rectangular whitespace as possible and the dark background encircling the avatar. I believe the code is pretty much verbatim, so I’m guessing it’s a function of one of the other styles applied e.g. to the stack-in card I’m using or something. Still fiddling around.
I’ve taken a few scans through the thread but it’s getting tougher to find directed topics 
[actuallly, maybe an FAQ or compendium would be cool… rainy day project] But anyhow, my apologies if I missed an obvious example.
decluttering_templates:
person-home:
card:
type: custom:mushroom-person-card
entity: '[[entity]]'
primary_info: none
secondary_info: none
use_entity_picture: true
card_mod:
style: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state('[['entity']]', 'not_home') }}
}
How did you get that roller pic on the card?
For the avatar, try this:
Cant Change secondary text color: I want to ahve green if the constact sensor is on, else, standar color. the code is:
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') else '' }};;
}
The complete code is the following:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
AC
secondary: >
{%if is_state('climate.ac_estar', 'off')%} off {% else %}
{%if states('counter.aux_ac_estar')|int == 0 and
is_state('climate.ac_estar', 'heat')%} Idle {% else %} {%if
states('counter.aux_ac_estar')|int == 1 %} bajo {% else %} {%if
states('counter.aux_ac_estar')|int == 2 %} med {% else %} {%if
states('counter.aux_ac_estar')|int == 3 %} alto {% endif %} {% endif
%} {%
endif %} {% endif %} {% endif %}
icon: mdi:air-conditioner
icon_color: |-
{% if is_state('climate.ac_estar', 'heat') %}
orange
{% else %}
grey
{% endif %}
entity: climate.ac_estar
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') else '' }};;
}
- type: custom:mushroom-climate-card
entity: climate.ac_estar
name: AC Estar
icon: mdi:air-conditioner
hvac_modes:
- heat
show_temperature_control: true
collapsible_controls: false
fill_container: false
icon_type: none
primary_info: none
secondary_info: none
Hi @strangehadron,
nice work. Can you tell me how you did the menu pane on the left?
I want to build something similar where on the left I have a menu area and depending on the section, it loads a specific dashboard on the right.
If you can share what you used and how you arranged it this way that would be awesome! Thanks
Hi,
same here I would be very interested how you did the sidebar on the left with the menu? What cards and layout options did you use to make it fit?
You were almost there. Should be like this:
--secondary-text-color: {{ 'green' if is_state('binary_sensor.contact_sensor_ac_estar_contact', 'on') }};