# Dynamically Changing the Kendo UI Theme at Runtime

## Environment

<table>
	<tbody>
		<tr>
			<td>Product</td>
			<td>Progress® Kendo UI® Themes for Angular</td>
		</tr>
	</tbody>
</table>

## 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:

1. Load the initial theme by [using external (CDN) links](https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-external-cdn-link) 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.

2. After the component is initialized, get the `<link>` element by using the HTML [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method.

   ```ts
   public themeLinkElement: HTMLLinkElement;

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

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

   ```ts
   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'
   }
   ```