How do you globally change Boot Strap Buttons Colors

Configuration Frontend
1

so i have the boot strap buttons for my one dashboard…
i been using several years from example i found online… and it uses grey for offline blue for off and yellow for on

but id like to change it globally in the dashbard raw code… so Blue is offline, Red is Off and Green is On

now there is code in the raw that covers it but it doesnt seem to do anythhing… there is a

button_card_templates:
  bootstrap_button_mini:
    template: bootstrap_button
    show_name: false
    size: 39%
    tap_action:
      action: none
  bootstrap_button_short:
    template: bootstrap_button
    show_icon: false
    show_label: true
    styles:
      label:
        - max-width: 90%
        - font-size: 0.9rem
        - color: var(--secondary-text-color)
        - margin: 2.5px 0
      card:
        - padding-top: 0px
        - padding-bottom: 0px
  bootstrap_button_person:
    template: bootstrap_button
    show_entity_picture: true
    color_type: card
    size: 60%
    state:
      - operator: default
        color: var( --ha-card-background, var(--card-background-color, red) )
  bootstrap_button:
    variables:
      red_state: false
      green_state: false
      blue_state: false
      percent: 0
    show_name: true
    show_state: true
    show_icon: true
    hold_action:
      action: none
    tap_action:
      action: more-info
    state:
      - operator: template
        value: '[[[ return variables.red_state ]]]'
        color: var(--label-badge-red)
        id: red_state
      - operator: template
        value: '[[[ return variables.green_state ]]]'
        color: var(--label-badge-green)
        id: green_state
      - operator: template
        value: '[[[ return variables.blue_state ]]]'
        color: var(--label-badge-blue)
        id: blue_state
    styles:
      name:
        - margin-top: 8px
        - color: var(--primary-text-color)
      state:
        - font-size: 0.9rem
        - color: var(--secondary-text-color)
        - padding: 3px 0 2px 0
        - display: block
        - width: 100%
        - color: |
            [[[
              if (!variables.percent)
                return 'var(--secondary-text-color)';
              return 'var(--primary-text-color)';
            ]]]
        - background: |
            [[[
              if (!variables.percent)
                return;
              return 'linear-gradient(to right, var(--accent-color, #f39c12), ' + variables.percent + '%, rgba(100,100,100,0.15) 0)';
            ]]]
    extra_styles: |
      :host, ha-card {
        height: 100%
      }

if i alter

 bootstrap_button:
    variables:
      red_state: false
      green_state: false
      blue_state: false
      percent: 0

then changes somewhat… but not the colors… also i not sure if this is a boot strap color or if its a button card color but i trying to change my boot strap and the buttons to change the color states and globablly cover all the buttons not have to repeat the code for each button

and this is one of the pops up i use that i want to to affect

              - type: custom:button-card
                template: bootstrap_button
                class: col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4
                entity: group.building_sound
                state_display: |
                  [[[
                    var count = states['sensor.building_sound_on'].state;
                    if (count == 1)
                      return '1 Device On';
                    else return count + ' Devices On';
                  ]]]
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      title: Building Sound
                      large: true
                      hide_header: false
                      content:
                        type: custom:bootstrap-grid-card
                        global_col_class: col-xl-2 col-lg-2 col-md-3 col-xl-4 col-4
                        cards:
                          - type: row
                            cards:
                              - entity: switch.stage_mixer_1
                                name: Stage Mixer
                                type: entity-button
                                icon: mdi:tune
                              - entity: switch.stage_amp_1
                                name: Stage Amp
                                type: entity-button
                                icon: mdi:amplifier
                              - entity: switch.building_door_1_speaker
                                name: Building Door Speaker 1
                                type: entity-button
                                icon: mdi:speaker
                              - entity: script.turn_on_sound_equipment_and_am640
                                name: Turn On Equip & 640
                                type: entity-button
                                icon: mdi:speaker
                                tap_action:
                                  action: perform-action
                                  perform_action: script.turn_on
                                  target:
                                    entity_id: script.turn_on_sound_equipment_and_am640
                              - entity: script.turn_off_sound_equipment_and_am640
                                name: Turn Off Equip & 640
                                type: entity-button
                                icon: mdi:speaker
                                tap_action:
                                  action: perform-action
                                  perform_action: script.turn_on
                                  target:
                                    entity_id: script.turn_off_sound_equipment_and_am640
2

Just a small note.
The “Boot Strap Buttons” is not something famous.
It is just a name of a template of a custom button-card; this template was created by someone & published somewhere.
Probably, your question is not about THIS particular button-card template (there are thousands of them published in Internet) - it is about ANY button-card.
So I would suggest you to create the simplest button-card for your entity & then learn how to customize colors. In this case, it would be easier for other people to assist you since they will not be scared by some huge button-card template.

3

ah ok ya its something old think 4 5 years ago or so

the simplest color one i use is

  - entity: switch.hot_water_tank_building
    name: Hot Water Tank
    icon: mdi:water
    secondary_info: last-updated
    card_mod:
      style: |
        :host {
        --card-mod-icon-color: 
        {% if states(config.entity) == 'on' %} 
          yellow
        {% elif states(config.entity) == 'off' %}
          green
        {% else %}
          blue
        {% endif %}
        ;
        }

but i do that code for every single line of entity

can i make that a global instead of writting that 100 times the card mod style

4
  1. Reusing of card-mod code is described here: main card-mod thread - 1st post - fantastic link - other stuff - reuse card-mod code.
  2. Since you initially asked about a custom button-card - note that in most cases, card-mod should not be used for button-card, it has own features to customize colors. Although there are exceptions where card-mod is the only way.
  3. For particularly your case with a “switch” entity: there is a way to set GLOBALLY for all switches same colors - yellow for ON, green for OFF - by using a custom theme. Docs.
5

ah ok sorry i guess i mix up things cuz the card button mods as i got a dashboard that is just the toggle switchs, and another with those buttons

i never notice and figured they all done by the same person didnt realize you 100% there is different coding

ok so the doc you you linked i made

frontend:
  themes:
    my_theme:
      state-{switch}-{on}-color: green
      state-{switch}-{off}-color: red
      state-{switch}-{unavailable}-color: blue

but i added it to the dashboard but says to the configuration file… but i trying to just do this to this specific dashboard

and i only know 1 way to load themes from the user name and choose the pre made themes i downloaded

i not sure how you load those and then set the my_theme to do the states…

unless you gotta edit the pre made themese?
i use the iso - dark mode themes for my dashboards

6

ah ok ill look

i did try editing the iso theme

and added
state-switch-on-color: green
state-switch-off-color: red
state-switch-unavailable-color: blue

but it didnt work… ill look i appreciate it…

7

No, you cannot (*).
The easiest way for you would be editing your custom theme locally.
Find a corr. yaml file for this theme, then find your variables and set own colors.

(*) there is a method allowing to override your theme colors by an external JS, but it might be an overkill.

8

It works:

test_minimal:
  state-switch-on-color: green
  state-switch-off-color: magenta

type: entities
entities:
  - entity: switch.test_switch
  - entity: switch.test_switch_2
state_color: true

image
image998×153 9.93 KB

Vars for unavailable do not exist.
You need to use “–state-unavailable-color”, but it is common for all domains.
Customizing it in a theme affects all unavailable entities:

image
image579×139 3.7 KB

I think you already sorted out that this is incorrect

Should be just “state-switch-on-color” and so on.

P.S. Do not forget to select your theme in a user profile page, do not forget to call “reload themes” services in Dev tools->Actions after editing a theme.

9

so this is my themes i going to do a full a reboot
the quick reload isnt doing anything

classic-header-color:
  app-header-background-color: "#009AC7"
  app-header-text-color: white #Header
  state-{switch}-{on}-color: green
  state-{switch}-{off}-color: red
  state-unavailable-color: blue

i did try editing the iso theme file it didnt work

and i tried

state-on-color: green
state-off-color: red

and i tried

state-switch-on-color

but didnt help going to try a full reboot and clear the cache to see if it will work still keeps coming up yellow and blue for on off

10

Not needed.

Check my comment above, this is wrong.

Must work.

For testing - create this new theme & try it:

test:
  state-switch-on-color: green
  state-switch-off-color: red
  state-unavailable-color: blue

and do not forget to reload themes as I wrote above.

11

ok its working now the quick reload didnt work when i did do a full reboot
then it worked… didnt need to clear the cache… guess something was stuck that it didnt like…

ya i had

  state-switch-on-color: green
  state-switch-off-color: red
  state-unavailable-color: blue

but it wasnt working but it started worked after i did a full reboot dunno why as usually a quick reload works…

i appreciate you helping least ill know how to edit other states later to the custom theme…

learn something new everyday

12

Did you reload themes in Dev tools - Actions?

image
image1537×409 21.1 KB

13

no i was doing
Developer Page —> Restart (Check and restart) page didnt know there was a restart under actions

i have 1 more question if you know
in my pop ups with the browswer mod i trying to add Text to the pop up window in the title or so… but it doesnt work… I tried in the actions browswer mod popup and added text for the title… and it doesnt even pop up i remember back when it was like v1 it would pop up… but now its not… if you dont know thats ok i keep looking but i wanted to add some text and not sure… as i dont really play with it i set it and forget it kinda thing

              - type: custom:button-card
                template: bootstrap_button
                class: col-xl-2 col-lg-2 col-md-3 col-sm-4 col-4
                entity: group.hotwater_tanks
                state_display: |
                  [[[
                    var count = states['sensor.hot_water_tanks_on'].state;
                    if (count == 1)
                      return '1 Tank On';
                    else return count + ' Tanks On';
                  ]]]
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      title: This Is A test
                      large: true
                      hide_header: false
                      content: 
                        title: test
                        type: custom:bootstrap-grid-card
                        global_col_class: col-xl-2 col-lg-2 col-md-3 col-xl-4 col-4
                        cards:
                          - type: row
                            cards:
                              - entity: switch.hot_water_tank_building
                                name: Building Tank
                                type: entity-button
                                icon: mdi:water
                              - entity: switch.hot_water_tank_house
                                name: House Tank
                                type: entity-button
                                icon: mdi:water
14

No need to restart a SERVER if you need to reload frontend themes.
Easier to just reload themes, takes less than 1 second (and restarting a server may take a few minutes).

15

Suggest to ask this question in a separate thread to avoid confusion.
Hopefully someone who uses browser_mod will help you!

As for this thread - if you sorted out the initial question “how to customize colors for a switch” - then please mark the thread as “solved”. Choose a post which contains a ready solution (could be yours, could be mine) or a post which helped you the most (& thus can help others) and mark it.

16

ah ok ya what i was doing was

just did Qucik Restart i did not know of this restart themes…

something new i just learned again… i appreciate it an ok ill check it off…

and ill make a new topic

thank you