Switch Theme Programmatically?

Question

Hi all,Is it possible to switch between themes programmatically (as per your demos)? Though I would prefer to do it from the Sidebar.I thought I'd seen a previous post asking about this, but can't seem to find it now.Thanks in advanceSimon

Jesus Arockia Sankaran S · Accepted Answer

Hi Simon,  
 
Thank you for contacting Syncfusion support.  
 
We have created a sample for your reference to change the theme in a Blazor Server application using swtich in HeaderBar that you can find from the below link.  
 
Sample: https://www.syncfusion.com/downloads/support/forum/159065/ze/BlazorTheme802005049 
 
Kindly refer the below code snippet for your reference.  
 




app.js  
  
function ChangeTheme(isDark) {  
    document.getElementsByTagName('body')[0].style.display = 'none';  
    let synclink = document.getElementById('theme');  
    let applink = document.getElementById('apptheme');  
    synclink.href = isDark ? 'css/fabric-dark.css' : 'css/fabric.css';  
    applink.href = isDark ? 'css/site-dark.css' : 'css/site.css';  
    setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200);      
}  
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Jesus Arockia Sankaran S

Simon · Answer

Hi Jesus,Thanks for the reply, that bit is now working.However, how would I include the "App" theme for Bootstrap3 (Light & Dark), Material Design (Light & Dark) & Fabric (Light & Dark)? i.e. not just the Syncfusion controls, but the entire site theme?Thanks in advanceSimon

Muthukumar Kannan · Answer

Hi Simon,

Thanks for getting back to us.


We have validated your query and we would let you know that you can achieve this from your end by using the JavaScript method using invoke functions. However, we have modified the above Sample to demonstrate your requirement and the same can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorTheme-1878605971

Kindly refer the below code snippet for your reference.





app.jsfunction ChangeTheme(isDark, theme) { 
    if (theme == null) {
        // We have set the default initial load theme as fabric in _host.cshtml
        // <link href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" id="theme"/>
        getTheme = isDark ? "fabric-dark": "fabric";
    } else {
        getTheme = isDark ? JSON.parse(theme).Text + '-dark' : JSON.parse(theme).Text;
    }
    let Theme = document.getElementById('theme');
    Theme.href = '_content/Syncfusion.Blazor/styles/' + getTheme + '.css';

    document.getElementsByTagName('body')[0].style.display = 'none';
    let applink = document.getElementById('apptheme');
    applink.href = isDark ? 'css/site-dark.css' : 'css/site.css';
    setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200);  
}


function ThemeChange(theme, isDark) {
    getTheme = isDark ? JSON.parse(theme).Text + '-dark' : JSON.parse(theme).Text;
    //Here we change the theme for syncfusion components. You can change it to 'apptheme' insteadof using 'theme'.
    let Theme = document.getElementById('theme');
    Theme.href = '_content/Syncfusion.Blazor/styles/' + getTheme + '.css';
}

Please get back us if your requirement does not fulfill.


Regards,
Muthukumar K

Simon · Answer

Hi Muthukumar,Thanks for the reply.The bit I was looking for was the 'site.css' & 'site-dark.css', so all working fine now.Thanks again for your help.RegardsSimon

Muthukumar Kannan · Answer

Hi Simon,

Welcome! Please let us know if you need any further assistance.

Regards,
Muthukumar K

Joseph Charles · Answer

Hi,Your question isn't quite clear to me, I mean you are asking If you can switch from your existing theme to another theme? If this the question then you can create a child theme of your parent theme, You can implement all the changes you want in your WordPress theme but you have to be careful when any update of that specific theme (Parent theme) comes because while updating your theme it can cause serious trouble to your website. So make sure before updating any theme. Although there are many best WordPress themes that can allow you to create a child theme for your website.

Stefan Limpert · Answer

Hello,i tried these solutions and it works. But i need the setting (dark/light) persistent, so after a reload it needs to get the last setting. Which means - loading the correct css and adjusting the SFSwitch to the last setting. How could i achieve it?

Subathra Kaliamoorthy · Answer

Hi Stefan,Greetings from Syncfusion Support !Based on the provided details, we understand that you want to persist the light/dark theme preference so that when a user revisits or reloads the site, their previously chosen theme is retained. This can be accomplished by saving the selected theme in the browser's local storage. We have developed a Blazor Web App targeting .NET 8.0, where we implemented a SfDropDownList for theme selection and a toggle button for switching between light and dark modes.Please review the attached sample for your reference and let us know if our understanding of your requirements is incorrect.Regards,Subathra KAttachment: BlazorThemeSwitch_876f49ad.zip