Input field not visible in Angular Material Dark Themes — Solved

Field Fix in Angular Material Dark themes

Angular Material is one of the most preferred User Interfaces for Angular Web Application development. Angular Material is known for its simple and is authoritative with Angular Code and web applications constructed utilizing Angular alongside Angular Material performs better when contrasted with other UI frameworks. I’m writing this tutorial on behalf of Ampersand Academy and intended for #Angular Developers in Medium.

Albeit, Angular Material has great execution, it is as yet known for its bugs and glitches with regards to the UI. As of late, the present form of Angular Material has this glitch in the coding particularly when clients join the dark elements particularly, pink-bluegrey.css theme. The primary glitch which is noted is that, when a mat-input is consolidated, the field fringe and the content cursor isn’t obvious. At the point when we investigate it, we find that it is anything but a bug however this bug must be fixed physically. This can be fixed by just adding a dark foundation shading to the division or holder which holds the mat-input field.

So as to embed the input field, import MatImportModule in app.module.ts first. Later from the documentation site of Angular Material paste the model mat form field structure. Be careful to duplicate the HTML, CSS components in the separate segment.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>
.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%; 
  }
  
  .example-full-width {
    width:

Visible Fields in Light Theme

As a matter, of course, the subject is indigo-pink and with no glitch, the program will render the yield and structure fields will be obvious. Presently, when you change the theme to pink-bluegrey.css or purple-green.css the structure input won’t be noticeable. Following screen capture shows how it is influenced.

No Outline and No Lable Seen in Dark Theme

So as to fix this glitch, we can basically add the foundation shading to the structure label which contains the structure input. The accompanying coding and screen capture will show the amended yield. In the model structure CSS, add the last three classes to get the ideal obvious structure field yield.

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%; 
    background-color: black;
    color: white;
    padding: 15px
  }

Field outline and the label is seen after the fix

Get the source code from the following link:

https://github.com/rdineshkumar88/angular-material/tree/master/MatInput-Dark-Theme-Glitch-Fix