Menu
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 ?
882
asked Dec 05 '25 06:12
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With