Temperature controls styling, hvac_modes and icons

[AndreasMouskos]

Hello I am trying to adjust the styling color of temperature controls, hvac mode icons and icons when you press the hvac mod to be white but I can't figure it out. Any chance you can help? Here is my code and a screenshot:

`type: custom:mushroom-climate-card
entity: climate.midea_ac_153931628388094
hvac_modes:

• heat_cool
• heat
• cool
• fan_only
• dry
  show_temperature_control: true
  collapsible_controls: false
  name: Air Conditioner
  secondary_info: state
  card_mod:
  style: |
  ha-card {
  --card-primary-color: #ffffff;
  --card-background-color: rgba(0, 0, 0, 0.3) !important; /* Semi-transparent background /
  --card-primary-color: #ffffff !important; / Default text color /
  --card-secondary-color: #ffffff !important; / Ensure state text color is white /
  --card-border-radius: 10px !important; / Rounded corners /
  --card-box-shadow: none !important; / Remove shadow /
  --card-secondary-font-color: #ffffff
  display: flex !important; / Enable flexbox /
  align-items: center !important; / Vertically center items /
  justify-content: center !important; / Horizontally center items /
  padding: 16px !important; / Add padding /
  }
  mushroom-shape-icon {
  {% if is_state(config.entity, 'heat_cool') %}
  --card-mod-icon: mdi:autorenew;
  animation: spin 3s ease-in-out infinite alternate;
  {% elif is_state(config.entity, 'heat') %}
  --card-mod-icon: mdi:fire;
  animation: heat 2s infinite;
  {% elif is_state(config.entity, 'cool') %}
  --card-mod-icon: mdi:snowflake;
  animation: cool 6s ease-in-out infinite;
  {% elif is_state(config.entity, 'dry') %}
  --card-mod-icon: mdi:water-percent;
  animation: dry 1.5s linear infinite;
  {% elif is_state(config.entity, 'fan_only') %}
  --card-mod-icon: mdi:fan;
  animation: spin 1s linear infinite;
  {% else %}
  --card-mod-icon: mdi:air-conditioner;
  {% endif %}
  display: flex;
  color: white !important; / Ensure icon color is white */
  }
  @Keyframes cool {
  0%, 100% { transform: rotate(25deg); }
  25% { transform: rotate(-25deg); }
  50% { transform: rotate(50deg); }
  75% { transform: rotate(-50deg); }
  }
  @Keyframes heat {
  0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
  10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
  20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
  30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
  40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
  50% { --icon-color: rgba(var(--rgb-red), 0); }
  }
  @Keyframes dry {
  0%, 100% { --icon-symbol-size: 21px; }
  10%, 90% { --icon-symbol-size: 22px; }
  20%, 80% { --icon-symbol-size: 23px; }
  30%, 70% { --icon-symbol-size: 24px; }
  40%, 60% { --icon-symbol-size: 25px; }
  50% { --icon-symbol-size: 26px; }
  }
  `

[AndreasMouskos]

Figured out the temp controls and +- icons. Can't figure out how to make the temperature number white. Please help!