Change color based on a condition#

Let’s say that you want to change the color of a Shape based on the status of the battery, so, for example, you want a shape to be yellow when the battery is discharging and green when charging, this can be done in many ways, so let’s start for the simplest example.

Simple color change#

• Open the Advanced Editor and Create a Shape using the “+” on the top right
• Change the Shape aspect according to your needs
• Go in the “Paint” section and select the color preference
• On the top bar the “formula” icon will appear, select it
• Now the preference has been switched to a “Formula” preference so it’s now controlled by an expression rather than a simple value, click the preference to edit the Formula
• Type $if(bi(charging) = 0, #FFFF00, #00FF00)$ and press the “ok” button on top right
• Done! Your shape will be #FFFF00 when battery is discharging and #00FF00 (green) otherwise

Color change with globals#

What if you want to change the color based on the battery status but also keep it easy to change those colors using the picker? Well, in this case you need to introduce the Globals, so:

What are Global Variables?#

Global Variables (GV) in Kustom are user-defined settings that can be applied across multiple modules or components simultaneously. They allow you to control various aspects of your design from a central location, making it easier to maintain consistency and implement theme-wide changes quickly.

How to use Globals#

If you open the Advanced Editor, you’ll notice a tab called “globals” on the first “root” container. This section allows you to add, remove, and modify Global variables.

Read past values of a global with GH#

A global normally holds one value, the current one. Every time the preset is saved Kustom also keeps the old value in a small history, and $gh()$ is how you read it back. This is what you use to show a trend, a delta, or a small chart of how a value moved over time.