Question

I would like to add a theme support to my single page application. The requirement is that the theme change must be done locally by javascript (no server calls) to be used in offline mode. I use angularjs, so html will be changed in the router.

The only problem that I have, is how to treat css. Is there any js library to help me load css files? Are there any problems involved in that?

EDIT: I have found the following library https://github.com/rgrove/lazyload/ which should do the job of loading css files. The only downside of the library is that the last update of the library is more than one year ago. A more actively developed library would be appreciated.

Answer 1

style elements can be added and removed in JavaScript. Simply create the element and add it to the page to apply the rules therein, and remove the element to remove its rules. You can do the same with link elements referring to external stylesheets, but if you want to be sure to work in offline mode and if the sheet may not have been cached, style elements with inline rules might work better.

Here’s an example using a style element:

(function() {
  var css = "body { color: green; }";

  document.getElementById("theButton").onclick = toggleStyle;

  function toggleStyle() {
    var style = document.getElementById("styleOne");
    if (style) {
      // Remove it
      style.parentNode.removeChild(style);
    }
    else {
      // Add it
      style = document.createElement('style');
      style.id = "styleOne";
      if (style.styleSheet) {
          style.styleSheet.cssText = css;
      }
      else {
          style.appendChild(document.createTextNode(css));
      }
      document.body.appendChild(style);
    }
  }

})();

Live Copy | Source

Using a link would be even easier, because you don’t have to deal with browser differences around where the style text goes.