After completing this guide, your Web app will be themed according to you branding. Before following these steps, make sure a theme has been created with the Backbase Visualizer.
From the exporter you should have a folder that includes web, ios and android subfolders within. In the web folder, you should be able to find:
|
Description |
Contents |
|---|---|
|
A default folder with your brand's theme |
.scss file with design tokens |
|
A logos folder with your brand's logos |
.svg logo files |
Import tokens
After extracting the styles folder from the ZIP file, we need to copy the styles into the project.
Locate your global stylesheet
First, locate your global stylesheet. You can find its path by checking your angular.json (or project.json if you're using NX to manage your apps). The app section, such as "retail-usa," may vary depending on the project you're theming (e.g., "business-universal," "business-usa," or "retail-usa").
"options": {
…
"styles": [
"apps/retail-usa/src/styles-default.scss"
],
}
Import theme in your global stylesheet
Finally, if you found your global stylesheet, you can open it and import styles/default/main.scss at the top of the document.
@import './styles/default/main.scss'
./style/default/main.scss already contains import of default style variables. In case you are using '@backbase/backbase-theme-retail-preset/scss/main', please remove line @backbase/ui-ang/scss/main from ./styles/default/main.scss manually.
The final result should look something like this:
@import './styles/default/main.scss';
bb-area,
bb-root,
bb-chrome,
bb-panel-container,
bb-tab-container,
bb-deck-container,
bb-column-container {
display: block;
}
Import logos
Next we need to copy the logos into the project. The tool has exported all variations and will automatically be picked up when placed in the right folder.
Moving logos into your project
Drag & drop the logos folder that was extracted from the web folder into the styles folder. You also have the option to store the logos in a custom assets folder. For instance, in the case of banking applications, the assets directory is located at: libs/[project-name]/assets.
Check the logo references
Make sure that the background-image: url() property in the variables/_logo.scss file contains the correct reference. By default, the relative path follows the folder structure from the web folder.
If you are storing assets in a custom location, confirm that the build configuration in your project.json correctly serves these assets. Use the following configuration to ensure proper access:
{
"input": "path/to/custom/location/logos",
"glob": "**/*",
"output": "assets"
}
Update your background-image: url() in the _logo.scss file so that it has background-image: url('/assets/logos/[logo-name].png').
Import fonts
Please note that we do not provide font assets as part of this guide. It is assumed that you have already obtained the necessary fonts, either through download or from your designer.
Copy the fonts folder to your project
Start by collecting your font files and have them ready to be copied to your project.
If your project has a specific place where you store fonts, you can copy your font files there.
Otherwise create a new fonts folder inside the styles directory that you previously created and copy your fonts to this folder.
Add font-face declarations
Add the @font-face declarations in your global styles-default.scss stylesheet (the one you located in step 2). It should be placed after all the imports. Ensure that the src property in @font-face reflects the location of your font file location. Make sure that the font-family property in this file uses the same value as the $font-family defined in the Visualizer before export. You can check the values in styles/default/variables/_font-family.scss.
The result should be similar to the example below:
// styles-default.scss
@import './styles/default/main.scss';
@font-face {
font-weight: $font-weight-regular;
font-family: 'Libre Franklin';
font-style: normal;
src: url('./styles/fonts/LibreFranklin-Regular.ttf');
font-display: swap;
}
@font-face {
font-weight: $font-weight-semi-bold;
font-family: 'Libre Franklin';
font-style: normal;
src: url('./styles/fonts/LibreFranklin-SemiBold.ttf');
font-display: swap;
}
Our default theme uses rem sizes which is a relative unit that is determined by the font size of the root element. The optimal size per unit rem would be 16px but we support up to 32px.
Add even more font-families, if needed
If you still need to add even more font families, yet again drop the font files into your project and add new @font-face declarations in your global styles-default.scss stylesheet. Then in styles/default/variables/_font-family.scss you can declare additional $font-family variables which can be consumed by your component classes.
Using thrive theme
The Thrive theme follows the exact same implementation steps as described above. The only difference is the folder structure you'll be working with.
Implementation
Follow the complete guide described in Apply a theme on Web, but use the premium folder instead of the default folder when:
- Importing tokens: Copy the premium folder (instead of default) to your styles directory
- Importing theme: Use @import './styles/premium/main.scss' (instead of ./styles/default/main.scss)
All other steps remain exactly the same, including logo imports, font setup etc.
Differences
The Thrive theme is identical to the default Backbase light theme in structure and functionality, with the only difference being a different color palette that creates visual distinction.
When the Thrive theme is applied, you'll notice visual differences across all UI components compared to the default Backbase light theme:
Visual changes
Color scheme
- Brand colors: Primary brand color changes from blue to green.
- Interactive elements: All buttons, links, and interactive elements use the new green palette.
- Status indicators: Success, warning, and error states updated with new colors.
Current theme scope
The Thrive theme currently focuses on color palette changes, providing a green-based theme. However, the theme framework supports customization of typography and component styling as well. These customizations include things such as custom fonts, spacing, paddings, sizes, state specific stylings and other design aspects.
Example: We can customize buttons through component tokens such as the different border-radius seen on the left.
Impact
The Thrive theme transforms the entire user interface to create a premium theme while maintaining all accessibility standards and functionality of the default theme.