angular-themer demo

Try it here

Installation

bower install angular-themer

Usage

Configure angular-themer within a config-block for your (app/demo-app.js) application.

angular.module('demoApp', ['angular-themer'])

  .config(['themerProvider', function (themerProvider) {
    var styles = [
      { key: 'LIGHT', label: 'Light Theme', href: 'demo/light.css'},
      { key: 'DARK', label: 'Dark Theme', href: 'demo/dark.css'},
      { key: 'DRACULA', label: 'Dracula Theme', href: ['demo/dracula.css', 'demo/header-size.css']}
    ];

    themerProvider.setStyles(styles);
    themerProvider.setSelected(styles[0].key);
  }])

;

In your index.html you have to include themer.js and add the themer-link directive to a link-element in the html header. To change the themes you may include the theme-switcher-directive anywhere in your document.

<html>
  <head ng-app="demoApp">
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-themer/dist/themer.min.js"></script>
    <script src="app/demo-app.js"></script>
    <link themer-link>
  </head>
  <body>
    <div themer-switcher></div>
  </body>
</html>

Issues?

Please report any issue at the project's Github Issue Page.