login和sidenav组件黑夜主题不生效

Question

切换黑夜主题后，header和footer组件(添加了color="primary")的主题颜色改变了，但其它组件的主题没有变化，

我看到老师切换时，login和sidenav组件的主题也跟着变化的，请问这是什么原因？

Answer 1

接灰的电子产品 2017-12-15 13:46:50

代码贴出来啊

• 提问者 穿鞋的面条 #1

  header组件的HTML代码：
  <md-toolbar color="primary">
    <button md-icon-button (click)="toggleSidebar()">
      <md-icon svgIcon="menu"></md-icon>
    </button>
    <span>学习Angular4-测试项目</span>
    <span class="fill-remaining-space"></span>
    <md-slide-toggle (change)="toggleDarkTheme($event)">黑夜模式</md-slide-toggle>
  </md-toolbar>
  
  
  header组件的TS：
  export class HeaderComponent implements OnInit {
  
    @Output()
    toggle = new EventEmitter<void>();
  
    @Output()
    isDarkTheme = new EventEmitter<boolean>();
  
    constructor() { }
  
    ngOnInit() {
    }
  
    toggleSidebar() {
      this.toggle.emit();
    }
  
    toggleDarkTheme(event) {
      this.isDarkTheme.emit(event.checked);
    }
  
  }

• 提问者 穿鞋的面条 #2

  问题已经解决了，是我把theme.scss文件里mat-dark-theme()也写成了mat_light_theme()的原因，谢谢老师

Answer 2

提问者 穿鞋的面条 2017-12-17 12:37:33

<md-toolbar color="primary">
 <button md-icon-button (click)="toggleSidebar()">
   <md-icon svgIcon="menu"></md-icon>
 </button>
 <span>学习Angular4-测试项目</span>
 <span class="fill-remaining-space"></span>
 <md-slide-toggle (change)="toggleDarkTheme($event)">黑夜模式</md-slide-toggle>
</md-toolbar>

export class HeaderComponent implements OnInit {

 @Output()
 toggle = new EventEmitter<void>();

 @Output()
 isDarkTheme = new EventEmitter<boolean>();

 constructor() { }

 ngOnInit() {
 }

 toggleSidebar() {
   this.toggle.emit();
 }

 toggleDarkTheme(event) {
   this.isDarkTheme.emit(event.checked);
 }

}