chore: add switch themes apps

.github/workflows/ci.yml

@@ -82,6 +82,24 @@ jobs:
         run: |
           npm ci
 
+      - name: Switch Themes CSS App
+        working-directory: ./examples-standalone/switch-kendo-themes/css-switch-themes
+        run: |
+          npm ci
+          npm run build
+
+      - name: Switch Themes SCSS App
+        working-directory: ./examples-standalone/switch-kendo-themes/scss-switch-themes
+        run: |
+          npm ci
+          npm run build
+
+      - name: Switch Theme SCSS Service App
+        working-directory: ./examples-standalone/switch-kendo-themes/scss-switch-themes-service
+        run: |
+          npm ci
+          npm run build
+
   standalone-examples-node14:
     runs-on: ubuntu-latest
 

examples-standalone/switch-kendo-themes/README.md

@@ -0,0 +1,48 @@
+# Dynamic Theme Switching in Kendo UI for Angular
+
+## Overview
+
+In modern web development, providing a seamless user experience is essential. One desirable feature is the ability to dynamically switch themes in a web application. Kendo UI for Angular offers a robust set of UI components, but managing theme changes on the fly can be challenging.
+
+This project demonstrates various approaches to dynamically switching Kendo themes in an Angular application, enabling users to choose their preferred visual styles without reloading the page. The implementations showcase the following methods:
+
+- CSS Theme Switching
+- SCSS Theme Switching
+- SCSS Theme Switching using Angular Services
+- Using CDN links for Kendo UI themes
+
+## Implementations
+
+### 1. CSS Theme Switching
+
+This approach involves loading multiple CSS files for different themes and swapping them based on user selection. Users can select their preferred theme via a dropdown or toggle, and the application dynamically updates the styles without requiring a page reload.
+
+### 2. SCSS Theme Switching
+
+In this method, we utilize SCSS to manage themes more efficiently. This approach allows for better organization and maintenance of styles. Themes are defined in SCSS files, and switching between these themes can be achieved by utilizing Angular's built-in tools to manage styles.
+
+### 3. SCSS Theme Switching Using Angular Services
+
+This advanced approach abstracts the theme management into a service, promoting reusability and cleaner code. By implementing a service to handle theme switching logic, you can easily integrate theme changes into your components, providing a centralized way to manage user preferences.
+
+### 4. Using CDN Links for Kendo UI Themes
+
+An alternative method is to use Kendo UI themes directly from the CDN. This approach simplifies theme management by loading themes dynamically from external sources. By leveraging CDN links, you can easily switch between different Kendo themes without managing local files.
+
+For the CDN approach refer to the following links:
+
+- [Reloading Kendo Themes using Angular Signals](https://www.telerik.com/kendo-angular-ui/components/framework/angular-feature-highlights#angular-signals-interacting-with-kendo-ui-for-angular-components)
+- [Reloading Themes in Kendo Angular Charts](https://www.telerik.com/kendo-angular-ui/components/charts/styling#reloading-theme-colors)
+
+## Conclusion
+
+Dynamically switching Kendo UI themes in Angular applications enhances user engagement and allows for a tailored experience. The approaches outlined above—CSS switching, SCSS management, and service-based implementations—provide flexibility and scalability for any application.
+
+These suggestions are specially tailored to Angular, but can be transferred to other libraries and frameworks.
+
+Feel free to explore these projects to see each implementation in action!
+
+## See Also
+
+- [Kendo UI for Angular Documentation](https://www.telerik.com/kendo-angular-ui/components/)
+- [Design System Documentation](https://www.telerik.com/design-system/docs/)

examples-standalone/switch-kendo-themes/css-switch-themes/README.md

@@ -0,0 +1,27 @@
+# ScssProject
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.6.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

examples-standalone/switch-kendo-themes/css-switch-themes/angular.json

@@ -0,0 +1,108 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "scss-project": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/scss-project",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js",
+              "@angular/localize/init"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "scss-project:build:production"
+            },
+            "development": {
+              "buildTarget": "scss-project:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing",
+              "@angular/localize/init"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}