Angular Material DatePicker invisible - html

Question

I´m trying to use the angular material datepicker in my project. The datepicker itself is invisible, but if i click in its location or where the calendar icon is, it does work. For clarity, i added a button next to the datepicker. What causes the datepicker to behave like this?
Screenshot of invisible datepicker
Screenshot of datepicker after clicking the invisible calendar icon
For clarity, i have added a button next to the datepicker which does show.
My HTML file:
<div>
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button color="primary">Hello</button>
</div>
My imports:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CoreModule} from './core/core.module';
import {SharedModule} from './shared/shared.module';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import {MatDatepickerModule} from '#angular/material/datepicker';
import {MatNativeDateModule} from '#angular/material/core';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CoreModule,
SharedModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatNativeDateModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I had the same issue. I discovered that 2 of the pre-built themes are considered 'Light' (deeppurple-amber.css & indigo-pink.css) and 2 are considered 'Dark' (pink-bluegrey.css & purple-green.css).
They all work is just that the light ones are visible with white or color background but not black and the dark ones are visible with black or color background but not white.
You can easily try just changing the background color of the body element.
Resources (both from the Angular Docs):
Theming your Angular Material app
Theming Angular Material