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:

Crescent Moon Shape#

This recipe explains how to combine formulas and paths to create a dynamic shape in Kustom

Step 1: Create a new Shape Module#

In your Kustom editor, create a new Shape module. You can do this by:

1. Tapping the “+” button
2. Selecting “Shape”

In the shape module, select “Path” as the shape type. This will allow you to define a custom shape using SVG path commands.

Step 2: Define the Path#

Here comes the crucial part. You need to define the path that forms the shape of the crescent moon. Given Kustom’s viewport of 100x100, we can use the following path: