• 1. Summary
• 2. Step by Step Guide
• 2.1 Create the theme in the B1 platform
• 2.2 GitPod Steps
• 2.3 Edit the theme
• 3. Documentation

1. Summary

Themes are the main personalisation options in Build.One, Users can use one of the predefined themes that are available in Build.One or create their own ones. This Use Case covers what are the steps to create a new theme and how it can be personalised.

2. Step by Step Guide

2.1 Create the theme in the B1 platform

1. Open B1
2. Navigate to Manage → Themes
3. Click on the + button of the grid

4. Complete the data for your new theme
1. Name → The name of your theme
2. Description → The description of your theme
3. Flag → System
4. Type → Select light or dark for your case
5. Click in the gears button in the grid to generate the needed files

2.2 GitPod Steps

1. restart webpack build from the workspace terminal (stop process with Ctrl+C and start it again with 'yarn build:watch-continue')
• this is required so that the webpack process registers the new theme (the themes are loaded in memory, so any new themes will be ignored)
2. open the theme's theme.ts file and trigger a save
• this is requred so that the webpack theme plugin generates the content for the theme's _theme.scss file

2.3 Edit the theme

1. Go to the next path to find the folder with the files for your theme

/workspace/swat/src/webui/themes

2. You can edit the colors in the color.ts file

In this file the colours for the theme can be tested. By default the primary and grey colours are defined, but you can define others like success, info, warning, etc. Or any new ones needed for that theme.

In the /workspace/swat/src/webui/themes/core/theme.tsfile you can see the default colours that can be overridden.
3. You can edit the theme properties in the theme.ts file

In the /workspace/swat/src/webui/themes/core/theme.ts file you can find all the properties that can be defined in a theme, in the core theme are defined the default values, but any of those can be overridden in your theme with personalised values.

3. Documentation

To find more information of the themes and all the possibilities available, you can check the following documentation.

Themes

Back to Use Cases

Back to Home Page