Change theme at runtime

[Kristof]

Hi!

In a recent feature request your support team promised to provide an example for "changing theme at runtime".

Is there any progress in creating the sample? How can it be achived with the current features?

Original request:https://www.syncfusion.com/feedback/23043/better-theming-with-css-variables

Thank you for your feedback!

[Muthukumar Kannan]

Hi Kristóf, 

Thanks for contacting Syncfusion support.    

Currently, we are validating and preparing sample for your reported query for ‘Change theme at runtime’. However, we will update the further details for this query on tomorrow(19/03/2021) .Until then we appreciate your patience.   

Please let us know if you have any concerns.   

Regards,   

Muthukumar K 

[Muthukumar Kannan]

Hi Kristóf, 

Sorry for the delay and thanks for your patience. 

We have prepared the sample to demonstrate the requirement “changing the theme at runtime” and the same can be downloaded from the below link. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicTheming341779952 

In that, we have created a helper class (ThemeGenertor) to compile the SCSS to CSS with updated theme variables and also, refresh the page after generated a custom theme. Please refer to the below code snippets for more details. 

ThemeGenerator.cs 

 

public class ThemeGenerator 

{ 

    private IHostingEnvironment env; 

    private NavigationManager uriHelper; 

    private string InputScssFile { get; set; } 

    private string OutputCssFile { get; set; } 

 

    public ThemeGenerator(IHostingEnvironment hostingEnvironment, NavigationManager navigationManager) 

    { 

        env = hostingEnvironment; 

        uriHelper = navigationManager; 

        InputScssFile = env.WebRootPath + @"\scss\custom-material.scss"; 

        OutputCssFile = env.WebRootPath + @"\css\custom-theme.css"; 

    } 

 

    public string GetValue(string prop) 

    { 

        string value = null; 

        string themeContent = File.ReadAllText(InputScssFile); 

        Match matchedValue = Regex.Match(themeContent, $"\\{prop}: (.*) !default;"); 

            

        if (matchedValue.Groups[1] != null) 

        { 

            value = matchedValue.Groups[1].Value.Trim(); 

        } 

        return value; 

    } 

 

    public void RefreshTheme(string prop, string value) 

    { 

        string themeContent = File.ReadAllText(InputScssFile); 

        string output = Regex.Replace(themeContent, $"\\{prop}:(.*);", $"{prop}: {value} !default;"); 

 

        CompilationOptions compilationOptions = new LibSassHost.CompilationOptions() 

        { 

            IncludePaths = new[] { "node_modules/@syncfusion/" } 

        }; 

        CompilationResult result = SassCompiler.Compile(output, compilationOptions); 

 

        if (result.CompiledContent != null) 

        { 

            //Write compiled content to output css file. 

            File.WriteAllText(OutputCssFile, result.CompiledContent); 

 

            //Write updated content to input scss file. 

            File.WriteAllText(InputScssFile, output); 

        } 

 

        uriHelper.NavigateTo(uriHelper.Uri, forceLoad: true); 

    } 

} 

 

Register this class as scoped service at startup.cs file. 

 

public void ConfigureServices(IServiceCollection services) 

{ 

    //... 

    services.AddSyncfusionBlazor(); 

    services.AddScoped<DynamicTheming.Shared.ThemeGenerator>(); 

} 

 

Index.razor 

 

@page "/" 

@inject DynamicTheming.Shared.ThemeGenerator themeHelper 

 

//... 

 

<label>Change material accent color: </label> 

<SfColorPicker Value="@accentColor" 

    ValueChange='((ColorPickerEventArgs args) => themeHelper.RefreshTheme("$accent", args.CurrentValue.Hex))'></SfColorPicker> 

 

//... 

 

Steps to run the sample:
1. Install the Syncfusion node_modules in the application using the command “npm install” at the root folder. 

2. Open the project file in VS and run it. 

Also, please refer to the below documentation for common theme variables. 

https://ej2.syncfusion.com/documentation/appearance/theme/#common-variables 

Could you please check the above sample and get back to us if you need any further assistance? 

Regards, 

Muthukumar K