How to load themes dynamically in Syncfusion components
This knowledge base explains the way of dynamic theme change in Syncfusion components, which are used in your application. This can be achieved by loading the needed theme to the style tag dynamically using AJAX call.
Javascript
function(e) {
if (e && e.value) {
let ajax: Ajax = new Ajax('assets/styles/' + e.value + '.css', 'GET', true);
ajax.send().then((result: any) => {
let styleTag = document.getElementById('theme');
styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
});
}
}
We have created a JavaScript sample for dynamic theme change in Syncfusion components. Here, we have loaded different themes in a dropdown list. According to the selected theme value, the corresponding CSS will be loaded to the DOM elements. The following code example explains how to use ajax to load themes to Syncfusion components.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 DropDownList component</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
// add style tag for dynamic theme change
<style id="theme"></style>
</head>
<body>
<div id='container'>
<!--element which is going to render the DropDownList-->
<input type="text" tabindex="1" id='ddlelement'/>
<br>
<br>
<!--element which is going to render the Grid-->
<div id='Grid'></div>
</div>
</body>
</html>
Javascript
import { DropDownList, DropDownListClassList } from '@syncfusion/ej2-dropdowns';
import { Ajax } from '@syncfusion/ej2-base';
import { Grid, Sort, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource';
// defined the array of themes
let themes: string[] = ['material', 'fabric', 'bootstrap'];
Grid.Inject(Sort, Page);
// initialize DropDownList component
let dropDownListObject: DropDownList = new DropDownList({
//set the themes to dataSource property
dataSource: themes,
select: function(e) {
if (e && e.itemData.value) {
let ajax: Ajax = new Ajax('assets/styles/' + e.itemData.value + '.css', 'GET', true);
ajax.send().then((result: any) => {
let styleTag = document.getElementById('theme');
styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
});
}
},
// set placeholder to DropDownList input element
placeholder: "Select a theme"
});
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
],
allowSorting: true,
allowPaging: true,
pageSettings: { pageSize: 7 }
});
// render initialized DropDownList
dropDownListObject.appendTo('#ddlelement');
// render initialized Grid
grid.appendTo('#Grid');
Sample Link: https://github.com/SyncfusionExamples/EJ2-Javascript-Dynamic-theme-Switch
The following screenshots show the results of the dynamic theme change in JavaScript sample:
Changing Theme
After Theme Change
We have also prepared samples for Dynamic Theme Change in Angular, React, and Vue platforms. Find the Sample links below.
Sample Links:
Angular – https://github.com/SyncfusionExamples/EJ2-Angular-Dynamic-theme-Switch
React – https://github.com/SyncfusionExamples/EJ2-React-Dynamic-theme-Switch
Vue – https://github.com/SyncfusionExamples/EJ2-Vue-Dynamic-theme-Switch
Hi Fabian,
We are working on the improvement of SCSS styling with Syncfusion and update the documentation once it is completed. We expect your support until then.
Are there any examples for this in blazor?
Hi Christian,
We have created a sample for changing theme dynamically in a Blazor Server Side application with Syncfusion components in it. You can download the sample from the below location.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorTheme-982687466
This 'workaround' downloads a 2MB+ css file every time you switch.. I only want to update the colors (for Fabric in my case) described here: https://ej2.syncfusion.com/react/documentation/appearance/theme/. Do you have any update on improving this? I would expect something like the ThemeProvider component in Fluent UI 8+ in which you can load a pallete of colors (equal to the variables described in the above doc). Thanks.
Hi Chris,
Sorry for the inconvenience.
We can understand your concern and we are unable to change the themes in client side without compiling it in build time with our current CSS architecture. Syncfusion CSS architecture mainly concentrates on generic in a way to support multiple themes and complex components which have multiple small components as its dependent.
We can generate themes with multiple colors in build time wither using Theme Studio or SCSS compilation and can load it to application in runtime using Ajax.
Any progress on this? Asking to remotely download css files on theme switches is ridiculous.
Hi Foo,
Sorry for the inconvenience.
We can able to switch the themes by referring the SCSS file instead of remotely download CSS file. We will prepare and share the demo sample for this on before 29/6/2022.
We appreciate your until then.
Regards, Piramanayagam R
Hi Foo,
Thanks for your patience.
We have prepared a sample based on your requirement. In the sample, we have utilized the styles from the local reference itself without going for the CDN link.
Please refer to the below code snippet and the sample.
App.ts
// initialize DropDownList component
let dropDownListObject: DropDownList = new DropDownList({
//set the data to dataSource property
dataSource: themes,
select: function (e) {
console.log(e);
if (e && e.itemData.value) {
const doc: HTMLFormElement = <HTMLFormElement>select('#themes');
doc.href = 'assets/styles/' + e.itemData.value + '.css';
}
},
// set placeholder to DropDownList input element
placeholder: "Select a theme"
});
Index.html
<link href="./assets/styles/material.css" rel="stylesheet" id = "themes">
<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-357734724.zip
Please get in touch with us if you would require any further assistance.
Regards, Piramanayagam R
Why does it have to be so complicated, when other CSS frameworks accomplish this with overriding the default variables?