CODEWITHSUNDEEP
c#angulartypescriptasp.net-coresass
Makla
Makla

Reputation: 10459

Hot to change theme at run-time in ASP.NET Core Angular application

I would like to build ASP.NET Core Angular application and allow users to change theme at run-time.

I already tried with sass. In the build process I managed to build application several times (one time for each theme). My output is dist_theme1, dist_theme2 ...
But I don't know how run application for each theme? (Before multiple approach I had this line, which I think served Angular app:)

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "wwwroot/dist";
});

but how to tell IIS which Angular app should start. I checked how multiple Angular can be started by the same ASP.NET Core, but it requires the change of URL, which I want to avoid.

Second thing I found is to use css variables and change theme with javascript. This looked promising, but css are embedded in lazy loaded modules. Would that be a problem? It also requires that theme is styled in string (example I found), but the biggest problem is that third party components I used doesn't support css variables, only plain css and sass.

Is there another option?
What is the recommended path/option to change theme at run-time and saved this to logged in user/local storage.

Upvotes: 0

Views: 643

Answers (1)

Tony
Tony

Reputation: 20092

You can view this blog post here

The author explain to use scss in this case and simply inject scss variable at runtime.

Please let me know if you need any help.

Upvotes: 1

Related Questions