After reading this article you’ll learn:
Capabilities and limitations of the platform in terms of color use
Theme builder options to create the desired product identity
Where to look for theme templates to use in your application
Color use in web design has always been one of the key elements that make one’s product stand out. Right color choices can make an application visually appealing and enhance the user experience. In terms of usability, colors can be employed to differentiate certain elements from others, such as buttons, links, navigation items, or important information. This article explains the basic theory and best practices of using color in your Betty Blocks application.
Theme builder capabilities
When you think about popular brands and their identities, some color associations always go along with them: red for Coca-Cola, blue for Facebook, green for Spotify, etc. Therefore, one of the first things you must consider is transmitting the color scheme of your product to its web application.
A tool responsible for color and styling manipulations is the theme builder. Here you can accommodate your brand requirements by using the desirable color codes or fonts. Basic colors that go out of the box look like this. You’ll see these colors automatically applied whenever you start building your application. All of them are configurable to your own preference.
Each of these colors serves a specific role or is used with particular components, and though most of them a self-explanatory, let’s break them down according to their purpose:
Primary - automatically applied to some navigation components (a navigation bar, menu items, tabs, steppers), buttons, panels, progress bar, etc. It’s important to use one of your main product colors as the primary one to align components with your branding.
Secondary - applied as an additional one to the primary color. For example, if you wish to create variations for your buttons or differentiate them one from the other or you need to separate ‘Step 1’ from ‘Step 2’.
Success / Info / Warning / Danger - what these colors are applied for is pretty self-explanatory: whenever any messages for users arise they will be displayed with these colors. It’s recommended not to change these dramatically, stick to similar shades.
Black / Dark are normally used for texts, titles, border colors, etc. Again, unless your application needs contrasting colors of text, don’t change these too much, otherwise, your text might become not visible among the components.
Medium / Light / White - by default, these colors are used for filling spaces of boxes, forms, tables, and other bulk components. In the example below, you can see the difference in shades: medium within the avatar, light is used to fill the box space around, and white - is for the update form.
Accents are used for highlighting text inputs and their borders when hovering over them. Change them thoughtfully and choose the contrasting colors from the medium/light/white described within a previous point.
Once you make changes to any of the colors in the theme builder, they will be applied to all the components in the page builder. Of course, you can change them later, but it’s better to have a plan for how you want the elements to look.
Keep in mind that due to the limitations of our platform, it’s recommended that you play around freely with only the primary and secondary colors mentioned above. As for the others, it’s better to apply some shades of them, but not change them drastically. Otherwise, you might notice a lack of needed contrast between elements of your front end.
Configurable components
Apart from working with the theme builder, you can configure the styling and color of components separately. In this section, we’ll take a look at customizing buttons, boxes, and tables.
Buttons
While in the page builder, choose the button you want to apply changes to (1), then in options go to the Styles tab (2) and scroll down to see the Background color option (3). Here you can pick up the needed color using the integrated palette or by pasting the color code.
If you scroll down a bit, there will be a similar option for choosing text color within a button (4).
Of course, there are some other settings you can choose from, like roundness or border and its color. This way you can make as many original buttons as you like.
Boxes
In cases when you need to do proper alignment of elements and set the custom background color or image, we recommend using the box component. Choose it by navigating through the component tree, and in the options, you’ll find the Background color. Here you can apply one of the pre-selected colors from the theme builder.
In the example below, we applied a dark color instead of a light one and left the opacity level at 20 percent so that as the result, we don’t get issues with input components which get nearly invisible borders. As you may notice, there’s also an option for the Background URL which is super useful if you want to add some special pattern or your custom-colored background.
Tables
It’s also possible to change the background color of the data table component. To do this, go to the styling tab in the table’s options and switch color in the Background. By default, it is set to transparent, which means it will be the same color as the background of the box.
Let’s say we’d like to somehow highlight our table: set the Background color to White (from our default theme builder colors) and the Background header to Medium.
It’s worth mentioning that you can apply this kind of styling to a separate data table column. See the example below:
Theme blocks
In some cases, users don’t need to align the design of their application with their company’s or just want something casual out of the box. For these reasons, there are theme blocks created by designers from Betty Blocks.
Go to the block store and open the themes tab. Here you’ll see all available theme blocks. Click on any of them once to see the details, and from the details page, you can install this theme to your application.
Note: Keep in mind that once you install the theme, it will automatically re-write all your current progress with component colors!
Note: If you have a sandbox(es), the theme will be applied to the lowest application, which is the latest sandbox created.
Naturally, one can save a theme block to be reused in other applications or by other builders that belong to a certain organization. It is done through the theme builder functionality. After you are done customizing your theme, press the Save as theme block button in the top right corner of the theme builder view, come up with a block and theme names, and write the description. After clicking Save as a block, this custom block will appear in the block store.
Find out more about reusability functionalities in this article.
As mentioned previously, the color use functionality is rather limited for now, but even with a bunch of features described above, one can come up with interesting solutions to make their applications look simple and fresh, and most importantly - up to date with their company’s branding. Currently, we are working on expanding the color usage functionality on the platform, so soon you’ll see more exciting changes!