Switch-checked-track-color has a semi transparent color on top?

Hi all,

I’ve got a quick question: apparently the slider of a switch has a dark semi-transparent color on top and I don’t know how to change it.

My theme:


    # Switches
    switch-checked-track-color:    rgba(103, 205, 103, 1) 
    switch-checked-button-color:   rgba(255, 255, 255, 1)
    switch-unchecked-track-color:  rgba(145, 145, 145, 1) 
    switch-unchecked-button-color: var(--switch-checked-button-color)
    # Toggles
    paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
    paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
    paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
    paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

    # Home Assistant override
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px
    app-header-text-color:       var(--primary-text-color)
    app-header-background-color: var(--primary-background-color)
    card-mod-theme: "Mushroom"
    card-mod-root: |
      app-toolbar {
        display: none;
          primary-background-color: rgb(0,0,0)


Can anyone point me in the right direction on how to use the exact color as how I’ve defined it in the theme?

Thanks in advance!


Did you solve this?

No, unfortunately I didn’t yet. I’ve been busy with other things haha. Do you have the same problem or do you have a clue how to fix this?

Hehe yeah. I’m trying to learn how to change these things that are nested. I found where it is but really don’t know how to apply it in card_mod.

</s> <s>"#view>hui-view>vertical-layout$#columns>div>hui-entities-card$#states>div>hui-toggle-entity-row$hui-generic-entity-row>ha-entity-toggle$ha-switch$div>div.mdc-switch__track"</s> <s>
In there is an opacity value that is like 0.53 or something by default. Should be 1 if you want to apply no opacity.

I found this in another post changing values in there but that did not work for me either

EDIT: Look at my other post below :slight_smile:

Never mind! I got it!

                $: |
                  .mdc-switch .mdc-switch__track {
                    opacity: 1 !important;

Thank you!
Strange that you can’t directly set the color. I’ll try to find the correct color tonight;

yaml + opacity = desired UI color
yaml = desired UI color - opacity

If something like this isn’t possible, I’ll just apply your card mod.

1 Like

To get back to my reply, the colors are calculated as follows:

const fgCol = { r: 255, g: 0, b: 0 };
const bgCol = { r: 0, g: 0, b: 0 };
const opacity = 0.5;

const flattenedColor = {
  r: opacity * fgCol.r + (1 - opacity) * bgCol.r,
  g: opacity * fgCol.g + (1 - opacity) * bgCol.g,
  b: opacity * fgCol.b + (1 - opacity) * bgCol.b,

So if you’re going to ‘reverse’ calculate the colors, you might end up with strange/invalid colors.


I want the color rgb(103, 205, 103) , reverse calculating with opacity 0.53 gives me rgb(174,229,174) in the event of a completely white background. However, if the background is black ( rgb(0,0,0)) it would return the color rgb(329,431,329) which is invalid. Makes sense, because you can’t make a color darker than black and opacity can always make it lighter.

Conclusion: it is better to use your card mod, especially since Home Assistant supports light/dark themes that might result in strange colors.