Custom color selector

[misterlyster]

Goal

I created a module to change the background color or a button which uses the custom vars in the theme yaml. I see IzeQube has created something similar, but uses a dropdown of the HA primary ui colors (#1246). The dropdown has the color name AND a small circle which shows the actual color.

Looking to see if possible to add something similar, but for my custom defined colors?

Also, I cannot seem to default my dropdown to show the current value. Added an "initial:" to the selector but seems to ignore.

Source Yaml

IzeQube module:
https://github.com/Clooos/Bubble-Card/discussions/1246

Which step did you already try?

My example:


background_active_color:
    name: "Customize the button container color"
    version: "v1.0"
    creator: "me"

    unsupported:
        - horizontal-buttons-stack
        - separator
        - climate
        - cover
        - media
        - select

    code: |
        .bubble-button-background {
          background-color: ${state === 'on' ? 'var(--bubble-active-'+this.config.background_active_color+'-background-color)' : 'var(--bubble-main-background-color)'} !important;
        }
    editor:
      - label: "Active Color"
        #type: select
        selector: 
            select:
                mode: dropdown 
                options:
                  - label: "purple 1"
                    value: "1"
                  - label: "purple 2"
                    value: "2"           
                  - label: "blue 1"
                    value: "3"           
                  - label: "blue 2"
                    value: "4"           
                  - label: "yellow 1"
                    value: "5"           
                  - label: "yellow 2"
                    value: "6"           
                  - label: "green 1"
                    value: "7"           
                  - label: "green 2"
                    value: "8"           
                  - label: "white"
                    value: "9"           
                initial: ${this.config.background_active_color}

Problem

The ui_color selector built in to HA uses the primary ui colors, looking to see how I can utilize that funcitonality, but with my own colors.

Read the documentation

• I have read the documentation