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.
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
Colorproperty.
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/.
Updated 3 months ago