Как создать и переключиться между двумя пользовательскими темами? - PullRequest
Новая
       43

Как создать и переключиться между двумя пользовательскими темами?

0 голосов
/ 28 октября 2019

Я пытаюсь переключаться между двумя пользовательскими темами. Однако только некоторые элементы на моей странице переключаются с помощью переключателя. Как сделать так, чтобы переключались и другие элементы, такие как границы, текст и цвета наведения?

Index.html 

<body class="DefaultTheme">
  <app-root></app-root>
</body>

app.component.html 

<div>
    <mat-slide-toggle name="toggle" (click)="changeTheme()">Change theme</mat-slide-toggle>
  </div>

app.component.ts 

export class AppComponent{

  changeTheme() {
    if (document.body.classList.contains("DefaultTheme")) {
      document.body.classList.remove("DefaultTheme");
      document.body.classList.add("CustomTheme");
    }
    else {
      document.body.classList.remove("CustomTheme");
      document.body.classList.add("DefaultTheme");
    }
  }
}

theme.scss 

@import '~@angular/material/theming';
@include mat-core();



$app-primary: mat-palette($mtb-pallete, 500);
$app-accent: mat-palette($mtb-pallete, 550);
$app-warn: mat-palette($mat-red);

$app-theme: mat-light-theme($app-primary,$app-accent,$app-warn);

$primary: mat-color($app-primary);
$accent: mat-color($app-accent);

.DefaultTheme {
@include angular-material-theme($app-theme);
}



$alt-primary: mat-palette($mtb-pallete, 590);
$alt-accent: mat-palette($mtb-pallete, 580);
$alt-warn: mat-palette($mat-red);

$alt-theme: mat-light-theme($alt-primary, $alt-accent, $alt-warn);

$primary: mat-color($alt-primary);
$accent: mat-color($alt-accent);

 .CustomTheme {
    @include angular-material-theme($alt-theme);
  }

1 Ответ

0 голосов
/ 28 октября 2019

PS это скорее предложение. Я использую простой подход, может помочь в вашем случае. Я напишу два отдельных стиля, вложенных в отдельное имя родительского класса. и я изменю имя родительского класса на основе условия, которое в конечном итоге будет применять другой стиль ко всей странице.

например:

HTML-файл: 

<div [ngClass]="(theme)?'pink-theme':'yellow-theme'">
  <h1 class="title">Hello World</h1>
  <p class="body">This is a demo</p>
</div>

Стили: 

.pink-theme {
  h1, p{
    background: pink;
    color: red;
}

.yellow-theme {
  h1, p{
    background: yellow;
    color: red;
}

Здесь, когда theme истинно, применяется розовая тема, а когда ложно, применяется желтая тема. Это самый простой способ смены стиля. Вот рабочая демонстрация

Обновление 1:

Вместо добавления и удаления класса в файле компонента вы можете использовать [ngClass]

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...