Bug: Dark Theme background not taking effect when Router-Outlet is used.

Bug

When a router-outlet is included in the root component, the mat-app-background doesn’t seem to take effect.

What is the expected behavior?

When I toggle to a dark theme, I expect the background color to go dark.

What is the current behavior?

The background color remains white irrespective of whether mat-app-background is included.

What are the steps to reproduce?

The plunker doesn’t let me repro the issue with SCSS, so have created a simple repo here that you can activate using yarn followed by ng serve. The screenshot below should also help.

Below is the dark theme activated, you can see the background remains white even though we added the mat-app-background to body.

What is the use-case or motivation for changing an existing behaviour?

I think the experience of adding mat-app-background should work irrespective of whether router-outlets are involved.

Which versions of Angular, Material, OS, browsers are affected?

OS: Mac OSX Dependencies including Angular, Angular-CLI below:

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

Is there anything else we should know?

Have tried various hacks such as applying min-width:100vh to various root tags to see if this had any bearing, to no effect.

[andrewseguin]

Looks like #3298 will be helpful here. If there is further issue here can you please re-open?

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