How to mask and unmask input element password type in Ionic / Angluar

How to mask and unmask input element password type in ionic/angular/js:

  
this.togglePasswordField = function () {
     console.log("toggle password field called");
     if (document.getElementById("passwordElement").type == "password") {
        document.getElementById("passwordElement").type = "text";

         document.getElementById("passwordHideIcon").classList.remove("ion-eye");
         document.getElementById("passwordHideIcon").classList.add("ion-eye-disabled");
     }
     else {
          document.getElementById("passwordElement").type = "password";
          document.getElementById("passwordHideIcon").classList.remove("ion-eye-disabled");
          document.getElementById("passwordHideIcon").classList.add("ion-eye");     
          }
    }

This way only uses basic html element manipulation.

passwordHideIcon element is a button that calls the function and uses the ionic icon for eyes and eyes disabled.

How to Dynamically Load Dark Mode CSS with JavaScript

How to Dynamically Load Dark Mode CSS in your Website or WebApp (Ionic, React, or Angular):

1. Create the two separete css files, one for dark colors and one for bright
2. Upload those to your server to css folder
3. Use the script example below to load the appropriate css file based on the hours in the day.


function loadcssfile(filename, filetype){
    if (filetype=="css"){ //check filename is an external CSS file
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

var date = new Date();

 if (date.getHours() >= 19 || date.getHours() <= 7) // after 7pm before 7am
	loadcssfile("../css/darkmode.css", "css");
 else
	loadcssfile("../css/lightmode.css", "css");

Don't blind your readers at night -_-

If you want to incorporate sunset and sunrise you can look into Suncal library, but you will have to request user's location which is always rude and not recommended.

How To Vertically Align Div Element

There are many ways to do this (allegedly), but here’s how I’ve vertically aligned an element inside a div:

In CSS:

.center { 
    height: 200px;
    position: relative;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

In HTML:

<div class="center">
  <p>This should be centered</p>
</div>