How to change default tile card colors?

Configuration Frontend
1

I was using a 100% mushroom card dashboard and I was using some custom colors for the colors selection; here is the cone in the theme file:

  # Colors
  mush-rgb-red: 243, 139, 168
  mush-rgb-pink: 245, 194, 231
  mush-rgb-purple: 203, 166, 247
  mush-rgb-deep-purple: 180, 190, 254
  mush-rgb-indigo: 137, 180, 250
  mush-rgb-blue: 116, 199, 236
  mush-rgb-light-blue: 133, 193, 220
  mush-rgb-cyan: 137, 220, 235
  mush-rgb-teal: 148, 226, 213
  mush-rgb-green: 166, 227, 161
  mush-rgb-light-green: 166, 209, 137
  mush-rgb-lime: 229, 200, 144
  mush-rgb-yellow: 249, 226, 175
  mush-rgb-amber: 239, 159, 118
  mush-rgb-orange: 250, 179, 135
  mush-rgb-deep-orange: 239, 159, 118
  mush-rgb-brown: 121, 85, 72
  mush-rgb-grey: 131, 139, 167
  mush-rgb-blue-grey: 98, 104, 128
  mush-rgb-black: 0, 0, 0
  mush-rgb-white: 205, 214, 244

Can I do something similar for the color selection of the tile card?
Thank you

2

Yes, these are the theme variables to use (with my colours):

  ### State colours ###
  state-default-color: '#395274' # dark blue-grey
  state-alarm_control_panel-armed_away-color: '#e45e65' # red
  state-alarm_control_panel-armed_night-color: '#039be5' # blue
  state-alarm_control_panel-armed_custom_bypass-color: '#e0b400' # yellow
  state-alarm_control_panel-arming-color: '#ff8000' # orange
  state-alarm_control_panel-disarmed-color: '#0da035' # green
  state-alarm_control_panel-disarming-color: '#ff8000' # orange
  state-alarm_control_panel-pending-color: '#ff8000' # orange
  state-alarm_control_panel-triggered-color: '#e45e65' # red
  state-alert-off-color: '#0da035' # green
  state-alert-on-color: '#e45e65' # red
  state-automation-color: '#e0b400' # yellow
  state-binary_sensor-on-color: '#e0b400' # yellow
  state-binary_sensor-off-color: '#395274' # dark blue-grey
  state-calendar-color: '#039be5' # blue
  state-camera-color: '#039be5' # blue
  state-climate-auto-color: '#ff8000' # orange
  state-climate-cool-color: '#039be5' # blue
  state-climate-dry-color: '#e0b400' # yellow
  state-climate-fan_only-color: '#0da035' # green
  state-climate-heat-color: '#e45e65' # red
  state-climate-heat-cool-color: '#b200ff' # purple
  state-climate-idle-color: '#395274' # dark blue-grey
  state-cover-color: '#b200ff' # purple
  state-device_tracker-active-color: '#039be5' # blue
  state-device_tracker-home-color: '#e0b400' # yellow
  state-device_tracker-inactive-color: '#395274' # dark blue-grey
  state-fan-color: '#e0b400' # yellow
  state-group-color: '#e0b400' # yellow
  state-humidifier-color: '#039be5' # blue
  state-input-boolean-color: '#e0b400' # yellow
  state-light-active-color: '#e0b400' # yellow
  state-lock-jammed-color: '#e45e65' # red
  state-lock-locked-color: '#395274' # dark blue-grey
  state-lock-pending-color: '#ff8000' # orange
  state-lock-unlocked-color: '#e0b400' # yellow
  state-media_player-active-color: '#e0b400' # yellow
  person-home-color: '#e0b400' # yellow
  state-person-not-home-color: '#395274' # dark blue-grey
  state-person-zone-color: '#039be5' # blue
  state-remote-color: '#e0b400' # yellow
  state-script-color: '#e0b400' # yellow
  state-sensor-battery-high-color: '#0da035' # green
  state-sensor-battery-low-color: '#e45e65' # red
  state-sensor-battery-medium-color: '#ff8000' # orange
  state-sensor-battery-unknown-color: '#8A8A8A' # Off (Mid-Grey)
  state-siren-color: '#e45e65' # red
  state-sun-above_horizon-color: '#e0b400' # yellow
  state-sun-below_horizon-color: '#395274' # dark blue-grey
  state-switch-on-color: '#e0b400' # yellow
  state-switch-off-color: '#395274' # dark blue-grey
  state-timer-color: '#e0b400' # yellow
  state-update-active-color: '#e45e65' # red
  state-update-installing-color: '#ff8000' # orange
  state-vacuum-active-color: '#e0b400' # yellow
3

Are these the one that I can find here in the tile card?

image
image467×1131 34.3 KB

Thank you

4

No. Those are:

      --rgb-primary-color: 3, 169, 244;
      --rgb-accent-color: 255, 152, 0;
      --rgb-disabled-color: 189, 189, 189;
      --rgb-primary-text-color: 33, 33, 33;
      --rgb-secondary-text-color: 114, 114, 114;
      --rgb-text-primary-color: 255, 255, 255;
      --rgb-card-background-color: 255, 255, 255;
      --rgb-red-color: 244, 67, 54;
      --rgb-pink-color: 233, 30, 99;
      --rgb-purple-color: 156, 39, 176;
      --rgb-deep-purple-color: 103, 58, 183;
      --rgb-indigo-color: 63, 81, 181;
      --rgb-blue-color: 33, 150, 243;
      --rgb-light-blue-color: 3, 169, 244;
      --rgb-cyan-color: 0, 188, 212;
      --rgb-teal-color: 0, 150, 136;
      --rgb-green-color: 76, 175, 80;
      --rgb-light-green-color: 139, 195, 74;
      --rgb-lime-color: 205, 220, 57;
      --rgb-yellow-color: 255, 235, 59;
      --rgb-amber-color: 255, 193, 7;
      --rgb-orange-color: 255, 152, 0;
      --rgb-deep-orange-color: 255, 87, 34;
      --rgb-brown-color: 121, 85, 72;
      --rgb-grey-color: 158, 158, 158;
      --rgb-blue-grey-color: 96, 125, 139;
      --rgb-black-color: 0, 0, 0;
      --rgb-white-color: 255, 255, 255;
1 Like
5

I was able to change the colors to my liking, just a little note;
If you want to change the colors in your theme you must remove

--rgb-

like this:

  red-color: "#f38ba8"
  pink-color: "#f5c2e7"
  purple-color: "#cba6f7"
  deep-purple-color: "#b4befe"
  indigo-color: "#89b4fa"
  blue-color: "#89b4fa"
  light-blue-color: "#74c7ec"
  cyan-color: "#89dceb"
  teal-color: "#94e2d5"
  green-color: "#a6e3a1"
  light-green-color: "#a6e3a1"
  lime-color: "#f9e2af"
  yellow-color: "#f9e2af"
  amber-color: "#fab387"
  orange-color: "#fab387"
  deep-orange-color: "#fab387"

Do you know how to change the color of the top bar? The one with the views title.
Thank you