SAP Theming – as easy as 1-2-3 with Fundamental Library

In this blog I will show you how easy it is to change SAP Fiori 3 themes using Fundamental Library without a runtime integration with the theming service.

We need to do only 2 things😕

• include the theming resources
• use Theming Switcher service from Fundamental Library for Angular (npm) for switching themes

We will be using an existing Angular application which imports Fundamental Library for Angular. In case you don’t have an existing app you can always follow the step in my previous blog how to creat one or to check out this repo(it has a relatively small application). The starting point is this commit.

Let’s start with theming resources:

• we need to refer the theming assets by including the following code in angular.json file in assets array:

  {
      "glob": "**/css_variables.css",
      "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/",
      "output": "./assets/theming-base/"
  },
  {
      "glob": "**/*",
      "input": "./node_modules/fundamental-styles/dist/theming/",
      "output": "./assets/fundamental-styles-theming/"
  }​

We need to use the assets we imported to switch themes. Go to your template files and add the following code:

<link rel="stylesheet" *ngIf="cssUrl" [href]="cssUrl"/>
<link rel="stylesheet" *ngIf="customCssUrl" [href]="customCssUrl"/>

As part of this step we need to add the following code in the component ts file(2 imports, defining 2 properties and adding a logic to set the right resources once the url parameter is passed):

...
import { SafeResourceUrl } from '@angular/platform-browser';
import { ThemesService } from '@fundamental-ngx/core';

...

export class AppComponent {
  ...

  cssUrl: SafeResourceUrl | undefined;
  cssCustomUrl: SafeResourceUrl | undefined;

  constructor(private _themesService: ThemesService) {
    _themesService.setThemeByRoute();

    _themesService.onThemeQueryParamChange.pipe().subscribe(theme => {
        this.cssCustomUrl = theme.customThemeUrl;
        this.cssUrl = theme.themeUrl;
    });
  }
}

that’s it. You are all set. You can checkout the commit and play locally.

? You are all set. You can run the application with the command ng serve and check out in a browser the apphttp://localhost:4200/.

You can switch to Fiori 3 Dark theme with http://localhost:4200/?theme=sap_fiori_3_darkor to High Contrast Black http://localhost:4200/?theme=sap_fiori_3_hcb

More about SAP Theme designer can be found on help.sap.com. How to create a theme can be found in the same place. You can also export the theme as a file.

In another blog I will be exploring the Theming Switcher a little bit more. Instead of using URL parameter we will create a select component which the user can use to switch between themes.

Stay tuned for more updates. Want to read more blog posts about Fundamental Library? Check these out.

Feel free to raise any questions or try our libraries in case you didn’t have a chance.