Angular 黑暗主题答案

【问题标题】：Angular Dark ThemeAngular 黑暗主题
【发布时间】：2020-06-10 10:31:37
【问题描述】：

您好，我制作了一个切换按钮，可将 Ionic 3 应用程序更改为暗模式。但是我不知道在哪里定义全局类[class.dark-theme]="dark"。它必须在 app.component.ts 上才能在整个应用程序中进行更改。这是我目前所拥有的：

任何页面.html

<ion-item>
    <ion-label>
      Dark Mode
    </ion-label>
    <ion-toggle [(ngModel)]="dark"></ion-toggle>
  </ion-item>

变量.scss

.dark-theme
{
  ion-label{
    font-size: 33pt;
  }
}

app.component.ts

export class MyApp {
  dark=false;
}

我应该如何定义NgModel="dark"([class.dark-theme]="dark")的类

【问题讨论】：

标签： angular typescript ionic-framework

【解决方案1】：

我也实现了一个深色主题，但使用的是 Angular 而不是 Ionic。目的是将dark 类添加到body 元素中。我和你分享我的代码:)

首先，创建一个组件 dark-mode.component ：

import { DOCUMENT } from '@angular/common';

export class DarkModeComponent implements OnInit {

  private class = 'dark';
  private storage = 'darkMode';

  @Input()
  get value(): boolean {
    return this.document.body.classList.contains(this.class);
  }

  set value(isDark: boolean) {
    localStorage.setItem(this.storage, isDark.toString());

    if (isDark) {
      this.document.body.classList.add(this.class);
    } else {
      this.document.body.classList.remove(this.class);
    }
  }

  constructor(@Inject(DOCUMENT) private document: Document) { }

  ngOnInit() {
    const value = localStorage.getItem(this.storage);
    if (value) {
      this.value = JSON.parse(value);
    }
  }
}

我使用本地存储来保留用户的选择。这是 HTML（太复杂了）：

<span (click)="value = !value">Switch theme</span>

我已经在我的 app.module.ts 中导入了这个组件：

@NgModule({
  declarations: [
    AppComponent,
    ...
    DarkModeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent],
})
export class AppModule { }

然后你只需要在 HTML 模板中调用你的组件，我把它放到一个 menu.component.html 中：

<dark-mode></dark-mode>

我希望它会有所帮助。

【讨论】：

谢谢艾米连。不应该有更简单的方法来定义一个类吗？为整个应用程序添加它？
DarkModeComponent 中的设置器完成了这些工作。你试过了吗？ this.document.body.classList.add('dark')
是的，它有效！但我想通过在 app.component 文件中添加一个全局类（黑暗主题）来做到这一点，当 ngModel 中的黑暗为真时将触发该类。我这样做的方式，有效。但我不知道如何让课程适用于整个应用程序和单个页面。例如。如果我将这样的课程放在一个页面中，它可以工作 ..... 抱歉，如果没有把我的问题说清楚跨度>
你可以把放在任何页面吗？
@SimonIoa 我在您的帖子中没有看到您在哪里显示 CSS 类。我给你一个答案，这将使你有可能使用 body 标签上的全局 CSS 类来管理你的主题。我不明白你还需要什么。