Components: I cannot get the dark themes to work

[Itagiba]

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.

[kara]

@Itagiba Can you link to a repro case? It works in our demo app as intended, so we need more information.

[kara]

There isn't enough info here to work on this, so I'm closing. Feel free to file a new issue with an extended code sample.

[JaimeStill]

@kara, I have been having issues with dark themes as well and was able to make a repro. I kept things simple and, rather than trying to create a toggle-able dark theme, I just made the default theme based on the dark theme:

styles.scss

@import '~@angular/material/_theming.scss';
@include mat-core();

$default-theme: mat-dark-theme(mat-palette($mat-green, A400), mat-palette($mat-light-blue, A400));
@include angular-material-theme($default-theme);
...

Here is the result:

This project was built using Angular CLI and is at this GitHub Repo.

Versions

• @angular/* - ^4.2.4
• @angular/material - ^2.0.0-beta.10

[kara]

@JaimeStill When you add a Material dark theme, it only applies to Material components. In your app, the white part looks like part of <section> tags rather than a component, so that'd be what is expected. We try to scope styles to the components themselves so there aren't surprising side effects (e.g. you add a dark-themed card, and your whole app turns black). In this case, we'd suggest adding a custom style for non-Material section.

[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._}