Applying multiple themes

Add multi-theme support to your app

Getting started

Before diving further into this guide, you should be familiar with these two procedures:

Global Branding

Applying a theme on Web

Note: If you’d like to know how to apply multiple themes on Web on a release version prior to 2024.09, read our guidelines in our old documentation site.

Preparing the theme

After extracting the theme variant from Figma, we will add the theme so that it is built by the app.

Step 1

Move the theme files to your project

In the themes folder that you have created when applying the theme, group the default theme into a folder. Update the import in your main entry point, i.e. styles.scss.

Note: Beginning in September 2024, if the Visualizer tool was used to extract the tokens, the import path should be themes/default/main.scss.

Step 2

Drag & drop your theme variant from Figma

Add your theme variant into a different folder group. Verify that it has a main entry point that imports @backbase/ui-ang/scss/main.scss and the rest of the theme. If there are additional styles in your main entry point (e.g., styles.scss), such as @font-face, body or html selectors, that you wish to include in the new theme, it is recommended to transfer them to the new theme's main.scss.

Step 3

Add your theme to your project

Locate your build pipeline. It is usually in the project.json or angular.json. Replace the styles in build with a similar structure as seen in the image.

Implement theme management

Next, we need to implement the logic for switching a theme. The following are suggestions and should not restrict the implementation and architecture of your application.

Step 4

Create a theme manager

Copy the code below and add it into your application. We recommend creating an injectable service and placing it in the folder with your other services or business logic. Make changes as needed. Also pay attention to the theme names. They should be identical to the bundleName set in step 3.


                                                        
                                                        
                                                            import { Injectable } from '@angular/core';
                                                        @Injectable()
                                                        export class ThemeManagerService {
                                                            public static THEMES = ['theme-default', 'theme-premium'];
                                                            setTheme(theme) {
                                                            const linkElement: HTMLLinkElement | null = window.document.head.querySelector('link[rel="stylesheet"]');
                                                            if (!linkElement) return;
                                                            linkElement.href = `${theme}.css`;
                                                            }
                                                        }

Step 5

Register the service

Add the service that you have created into the list providers of the module that is consuming it.


                                                        
                                                        
                                                            import { NgModule } from '@angular/core';
                                                        import { Component } from './component';
                                                        import { ThemeManagerService } from 'path-to-theme-manager-service';
                                                        @NgModule({
                                                            providers: [ThemeManagerService],
                                                            declarations: [Component],
                                                        })
                                                        export class Module {}

Step 6

Call the service function

In the service or function that would be making the theme change, inject the dependency. Add the call to themeManagerService.setTheme().


                                                        
                                                        
                                                            import { ThemeManagerService } from 'path-to-theme-manager-service';
                                                        …
                                                        constructor (private themeManagerService: ThemeManagerService) {}
                                                        …
                                                        switchTheme() {
                                                            themeManagerService.setTheme(ThemeManagerService.THEMES[1]);
                                                        }