Load CSS Theme Dynamically on user selection in AngularJS

Gaurav Gupta
9y
33.9k
0
1

Blog

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) {
// set the default theme
$scope.css = 'Red';
// create the list of themes
$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