chore: change theme dynamically

telerik · Sep 20, 2024 · 505c52a · 505c52a
1 parent 9d5111b
commit 505c52a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/examples-standalone/coffee-warehouse/angular.json b/examples-standalone/coffee-warehouse/angular.json
@@ -39,9 +39,6 @@
             ],
             "styles": [
               "src/styles/main.scss",
-              {
-                "input": "node_modules/@progress/kendo-theme-default/dist/default-turquoise.css"
-              },
               "node_modules/@progress/kendo-theme-utils/dist/all.css"
             ],
             "scripts": [],

diff --git a/examples-standalone/coffee-warehouse/package.json b/examples-standalone/coffee-warehouse/package.json
@@ -50,9 +50,10 @@
     "@progress/kendo-drawing": "^1.20.4",
     "@progress/kendo-licensing": "^1.3.5",
     "@progress/kendo-svg-icons": "^3.1.0",
-    "@progress/kendo-theme-bootstrap": "^9.0.0",
-    "@progress/kendo-theme-default": "^9.0.0",
-    "@progress/kendo-theme-material": "^9.0.0",
+    "@progress/kendo-theme-bootstrap": "^8.2.1",
+    "@progress/kendo-theme-default": "^8.2.1",
+    "@progress/kendo-theme-fluent": "^8.2.1",
+    "@progress/kendo-theme-material": "^8.2.1",
     "@progress/kendo-theme-utils": "^9.0.0",
     "hammerjs": "^2.0.8",
     "rxjs": "~7.8.1",

diff --git a/examples-standalone/coffee-warehouse/src/app/app.component.ts b/examples-standalone/coffee-warehouse/src/app/app.component.ts
@@ -1,25 +1,33 @@
-import { Component, HostBinding } from "@angular/core";
+import { AfterViewInit, Component, HostBinding } from "@angular/core";
 import { MessageService } from "@progress/kendo-angular-l10n";
 import { CustomMessagesService } from "./services/custom-messages.service";
 import { SettingsService } from "./settings.service";
+import { isPresent } from "@progress/kendo-angular-common";
+
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   public selected = "Team";
   public items: Array<any> = [];
   public customMsgService: CustomMessagesService;
   public mini = true;
 
   @HostBinding('style.--kendo-font-size') 
-  public fontSize = '16px'
+  public fontSize = '16px';
 
   @HostBinding('style.--kendo-line-height') 
-  public lineHeight = '1.2px'
+  public lineHeight = '1.2px';
 
   @HostBinding('style.--kendo-letter-spacing-normal') 
-  public letterSpacing = '0px'
+  public letterSpacing = '0px';
+
+  private themeLinkElement: HTMLLinkElement;
+
+  public ngAfterViewInit(): void {
+    this.themeLinkElement = document.getElementById('theme') as HTMLLinkElement;
+  }
 
   constructor(
     public msgService: MessageService,
@@ -30,8 +38,23 @@ export class AppComponent {
       for (let setting in settings) {
         if (setting === 'fontSize' || setting === 'lineHeight' || setting === 'letterSpacing') {
           this[setting] = `${settings[setting]}px`;
+        } else if (setting === 'colorTheme' && isPresent(this.themeLinkElement)) {
+          const newThemeLink = this.getThemeLink(settings[setting]);
+          this.themeLinkElement.href = newThemeLink;
         }
       }
     });
   }
+
+  private getThemeLink(themeKey: string): string {
+    switch(themeKey) {
+      case 'contrast':
+        return 'https://kendo.cdn.telerik.com/themes/8.2.1/default/default-ocean-blue.css';
+      case 'dark':
+        return 'https://kendo.cdn.telerik.com/themes/8.2.1/bootstrap/bootstrap-main-dark.css';
+      default:
+        return 'https://kendo.cdn.telerik.com/themes/8.2.1/default/default-turquoise.css';
+    }
+
+  }
 }
diff --git a/examples-standalone/coffee-warehouse/src/index.html b/examples-standalone/coffee-warehouse/src/index.html
@@ -8,6 +8,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
+        <link id="theme" rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-turquoise.css" />
     </head>
     <body>
         <app-root></app-root>