Angular Material Input does not have white text with dark theme

user_10311355 0
Viewed 2673

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>

angular-material2 angular sass
1 Answers

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!

user_103113550
Related