Night mode is said to decrease the light intensity and cause less stress to viewer's eyes. Adding night mode to your websites and blogs would be beneficial to your viewers who prefer reading at night. Although most of the users generally have a browser add-on, adding this small feature won't do you any harm. Also, if you are a web developer, you can integrate this with your project.
Night mode is usually turning a white page black and black font white. Other changes can also be added easily in AngularJS.
This post assumes that you have basic knowledge about AngularJS.
Follow the steps:
1. Import AngularJS script into your project.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
2. Add ng-app and ng-controller to your <HTML> tag.
<html ng-app="" ng-controller="myCtrl">
3. Add ng-style to your body or any particular div where you want to see the effect.
<div ng-style="myStyle">
4. Add script of your controller.
5. Now create a button which will trigger the night mode.
<button ng-click="myStyle={'background-color':'black', text:'white'}">
Night Mode
</button>
On clicking this button, the style will be changed to that of night mode.
6. (Optional) Create a button to go back to your normal style.
<button ng-click="myStyle={'background-color':'white', text:'black'}">
Normal Mode
</button>
Note: The CSS of your project may vary. In that case, make the necessary changes.
Here is the full snippet:
<html ng-app="" ng-controller="myCtrl">
<head>
<title>Night Mode example </title>
</head>
<body ng-style="myStyle">
<div>
<button ng-click="myStyle={'background-color':'black', text:'white'}">
Night Mode
</button>
<button ng-click="myStyle={'background-color':'white', text:'black'}">
Normal Mode
</button>
<script>
function myCtrl($scope) {
$scope.myStyle = {};
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<p> Here goes the content</p>
</body>
</html>
Night mode is usually turning a white page black and black font white. Other changes can also be added easily in AngularJS.
This post assumes that you have basic knowledge about AngularJS.
Follow the steps:
1. Import AngularJS script into your project.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
2. Add ng-app and ng-controller to your <HTML> tag.
<html ng-app="" ng-controller="myCtrl">
3. Add ng-style to your body or any particular div where you want to see the effect.
<div ng-style="myStyle">
4. Add script of your controller.
<script>
function myCtrl($scope) {
$scope.myStyle = {};
}
</script>
function myCtrl($scope) {
$scope.myStyle = {};
}
</script>
5. Now create a button which will trigger the night mode.
<button ng-click="myStyle={'background-color':'black', text:'white'}">
Night Mode
</button>
On clicking this button, the style will be changed to that of night mode.
6. (Optional) Create a button to go back to your normal style.
<button ng-click="myStyle={'background-color':'white', text:'black'}">
Normal Mode
</button>
Note: The CSS of your project may vary. In that case, make the necessary changes.
Here is the full snippet:
<html ng-app="" ng-controller="myCtrl">
<head>
<title>Night Mode example </title>
</head>
<body ng-style="myStyle">
<div>
<button ng-click="myStyle={'background-color':'black', text:'white'}">
Night Mode
</button>
<button ng-click="myStyle={'background-color':'white', text:'black'}">
Normal Mode
</button>
<script>
function myCtrl($scope) {
$scope.myStyle = {};
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<p> Here goes the content</p>
</body>
</html>
Comments
Post a Comment