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

Share your Projects! Themes
1

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:

Mushroom:

    # 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;
      }
    modes:
        light: 
          {}
        dark:
          primary-background-color: rgb(0,0,0)

image
image

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!

2 Likes
2

Did you solve this?

3

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?

4

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:

5

Never mind! I got it!

    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch .mdc-switch__track {
                    opacity: 1 !important;
                  }
6

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

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

1 Like
7

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.

E.g.

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.