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.

📘

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.