To implement themes in application I create multiple css files with different styles like (red, green,blue).
Red.css
-
- body
- {
- font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
- font-size: 15px;
- line-height: 1.42857143;
- color: #333333;
- background-color: red;
- }
-
Blue.css
- body
- {
- font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
- font-size: 15px;
- line-height: 1.42857143;
- color: wheat;
- background-color: blue;
- }
Green.css
- body
- {
- font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
- font-size: 15px;
- line-height: 1.42857143;
- color: chartreuse;
- background-color: green;
- }
Then I create an app.js file for AngularJS, in which I declare my Angular module and controller.
- angular.module('ThemeApp', [])
-
- .controller('mainController', function ($scope) {
-
-
- $scope.css = 'Red';
-
-
- $scope.bootstraps = [
- { name: 'Red', url: 'Red' },
- { name: 'Blue', url: 'Blue' },
- { name: 'Green', url: 'Green' }
- ];
-
- });
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.
- <html ng-app="ThemeApp" ng-controller="mainController">
-
- <head>
-
- <script src="Scripts/angular.min.js"></script>
-
- <link rel="stylesheet" ng-href="{{css}}.css">
-
- <script src="CustomJS/app.js"></script>
- </head>
-
- <body>
- <div >
- <form>
-
- <div >
- <h1> <label>Select Theme</label></h1>
- <select ng-model="css" ng-options="bootstrap.url as bootstrap.name for bootstrap in bootstraps">
- </select>
- </div>
- </form>
- </div>
- </body>
- </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.