To implement themes in application I create multiple css files with different styles like (red, green,blue).
Red.css
  2. body
  3. {
  4. font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
  5. font-size: 15px;
  6. line-height: 1.42857143;
  7. color: #333333;
  8. background-color: red;
  9. }
Blue.css
  1. body
  2. {
  3. font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
  4. font-size: 15px;
  5. line-height: 1.42857143;
  6. color: wheat;
  7. background-color: blue;
  8. }
Green.css
  1. body
  2. {
  3. font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
  4. font-size: 15px;
  5. line-height: 1.42857143;
  6. color: chartreuse;
  7. background-color: green;
  8. }
Then I create an app.js file for AngularJS, in which I declare my Angular module and controller.
  1. angular.module('ThemeApp', [])
  3. .controller('mainController', function ($scope) {
  5. // set the default theme
  6. $scope.css = 'Red';
  8. // create the list of themes
  9. $scope.bootstraps = [
  10. { name: 'Red', url: 'Red' },
  11. { name: 'Blue', url: 'Blue' },
  12. { name: 'Green', url: 'Green' }
  13. ];
  15. });
In the above code I declare a module "ThemeApp" and then attach a controller with this module. In the controller I declare an object array with all available theme that implements my application. I set one of theme by default for application for the first time.
Now, moving to HTML Page.
  1. <html ng-app="ThemeApp" ng-controller="mainController">
  3. <head>
  5. <script src="Scripts/angular.min.js"></script>
  6. <!-- pull in css based on angular -->
  7. <link rel="stylesheet" ng-href="{{css}}.css">
  8. <!-- bring in JS and angular -->
  9. <script src="CustomJS/app.js"></script>

  11. </head>
  13. <body>
  14. <div >
  15. <form>
  17. <div >
  18. <h1> <label>Select Theme</label></h1>
  19. <select ng-model="css" ng-options="bootstrap.url as bootstrap.name for bootstrap in bootstraps">
  20. </select>
  21. </div>
  22. </form>
  23. </div>
  24. </body>
  25. </html>
Your output will looks like this


So, We can exactly see how it works. We are pulling our own custom css file dynamically with ng-Href directive in AngularJS.