Angular 7 - Switching Kendo UI theme on runtime

Question

I am using Kendo UI with Angular 7 application. The application needs to support changing themes on the fly. For example, some user might like to have Light mode while others will prefer the Dark mode.

Kendo UI has a very good support for themes but the problem is that themes can only be set on the compile time.

As per their recommendations, specifying the theme should be a part of the angular.json file, like the following.

"styles": [           
   "node_modules/@progress/kendo-theme-bootstrap/dist/all.css",
   "src/styles.scss"
]

but this will only compile to embedded CSS inside the root page. We cannot change it on the fly.

The alternative approach I am considering is to add the CSS to index.html like,

<link rel="stylesheet" href="node_modules/@progress/kendo-theme-bootstrap/dist/all.css">

and to try this solution.

Is this the right way to solve the problem or there is a better solution than this one?

I am looking for the same. If you find anything then please update here. — Dips, Feb 25 '19 at 13:26
i got it working with second approach. put css in index.html file and make it enable/disable. Please let me know if you need help. — Dips, Mar 27 '19 at 13:48
@dips. Thanks. I went for the second approach just like you did. No doubt, great minds think alike :p — Kashif Nazar, Mar 29 '19 at 06:37

score 0 · Answer 1 · answered Jun 27 '23 at 14:32

Kendo wrote an article that is helpful: Dynamically Changing the Kendo UI Theme at Runtime. Just use href="assets/my-theme.css" instead of their CDN. I export a light theme and a dark theme using their ThemeBuilder. In free tier you have to create, export, then delete the project as only one is allowed at a time.

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" id="theme" href="assets/my-app-light.css" />
</head>

<body>
  <app-root></app-root>
</body>

</html>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
    public themeLinkElement: HTMLLinkElement | undefined = undefined;

    constructor() { }

    public async ngOnInit() {
        const darkTheme: boolean = Boolean(localStorage.getItem("darkTheme") ?? "false");
    
        if (darkTheme) {
            this.themeLinkElement = document.getElementById('theme') as HTMLLinkElement;
            this.themeLinkElement.href = "assets/my-app-dark.css";
        }
    }
}

Angular 7 - Switching Kendo UI theme on runtime

1 Answers1