Change the Angular Material 2 theme from light to dark with a simple click

Question

Change the Angular Material 2 theme from light to dark with a simple click

I'm working on an Angular 2 Material project and I want to be able to switch the theme from dark to light with a single click of a button. Can anyone help me figure out how to achieve this?

Any tips or advice would be greatly appreciated!

angular typescript material-design angular-material2

Answer 1

Answer №1

To conditionally add a CSS class to the document, you can utilize the class binding syntax in Angular. This CSS class is used to define styling for the dark theme of the application.

In your menu:

app.component.html:

<div [class.dark-theme]="isDarkTheme">
    <!--Your application content here-->
    <mat-menu #more="mdMenu">
        <!--Your content here-->
        <button mat-menu-item (click)="changeTheme()">
            Change Theme
        </button>
    </mat-menu>
</div>

app.component.ts:

// import statements here
import {Component} from '@angular/core';

export class AppComponent {
    // Initialize isDarkTheme to false
    isDarkTheme: boolean = false;

    changeTheme(): void {
        if (this.isDarkTheme) {
           this.isDarkTheme = false;
        } else {
           this.isDarkTheme = true;
        }
     }
}

You can then define the dark theme variant in your SCSS configuration file:

theme.scss:

@import '~@angular/material/core/theming/_all-theme';

@include mat-core();
.dark-theme {
    // Dark theme
    $app-dark-primary: mat-palette($mat-pink, 700);
    $app-dark-accent: mat-palette($mat-blue-grey);
    $app-dark-theme: mat-dark-theme($app-dark-primary, $app-dark-accent);

    @include angular-material-theme($app-dark-theme);
}

Answer 2

To conditionally add a CSS class to the document, you can utilize the class binding syntax in Angular. This CSS class is used to define styling for the dark theme of the application.

In your menu:

app.component.html:

<div [class.dark-theme]="isDarkTheme">
    <!--Your application content here-->
    <mat-menu #more="mdMenu">
        <!--Your content here-->
        <button mat-menu-item (click)="changeTheme()">
            Change Theme
        </button>
    </mat-menu>
</div>

app.component.ts:

// import statements here
import {Component} from '@angular/core';

export class AppComponent {
    // Initialize isDarkTheme to false
    isDarkTheme: boolean = false;

    changeTheme(): void {
        if (this.isDarkTheme) {
           this.isDarkTheme = false;
        } else {
           this.isDarkTheme = true;
        }
     }
}

You can then define the dark theme variant in your SCSS configuration file:

theme.scss:

@import '~@angular/material/core/theming/_all-theme';

@include mat-core();
.dark-theme {
    // Dark theme
    $app-dark-primary: mat-palette($mat-pink, 700);
    $app-dark-accent: mat-palette($mat-blue-grey);
    $app-dark-theme: mat-dark-theme($app-dark-primary, $app-dark-accent);

    @include angular-material-theme($app-dark-theme);
}

Change the Angular Material 2 theme from light to dark with a simple click

Answer №1

Similar questions

Unveiling the Mystery of Angular: Why are constructor parameters without access specifiers hidden from view outside the

Automate the process of replacing imports in Jest automatically

Only implement valueChanges on the second step of the form

Transforming a string into key-value pairs using Typescript

Error retrieving the latest token in Angular before the component has fully loaded

Modify a particular attribute in an array of objects

This component is not compatible with JSX syntax and cannot be used as a JSX component. The type '() => Element' is not suitable for JSX element rendering

Closing iframe in Angular 4 after redirection

Encountered Error: Unable to locate the module 'url' within webpack version 5 and Angular version 14

Declaration of React conditional props in TypeScript

Unable to leverage vscode workspace path for the next js 13 project

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

Discover the unique value in Angular if it is not present in the list

Angular - Verify the presence of queryParams on the root path (/)

Issue: Map container not located when implementing a leaflet map with Angular

Angular Proxy is not passing the WebSocket Upgrade Header

Issue: The function "generateActiveToken" is not recognized as a function

"Error: The update depth has exceeded the limit while trying to use the

GitHub Actions causing build failure in Angular project exclusively

Inject a new observable into the current Subject