невозможно сменить темную тему на угловую с угловым материалом - PullRequest
Новая
       5

невозможно сменить темную тему на угловую с угловым материалом

0 голосов
/ 11 января 2019

Я использую последнюю версию углового и углового материала. Я следовал руководству по теме https://material.angular.io/guide/theming. Я использую одну из предустановленных тем в своем приложении, но не могу перевести приложение в темный режим.

мой код выглядит следующим образом.

app.component.html 

ng-container [class.dark-theme]="isDark" class="mat-app-background">
  <mat-sidenav-container>
    <mat-sidenav></mat-sidenav>
    <mat-sidenav-content>
      <app-request></app-request>
      <app-benchmark></app-benchmark>
    </mat-sidenav-content>
  </mat-sidenav-container>
</ng-container>

app.component.ts 

export class AppComponent implements OnInit {
  isDark = true;

  ngOnInit(): void {
  }
}

style.css 

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Я вижу, что мое приложение использует материал, оно просто не использует темный режим. Я что-то упустил?

1 Ответ

0 голосов
/ 14 января 2019

Темного «режима» не существует, есть только темные и светлые «темы». Индиго розовый - это легкая тема. Если вы хотите переключиться между светлой и темной темой, вам нужно будет включить стиль и для обеих тем, и для области видимости, чтобы применение такого класса, как «темная тема», приводило к применению темной темы вместо светлой темы. Руководство по темам дает вам код для этого: https://material.angular.io/guide/theming#multiple-themes. Обратите внимание, что вы не импортируете готовую тему при использовании этой техники.

Обратите внимание, что вы не можете использовать ng-container для стиля (class="..." или style="..."), потому что ng-container не входит в DOM. Это полезно ( очень полезно) для угловых вещей, таких как логика шаблонов и т. Д.

...