Widget Color Settings

You can specify a widget's color controls in your Widget Config file.

Here's an example of a color setting called textColor:

"settings": [
    {
        "name": "textColor",
        "type": "color",
        "defaultValue": "#ff0000",
        "defaultAutoColor": "lightvibrant"
    }
]

Interacting with color settings

All widget settings are injected into to the settings property of the Hologram object.

this.settings.nameOfSetting

For example, to access the above example in your code you'd do this:

this.settings.textColor

CSS Variables

You will typically use your color settings as CSS variables so that changes made via the color controls in the interface are instantly updated in the widget.

To convert your color settings into CSS variables add the following code in your index.js file:

// Get the user defined colors
this.fetchAllColors((colors) => {
    // Convert colors to css variables so they can be used
    // in CSS or in element style parameters in your HTML template
    this.addCssVariables(colors)
})

The callback is automatically called when a user edits the colors, or when an "auto color" needs to be updated due to a wallpaper change.

This function will typically be placed into the mounted function in your code:

export default {
    extends: HologramWidget,
    mounted() {
        this.fetchAllColors((colors) => {
            this.addCssVariables(colors)
        })
    },
    // ...
}

The above example will be turned into a variable that you can use in your CSS:

.some-class {
    color: var(--textColor);
}

Or directly in your HTML tags:

template: /*html*/ `
        <div style="color:var(--textColor);"></div>
    `

Auto Colors

There are six available automatic colors. The value of these colors is set according to the color data in a wallpaper.

• darkvibrant
• darkmuted
• muted
• vibrant
• lightvibrant
• lightmuted

Here's an example of how those variables are used:

"settings": [

    {
        "name": "backgroundColor",
        "type": "color",
        "defaultValue": "#000000",
        "defaultAutoColor": "darkmuted"
    },
    {
        "name": "borderColor",
        "type": "color",
        "defaultValue": "#666666",
        "defaultAutoColor": "vibrant"
    },
    {
        "name": "textColor",
        "type": "color",
        "defaultValue": "#ff0000",
        "defaultAutoColor": "lightvibrant"
    }

]