Themes Colors
Default Theme
Draftbit comes with a default theme under the Themes tab (in the left menu). This theme is composed of a color palette. This color palette is used throughout your project.
By default, it is applied to different components available in Draftbit. If your app has a color palette, you can edit and add more color values to the available palette. Read more about the configuration options available under each section.

Colors
In this tab, you can configure the color palette to be used throughout your project. Please note that specific settings are automatically applied to certain components that are described in the table below.
Setting | Description |
---|---|
Background | The default background color of the screen |
Divider | The default color of the Divider |
Error | The color that will be displayed if the Error state is enabled on a Picker, Date Picker, Text Area. |
Primary | The default color of Buttons, Radio Buttons, Radio Button Fields, Checkboxes, and Sliders. |
Strong | The default color of Text. |
You can override these colors values in the Properties Panel
For the Background: Select the Screen in the Layer Tree and select a new color in the Styles tab.
For Components: You can do this by going to the Configs tab and selecting a new color under the
Color
property.
Add a new color to the palette
To add a new color, click on the Add new color
button in the Themes modal.
When you click the eyedropper, a color picker will appear, where you can use the color picker to select a color. There options available to enter a Hex or RGBA value for a color.
A new color value called Purple
is created using the color picker in the example below.
Modify an existing color value
Similarly, you can modify an existing color value available in the default theme.
In the example below, the color value for Secondary
is modified.

Create a custom color from Properties panel
Alternatively, you can add a custom color value in the Styles tab for a component.
In the example below, added a new custom color value to the Text
component.
Color values gets save from the Properties panel
Adding a color value on a component from the Properties panel saves the overall theme of the app. This way, you can re-use this color across your project.
Updated 4 months ago