Currently, I am in the process of working on a project that involves utilizing AngularJS, UI Bootstrap, and Sass. The next step is to incorporate different themes that can be selected by the user. While I have successfully implemented the ability to apply various backgrounds using angular.element().css(), I am finding this method inadequate for changing the color schemes of different components across multiple pages.
I have considered the option of creating separate CSS files (main_dark.css, main_light.css, etc.) and loading them dynamically with ng-href. This approach would allow me to keep the design aspect separate from the development aspect; however, it has led to some issues such as screen flashing and certain dropdowns malfunctioning.
At this point, I am seeking guidance on whether my current strategy is appropriate or if there are more effective ways to implement themes in an AngularJS environment.