Dynamic Theming using Sass?

[enjoi2349]

Hello All,

I have implemented a dynamic theme toggle similar to the primeng showcase page. However I could only figure out how to implement it using css files. Basically I just used some javascript to change the link of the css file from the index.html file, also similar to the showcase. Not sure if it's possible with binding or using angular specifically. Anywho I was curious if this same type of end result is possible using all .scss files instead of css, I would prefer to primarily use scss files but it seems because they are not static it will not let me change the links using this code.

Anyone implement dynamic theme changes using scss files at runtime?

Best

[enjoi2349]

Note that I did try to set up my workspace exactly like the "showcase" app before posting this. In the code for the showcase page it has a link to as .css file in index.html:

Code: Select all

  <link id="theme-css" rel="stylesheet" type="text/css" href="assets/components/themes/omega/theme.css">

In the method that changes theme it links another .css file..

Code: Select all

         changeTheme(event: Event, theme: string) {
        let themeLink: HTMLLinkElement = <HTMLLinkElement> document.getElementById('theme-css');
        themeLink.href = 'assets/components/themes/' + theme + '/theme.css';
        event.preventDefault();
    }

However in that directory 'assets/components/themes/' + theme + ' there are .scss files? I'm not sure if I'm overlooking something? When I set up my code in this fashion and click on a theme I want to dynamic switch to, I receive this error in the console log:

"Resource interpreted as Stylesheet but transferred with MIME type text/plain:"

Thank you

[JeffBrower]

As much as I hate "Me too" posts.... Me too.

I note that you received no responses from any of the developers or other users, so I was wondering if you figured this one out on your own. I want to swap between dark and light themes using the sass based option and I have almost decided it is impossible. If you have solved this can you share?

[itsme]

Agreed, another me too. The templates are drive off of external SASS. This makes no sense since Angular includes the capability to do this at runtime. Working on figuring out how to do it currently. If either of you figured it out let me know.

[woutersteven]

Including myself in this thread - if i find out, will post here as well.

[cbutler]

Did you end up finding a solution for this? Thanks