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:?
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 app
.
You can switch to Fiori 3 Dark theme with
or to High Contrast Black
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.
