Just add this line a the end of your theme
Caule Dark Gray:
# Change the value below 8px to 0px to remove the rounded corners
ha-card-border-radius: 8px
# Main colors
# ...
# Mushroom variables
mush-rgb-state-cover: 170, 50, 81
1 Like
I added at end of theme
# Mushroom variables
mush-rgb-state-cover: 170, 50, 81
Caule Dark Gray:
# Change the value below 8px to 0px to remove the rounded corners
ha-card-border-radius: 8px
# Main colors
primary-color: "#acacac"
light-primary-color: "#e2e2e2"
graph-color: var(--primary-color)
primary-background-color: "#1D1B1E"
secondary-background-color: var(--primary-background-color)
divider-color: "#37373D"
disabled-color: "#666666"
# Text colors
primary-text-color: "#e5e5e5"
secondary-text-color: var(--disabled-color)
text-primary-color: "#E5E5E5"
disabled-text-color: var(--disabled-color)
# Sidebar colors
sidebar-icon-color: var(--primary-color)
sidebar-text-color: var(--primary-text-color)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: var(--light-primary-color)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# Icons colors
state-icon-color: var(--disabled-color)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--primary-background-color)
# Settins and colors of Mini Media Player
mini-media-player-icon-color: var(--primary-color)
mini-media-player-accent-color: var(--primary-color)
mini-media-player-progress-height: 8px
# Papers slider colors
paper-slider-knob-color: var(--primary-color)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-container-color: var(--disabled-color)
# Labels colors
label-badge-background-color: var(--divider-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: var(--primary-color)
label-badge-blue: var(--light-primary-color)
# Cards colors
ha-card-background: "#2A282D"
paper-card-background-color: var(--ha-card-background)
paper-listbox-background-color: var(--primary-background-color)
# Toggle button colors
paper-toggle-button-checked-button-color: var(--primary-color)
paper-toggle-button-checked-bar-color: var(--light-primary-color)
paper-toggle-button-unchecked-button-color: var(--disabled-color)
paper-toggle-button-unchecked-bar-color: var(--primary-background-color)
# Switch colors
switch-checked-color: var(--paper-toggle-button-checked-button-color)
switch-unchecked-button-color: var(--paper-toggle-button-unchecked-button-color)
switch-unchecked-color: var(--paper-toggle-button-unchecked-bar-color)
switch-unchecked-track-color: var(--paper-toggle-button-unchecked-bar-color)
# Table colors
table-row-background-color: var(--divider-color)
table-row-alternative-background-color: var(--secondary-background-color)
card-background-color: var(--primary-background-color)
#Animated icons
weather-icon-clear-night: url("/hacsfiles/themes/caule-themes-pack-1/clear-night.svg")
weather-icon-cloudy: url("/hacsfiles/themes/caule-themes-pack-1/cloudy.svg")
weather-icon-fog: url("/hacsfiles/themes/caule-themes-pack-1/fog.svg")
weather-icon-lightning: url("/hacsfiles/themes/caule-themes-pack-1/lightning.svg")
weather-icon-lightning-rainy: url("/hacsfiles/themes/caule-themes-pack-1/lightning-rainy.svg")
weather-icon-partlycloudy: url("/hacsfiles/themes/caule-themes-pack-1/partlycloudy.svg")
weather-icon-pouring: url("/hacsfiles/themes/caule-themes-pack-1/pouring.svg")
weather-icon-rainy: url("/hacsfiles/themes/caule-themes-pack-1/rainy.svg")
weather-icon-hail: url("/hacsfiles/themes/caule-themes-pack-1/hail.svg")
weather-icon-snowy: url("/hacsfiles/themes/caule-themes-pack-1/snowy.svg")
weather-icon-snowy-rainy: url("/hacsfiles/themes/caule-themes-pack-1/snowy-rainy.svg")
weather-icon-sunny: url("/hacsfiles/themes/caule-themes-pack-1/sunny.svg")
weather-icon-windy: url("/hacsfiles/themes/caule-themes-pack-1/windy.svg")
weather-icon-windy-variant: url("/hacsfiles/themes/caule-themes-pack-1/windy-variant.svg")
weather-icon-exceptional: url("/hacsfiles/themes/caule-themes-pack-1/exceptional.svg")
# Shadown
ha-card-box-shadow: "inset 0px 0px 0px 0px var(--divider-color)"
# HACS
hacs-badge-color: var(--primary-color)
link-text-color: var(--disabled-color)
markdown-code-background-color: var(--divider-color)
google-blue-500: var(--primary-color)
accent-color: var(--light-primary-color)
hacs-chip-color: var(--primary-color)
# Mushroom variables
mush-rgb-state-cover: 170, 50, 81
I’m looking for a way to make a mushroom chip (open sidebar menu) only display on mobile devices. Is there an easy way to achieve this?
Hi All,
Is it possible to change color icon based on state:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.diningroom_detection
content_info: name
What use the chips for my motion sensors but they not change color as default
6 Likes
Saw the Youtube video on this… this is amazing!!!
interesting card, you can add chips in your header for example Header Cards - add badges and cards to the header - Share your Projects! - Home Assistant Community (home-assistant.io)
2 Likes
Hi all! Love the mushroom cards! I had a couple questions hoping you smarter folks can help me with 
Can you theme just the mushroom cards (much like you can do with the oob light card) so you can use a different theme at the view level?
Thanks!
Hey is there any way I can change the text alignment for the title card?
can anyone help me out?
How can you set 2 cards in a one card panel ? The purpose of the panel view (1 card) is to have only one card.
Is there a way to use the custom light card (with colors and temp) on a group of lights? Manually changing the entity to “group.” kind of works, but it removes the color/temp controls.
Thanks, but also not really (unless I’m missing something). I have multiple light groups setup that way. The actual grouping works great.
The issue is when adding a Custom Mushroom Light Card. By default it only displays light. entities, no group entities. I can force a group entity which mostly works great, it just hides the color/temperature options.
It’s not an issue. Groups don’t support color/temperature option. You must use light group for this. Mushroom uses attributes to determine which feature is supported. Group doesn’t have light mode attributes.
1 Like
Thank you! can you helpp with multiple if statements. example iff entity heat “red” if cool “blue” else if “grey”?
is there a way to create a chip card without icon?
if I use a blank icon the white space is still there.
I’m looking for the same option.
To take it a step further, I’m also looking for examples of changing the chip’s icon color based on state or range of numerical value.
1 Like
Thank you for this fantastic collection of cards!
I have a question about the Template card:
The left card is a template card, the right one is a entity card. Both entities are turned off.
Is there a way to gray out the white icon, like the entity card does?
Hoping for a little help, I cannot change the icon colour with a mushroom card entity 
Green for Locked, else Red
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-entity-card
entity: lock.front_door
layout: vertical
tap_action:
action: toggle
icon_color: ‘{{ is_state(“lock.front_door”, “locked”) | iif(“green”, “red”) }}’
3 Likes