New to Kendo UI for Angular? Start a free 30-day trial

Dynamically Changing the Kendo UI Theme at Runtime

Environment

Product

Progress® Kendo UI® Themes for Angular

Description

How can I dynamically switch the loaded Kendo UI for Angular theme at runtime?

Solution

In many real-world scenarios, the application is required to support several theme modes, such as the most frequent Light and Dark ones, and allow the user to switch between them at runtime.

To enable the changing of the Kendo UI themes dynamically:

Load the initial theme by using external (CDN) links in the HTML file of the application (index.html) and set a custom HTML id attribute.
html
```
<head>
    
    <link id="theme" rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.1.0/default/default-main.css"></link>
</head>
```
In this case, loading the theme through the angular.json file or importing SCSS source files in the style.scss file is not supported.

After the component is initialized, get the <link> element by using the HTML getElementById method.

public themeLinkElement: HTMLLinkElement;

ngAfterViewInit() {
    this.themeLinkElement = document.getElementById('theme') as HTMLLinkElement;
}

To change the theme dynamically, update the href property of the themeLinkElement from the previous step to the necessary theme CDN.

public changeTheme(href) {
    // Material Theme (6.1.0 is the version of the theme)
    this.themeLinkElement.href = 'https://kendo.cdn.telerik.com/themes/6.1.0/material/material-main-dark.css';

    //Bootstrap Theme
    //this.themeLinkelement.href = 'https://kendo.cdn.telerik.com/themes/6.1.0/bootstrap/bootstrap-main-dark.css'
}