Angular Material Input does not have white text with dark theme

4
votes

Currently, I am trying to use the dark theme from angular material. The issue that I am having is that the matInput color is still black. I set the color of my mat-form-field to primary. I am still learning how to implement these custom themes, so I may not being understanding it correctly. I can see that the currentColor variable in the inspector is black. Please note that I am not overwriting the colors anywhere in project. The most css that I have right now is the custom theme.

I also don't want to set color from my sass I want it to use the theme foreground color automatically.

Here is my custom theme sass:

@import '../node_modules/@angular/material/theming';

@include mat-core();

$md-skyblue: (
    50 : #e5f2fd,
    100 : #bfdefb,
    200 : #95c8f8,
    300 : #6ab1f5,
    400 : #4aa1f2,
    500 : #2a90f0,
    600 : #2588ee,
    700 : #1f7dec,
    800 : #1973e9,
    900 : #0f61e5,
    A100 : #ffffff,
    A200 : #dee9ff,
    A400 : #abc8ff,
    A700 : #91b7ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$dark-primary: mat-palette($md-skyblue, 700, 500, 900);
$dark-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);

$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

@include angular-material-theme($dark-theme);

$background: map-get($dark-theme, background);

body {
    background-color: mat-color($background, background);
}

Thanks!

Edit: Here's a screenshot:

White text when <code>mat-form-field</code> is in <code>mat-card</code>

1
angularsassangular-material2
Hi, opcycrus! Welcome to StackOverflow! Could you please attach a screenshot of the problem that you're currently experiencing? Also, please take note that you should use @import '~@angular/material/theming; instead of the @import '../node_modules/@angular/material/theming'; (if you're using the Angular CLI that is). Lastly, take note that you can set the background's colour by applying the mat-app-background class to your body element. (Note that if you're using a sidenav, this should already have been done for you.) - Edric
Thanks for the tips! I am attaching screenshots now. The first one you can see that the text in the form field is white. I found that if I put that mat-form-field in the mat-card the input text is white. If I put the mat-form-field in a just a plain div for example the input text is black even knowing I am using the dark theme. @edric - opcyrus

1 Answers

1
votes

Update -

I just opened this for the first time in a few days, and now it is showing the text as white in the mat-form-field. It may have just have been a fluke and by rebuilding and serving the app, this time it somehow fixed itself. It was just strange because I kept running the ng s to to rebuild the app when I posted this originally and the text color in the input was remaining black.

Thanks!