Search code examples
cssangularjssassnode-sass

Switching sass variables with angularjs

I am working on theme changer with angularjs and I can't seem to find a way how to replace one sass file with another (both of them contains variables) when user changes his theme. I know that when sass is compiled to css the variables are gone. Is there a way to switch up those files and recompile whole css? I have managed to find that it should be somehow possible to do by calling server to recompile css, but I couldn't find more information. Thank you.

Solution

  • One way we are doing these things is having multiple files for different themes. Example content = 

    variables ... 
primary: '#smtng'

.themeName{
   .header{
      background-color: primary
    }
}

    And in your app.html you can add class to your html tag which will represent themeName. You can hold theme name in some storage and load it from there.

    Basically you are loading all themes, but only rendering css for active theme