I cannot get the dark themes to work

I cannot find an open/closed issue with this but I found this: http://stackoverflow.com/questions/41967601/dark-theme-in-angular-material2-is-not-dark

For the contrast from white to dark to apply if you add a $theme: mat-dark-theme($primary, $accent); in struction

Everything just stays on the light theme no matter which theme you choose or create.

If you @import '~@angular/material/core/theming/prebuilt/purple-green'; to app.component.scss (using the default CLI project)

or create your own:

@include mat-core();

$primary: mat-palette($mat-indigo,A400);
$accent: mat-palette($mat-lime,A400);
$warn: mat-palette($mat-red);

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

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

The colours are available but none of the stylings under $mat-dark-theme-background and $mat-dark-theme-foreground work.

[JaimeStill]

@kara, I see. It was a little bit jarring going from using md-sidenav-container and having the content region styled as expected, as seen here.

In the theming guide, it says:

In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:

• A primary palette: colors most widely used across all screens and components.
• An accent palette: colors used for the floating action button and interactive elements.
• A warn palette: colors used to convey error state.
• A foreground palette: colors for text and icons.
• A background palette: colors used for element backgrounds.

This leads you to believe that if you apply a dark theme, the foreground palette and background palette will provide an appropriately styled foreground and background.

I did, however, catch this (which was not in the theming guide the first time I read through it):

Finally, if your app’s content is not placed inside of a md-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body). This ensures that the proper theme background is applied to your page.

After reading this, I was able to get the results I wanted by adding mat-app-background to the root element in my app component, and a color styling in styles.scss:

app.component.html

<div class="mat-typography app-frame mat-app-background" fxLayout="column">

styles.scss

html, body, app-root, .app-frame {
    overflow: hidden;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    color: #e0e0e0;
}

It might be helpful to have a similar mat-app-foreground class that allows you to opt into styling the background / foreground based on the active theme.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}