Theme 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.


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.

BackgroundThe default background color of the screen
DividerThe default color of the Divider
ErrorThe color that will be displayed if the Error state is enabled on a Picker, Date Picker, Text Area.
PrimaryThe default color of Buttons, Radio Buttons, Radio Button Fields, Checkboxes, and Sliders.
StrongThe 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.

Modify an existing color value

Similarly, you can modify an existing color value available in the default theme by clicking the pencil icon for the color you want to update/.