Angular – Welcome to the dark mode

---

I already gave an overview about the dark mode here. When it comes to implement it, moste of the time there is more than one way to do it.
Here I want to dive into some possibilities using angular.

Dark Mode detection

All dark theme implementations depend on the detection of the systems or browsers setting. By now, most browsers support the prefers-color-scheme (except ie). This css media query allows to get the users preferred theme setting for a uniform appearance.

Dark Mode class

The implementation of dark or light mode is attached to a css class at the central element. Every child will inherit this.

As an important note: attach this class to the body tag in the index.html. When using the app.component.html instead, it won’t affect dialogs and other floating elements outside the app components context.

Angular Theming

Angular Material has its own theming logic. Within the prebuild themes there are already light and dark themes. However, when you want to serve a dark mode to your theme, you have to setup the theme by yourself. Take care to use ‘define-light-theme’ or ‘define-dark-theme’ to set the right background and foreground colors.

When using this level of prebuild themes, this is the least amount of effort to implement an automatic dark mode (that’s why I decided to use it).

@use '~@angular/material' as mat;
@import '~@angular/material/theming';
@include mat.core();

$angular-primary: mat.define-palette(mat.$deep-purple-palette);
$angular-accent: mat.define-palette(mat.$amber-palette);
$angular-warn: mat.define-palette(mat.$red-palette);

$angular-default-theme: mat.define-light-theme(
    (
      color: (
        primary: $angular-primary,
        accent: $angular-accent,
        warn: $angular-warn,
      )
    )
);

$angular-dark-theme: mat.define-dark-theme(
    (
      color: (
        primary: $angular-accent,
        accent: mat.define-palette(mat.$light-blue-palette),
        warn: $angular-warn,
      )
    )
);
@media (prefers-color-scheme: light) {
  @include mat.all-component-colors($angular-default-theme);
}

@media (prefers-color-scheme: dark) {
  @include mat.all-component-colors($angular-dark-theme);
}

Also, take care, that the body tag within the index.html has the ‘mat-app-background’ class, to apply the themes background color.

Package

The npm package angular-dark-mode is dependency free and lets you insert the observable into your mode switch. All you got to do is define the styles for the two modes. There doesn’t seem to be an automatic mode detection. The mode is attached to the body tag via css class.

Pure CSS

A media query with prefers-color-scheme (not for ie) lets you define all the styles that differ between light and dark theme.
It is similar to the material solution, but instead of including color themes, you will have to define all the styles, that differ between dark and light mode. That’s more typing, you can be much more specific, but have to take care to get all exceptions.

media (prefers-color-scheme: light) {
  body {
      color: rgb(28, 0, 0);
  }

  .content {
    background-color: rgba(253, 250, 241, 0.8);
  }

  .content__title {
    color: darkred;
  }
}

@media (prefers-color-scheme: dark) {
  body {
      color: rgb(253, 250, 241);
  }


  .content {
    background-color: rgba(38, 0, 13, 0.8);
  }

  .content__title {
    color: rgb(191, 7, 4);
  }
}

As an alternative usage, one can use css custom properties.
This won’t work in internet explorer.

@media (prefers-color-scheme: light) {
  --main-bg-color: lightgrey;
  --main-color: black;
}

@media (prefers-color-scheme: dark) {
  --main-bg-color: darkgrey;
  --main-color: white;
}

.content {
  color: var(--main-color);
  background-color: var(--main-bg-color);
}

Light switch

Later I will expand at this post with a light switch using a ThemeService to change the mode for the user.