• 1. Description
• 1.1. Themes available by default
• Playground-light
• Playground-dark
• 1.2 Themes Core
• 1.3 Themes management
• 2. Theme variables
• 2.1 Core Parameters
• 2.2 Colors
• 2.3 Fonts
• 2.4 Images
• 2.5 Icons
• 2.6 Backgrounds
• 2.7 Spacings
• 2.8 Home Icon
• 2.9 Rounded and Shadows
• 2.10 Widgets
• Window
• Layout
• Panel
• Sidebar
• Card
• Ribbon
• Tabbar
• Grid
• Taskbar
• Toolbar
• Separator
• Scheduler
• Scrollbar
• 3. How to use it
• 3.1 Create a new theme
• 3.2 Edit a theme
• 4. Other considerations
• 4.1 Support to other properties that are not defined in this documentation.
• 4.2 Generation of new intermediate variables
• 4.3 Configuring theme variables
• 4.4 Enable Tailwind in themes

1. Description

A theme is a set of variables and properties that determine the overall look, feel and style of the different elements in the User Interface. While using Build.One, the users can switch between different themes. The developers can create new themes or edit the existing ones.

1.1. Themes available by default

The themes playground-light an playground-dark are provided by Build.One and can be used by the users. However new themes can be created if needed.

Playground-light

Playground-dark

1.2 Themes Core

Each new theme will use the group of variables and properties defined in the Themes Core until these settings are set in the theme, which then will override these default settings.

1.3 Themes management

Themes can be created and deleted in the Manage > Themes screen. Also some editing like changing name or description are possible in that screen.

2. Theme variables

Each theme can be personalised to adjust the style through the theme definition, this definition is located in /src/webui/themes/[ThemeName]/theme.ts In this file the following parameters can be adjusted.

2.1 Core Parameters

Basic settings that define a theme, this parameters are generated in the creation of the theme.

2.2 Colors

The color settings are handled in a different file from the theme definition, this file is in the same folder and it is called colors.ts

This file is created in the generation of the theme and it contains by default the Primary and Grey colours, and the rest of the colours use the default definitions of the Theme Core, however this extra colours can be added to the colors.ts file and personalise them alongside the Primary and Grey ones

Color definition

Copy

const primary: Color = {
  50: '#f6f9fa',
  100: '#e3f0fb',
  200: '#c3dcf8',
  300: '#97baed',
  400: '#6c93df',
  500: '#5470d2',
  600: '#4554bf',
  700: '#363f9c',
  800: '#262a70',
  900: '#161a46'
};

Each colour has a name and a scale of 10 values that goes from light values (50) to dark values (900)

2.3 Fonts

Font definition

Copy

primary: {
  family: spread('"Inter", sans-serif'),
  color: theme.colors.primary[900]
}

‣

Family

‣

Color

2.4 Images

Logo definition

Copy

logo: { 
	name: 'buildone-icon-plain', 
	ext: 'svg' 
}

‣

Name

‣

Ext

2.5 Icons

2.6 Backgrounds

The background variables aim to generate the sense of depth for the container elements, and help the user to visualise easier the different groups of elements in the User Interface of Build.One.

For this purpose, the themes handle 3 different layers that are meant to be used in different containers depending of where they are located respect the other containers.

Each widget that has a background uses one layer by default, that variable can be changed for another layer, or any other colour in the corresponding property of the widget in the theme.

2.7 Spacings

The spacings variable aims to generate consistency in the User Interface by defining a number of values that will be used in the paddings and margins of the elements

2.8 Home Icon

Variables used for designing the home icon

2.9 Rounded and Shadows

2.10 Widgets

All the widgets are defined using an interface, this interface specify the options that are available to personalise the style of each widget. The definition allows the user to define the widget partially if they just want to edit one part of a widget.

3. How to use it

4. Other considerations

4.1 Support to other properties that are not defined in this documentation.

The themes are giving support to the variables defined in this documentation, anything else that is not defined in this documentation must be styled with custom CSS if the developers wants to do it.

4.2 Generation of new intermediate variables

Generating new set of variables through the themes.ts would generate a set if intermediate variables that can be used later in values, but it needs to be assigned to the corresponding elements with custom css. Generating just those variables alone would not produce any change in the style of the UI

4.3 Configuring theme variables

When configuring variables please use normal config entries, not needed to rely on use of build.one utilities.

4.4 Enable Tailwind in themes

From version 24.13, Tailwind CSS can be enabled in Build.One themes. To enable them follow the following procedure.

Tailwind CSS Support for Themes

Back to Documentation

Back to Home Page