Protobi

← All help posts

View post

## Attributes to change colors

There are two different attributes to describe colors for an element.  "color" attribute is for the element color, for organizational purpose, while "colors" attribute customize colors for stacked, bar, column and other charts.

## Element Color

You can customize the element colors for the square and circle in the upper left corner, or the triangle in a compacted list.  Often, a well organized project will have each section in a different color.  Alternatively, you could mix the color like the image above for a more dramatic visual impact.

You can use the color menu to change the color, or directly edit the "color" attribute to enter a CSS color or 3/6 digit hex color code.

## Colors and Themes

The "colors" attribute modifies the colors for charting purpose.  Valid values are:

"ascending" - An interpolated color theme going from low values to high values

"descending" - and interpolated color theme going from high values to low values

an array of colors - colors are assigned based on the array listed, and start from the beginning of array if there are more items than colors listed. e.g.

"colors" : \["red", "blue", "green"\] will assign the first item to red, second to blue, and third to green, and fourth to red again.

a theme - themes can be created for the entire project, and then used in multiple elements

"colors" : "rainbow" will use the rainbow theme color, if defined.

## Creating themes

Themes can be created under the $root element, which can be edited in the upper left trigram:

Under the $root, if the colors attribute is created as an object with "theme":\["color1","color2", ... \] as attributes, then these can be used for various elements.  e.g.

```
"colors": {
        "rainbow": [
            "purple",
            "red",
            "orange",
            "yellow",
            "green",
            "blue"
        ],
        "ascending": [
            "blue",
            "red"
        ],
        "descending": [
            "#9B6",
            "#39c"
        ]
```

These assign specific themes to be used within all elements.

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Publishing

Content

Tools

Danger zone