CODEWITHSUNDEEP
angularangular-material2
madHorse
madHorse

Reputation: 109

Dark-theme in angular/material2 is not dark

I am working with angular/material2 and I am trying to get a dark theme. Following the doc at https://material.angular.io/guide/theming I defined my custom theme.scss as follows:

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

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

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

The primary, accent and warn color appears as defined in my custom theme, but I don't see a dark theme (i.e. black background and foreground color changed accordingly).

In the example provided along with the docs I saw that the background has been set through a css class, but that is not the behaviour I would expect; dark-theme seems to me a specific "kind" of theme with a proper level of automation.

Am I wrong ? Anybody can help me to clarify this issue ?

Upvotes: 3

Views: 4422

Answers (2)

EverythingChanges
EverythingChanges

Reputation: 136

From the documentation:

Finally, if your app's content is not placed inside of a mat-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body).

So if you're not using the mat-sidenav-container component, you need to add the Angular Material 2 background class to your HTML body like:

<body class="mat-app-background">

Upvotes: 12

madHorse
madHorse

Reputation: 109

Definitely I was wrong !!! Dark theme works ... but only when inside a md- selector such as md-card. Setting a body background color can be done only with css.

Upvotes: 0

Related Questions