Skip to main content

Add 'Night mode' using AngularJS

By
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.

<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

Popular posts from this blog

Create drop-down menu with image icons in Android

By
Hello devs! In this tutorial, we will be creating a drop-down menu on clicking a button in Android studio. Here is an image of how our menu is going to look: On clicking the hamburger icon, a vertical menu will appear with image icons of your choice. Above image is just to get an idea of what we are going to develop. Let's get started. Step 1: Open the layout file where you want the menu. Add the hamburger icon on an image button. <ImageButton android :layout_width= "50dp" android :layout_height= "50dp" android :src= "@drawable/ham" android :id= "@+id/ham" android :background= "#00000000" />  Note : #00000000 specifies 'transparent' background. Step 2: Add a vertical linear layout for the menu. Inside that, add nested linear layouts for horizontal rows. <LinearLayout android :layout_width= "wrap_content" android :layout_height= "wrap_content...
Post a Comment
Read more

Shake a view(edit text) on incorrect input at OTP,passwords,etc (Android)

By
Hello devs! This is another short tutorial to show how to shake an Edit text view if the input is incorrect. Note : The tutorial assumes that you have the basic knowledge about android development. It involves the following steps : 1. Create the Edit text and cast it inside the onCreate. EditText edittext=findViewById(R.id.edit_text); Recommended : https://github.com/GoodieBag/Pinview Optional - Put the edit text inside a dialog to take an input from the dialog. 2. Write an animation XML. Here is an example: ( shake.xml ) Courtesy : https://gist.github.com/simon-heinen/9795036 <? xml version = " 1.0 " encoding = " utf-8 " ?> < set xmlns : android = " http://schemas.android.com/apk/res/android " > < rotate android : duration = " 70 " android : fromDegrees = " -5 " androi...
Post a Comment
Read more

Convert List of user-defined datatype to String and back into List Java

By
There are times when it is necessary to convert a list of user-defined objects to string and later on retrieve it as a list in its original form. Example: like storing it into a Redis cache . How do we do that?  ObjectMapper Steps: 1. ObjectMapper objectMapper = new ObjectMapper(); First, initialize ObjectMapper. 2. List<YourClass> listObj ; Create and initialize your list of user-defined object. where, YourClass is a class having multiple variables. Example - class YourClass{ String abc; String xyz; } 3.  String convertedStr = objectMapper.writeValueAsString(listObj); This is the string conversion of the list. 4.  listObj = objectMapper.readValue(convertedStr, new TypeReference<List<YourClass>>(); And we are back with your list object.
Post a Comment
Read more