Angular Obsidian Theme

Question

Angular Obsidian Theme

Hey there! I've successfully implemented a toggle button that switches my Ionic 3 app to dark mode. However, I'm unsure about where exactly I should define the global class [class.dark-theme]="dark". It's essential for this class to be in the app.component.ts file in order to apply the changes throughout the entire app. Here's what I have done so far:

Here's the code snippet from any-page.html:

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

And here's the content of variable.scss:

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

In app.component.ts, I have defined the following:

export class MyApp {
  dark=false;
}

Can you provide guidance on how I can properly define the class for NgModel="dark" as ([class.dark-theme]="dark")? Thanks!

angular typescript ionic-framework

Answer 1

Answer №1

Incorporating a Dark Theme is something I've also accomplished, although using Angular instead of Ionic. The goal is to insert a dark class within the body element. Below, you'll find the code I used:

To begin, create a dark-mode.component 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);
    }
  }
}

I'm utilizing local storage to store the user's preference. Here's how the HTML looks:

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

The next step was importing this component into my app.module.ts file:

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

Finally, all that's left to do is include your component in an HTML template, as I did in menu.component.html:

<dark-mode></dark-mode>

I trust this information proves helpful.

Answer 2

Incorporating a Dark Theme is something I've also accomplished, although using Angular instead of Ionic. The goal is to insert a dark class within the body element. Below, you'll find the code I used:

To begin, create a dark-mode.component 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);
    }
  }
}

I'm utilizing local storage to store the user's preference. Here's how the HTML looks:

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

The next step was importing this component into my app.module.ts file:

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

Finally, all that's left to do is include your component in an HTML template, as I did in menu.component.html:

<dark-mode></dark-mode>

I trust this information proves helpful.

Angular Obsidian Theme

Answer №1

Similar questions

Using Typescript to inherit from several classes with constructors

Should you approach TypeScript modules or classes with a focus on unit testing?

The Typescript compiler will continue to generate JavaScript code even if there are compilation errors

typescript warns that an object may be potentially null

Is there a method to transform the event triggered by a child component via @Output into an observable stream within the parent component?

Angular Error: Potential security risk detected in resource URL context due to unsafe value being used

The requested resource does not have an 'Access-Control-Allow-Origin' header

Encountering the error message "TypeError: this.http.post(...).map is not a function" after upgrading from Angular 5 to Angular

The value returned by Cypress.env() is always null

Ensuring the Current Page is Valid Before Progressing to the Next Step in Angular-Archwizard

Ways to initiate a fresh API request while utilizing httpClient and shareReplay

Inserting items into an array entity

There was a problem encountered while parsing the module due to an unexpected token. It appears that this file type requires a specific loader in order to be properly handled

Leveraging ngModel within Form Arrays in Angular 4 with ReactiveFormsModule

Creating interactive buttons in Angular 2

Encountering a 500 error in Angular while utilizing forkJoin for calling API services

Extending Mongoose's capabilities with header files for the "plugin" feature, utilizing the .methods and .statics methods

React TypeScript - creating a component with a defined interface and extra properties

Searching for the position of different size values according to their specific value

What is the best method for incorporating Angular 2 files into a Django template?