Angular themes and Dark Mode

Dark mode is quite easy to implement, especially now, after I have read and learned bout it.

Following a few quick edits and changes to a base angular app, you are easily able to allow the user to manage if they are in dark mode or not.

There are really good resources on the material angular site for how to apply themes:

Other good resources to help with this is:

with a few changes you can implement changes for your angular app ( or any app really that uses scss ) to automatically detect the users OS settings:

By Adding the segment below your default theme:

$angularjsapp-dark-theme: mat.define-dark-theme((  
  color: (  
    primary: $angularjsapp-primary,  
    accent: $angularjsapp-accent,  
    warn: $angularjsapp-warn,  
  )  
));

and then specifying the preferred colour scheme:

@media (prefers-color-scheme: light) {  
  @include angular-material-theme($angularjsapp-light-theme);  
}  
  
@media (prefers-color-scheme: dark) {  
  @include angular-material-theme($angularjsapp-dark-theme);  
  $background: map.get($angularjsapp-dark-theme, background);  
 
  body {  
    background: mat.get-color-from-palette($background,'background');  
  }  
  
}

you are able to quickly get dark mode into your app.

Final File

My final style.scss looks like below

// Custom Theming for Angular Material  
// For more information: https://material.angular.io/guide/theming  
@use 'sass:map';  
@use '~@angular/material' as mat;  
// Plus imports for other.json components in your app.  
@import '~@angular/material/_theming.scss';  
  
// Include the common styles for Angular Material. We include this here so that you only  
// have to load a single css file for Angular Material in your app.  
// Be sure that you only ever include this mixin once!  
@include mat.core();  
  
// Define the palettes for your theme using the Material Design palettes available in palette.scss  
// (imported above). For each palette, you can optionally specify a default, lighter, and darker  
// hue. Available color palettes: https://material.io/design/color/  
$angularjsapp-primary: mat.define-palette(mat.$indigo-palette);  
$angularjsapp-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);  
// The warn palette is optional (defaults to red).  
$angularjsapp-warn: mat.define-palette(mat.$red-palette);  
  
// Create the theme object. A theme consists of configurations for individual  
// theming systems such as "color" or "typography".  
  
// Include theme styles for core and each component used in your app.  
// Alternatively, you can import and @include the theme mixins for each component  
// that you are using.  
$angularjsapp-light-theme: mat.define-light-theme(  
    (  
      color: (  
        primary: $WCHPortal-primary,  
        accent: $WCHPortal-accent,  
        warn: $WCHPortal-warn,  
      ),  
    )  
);  
  
$angularjsapp-dark-theme: mat.define-dark-theme((  
  color: (  
    primary: $angularjsapp-primary,  
    accent: $angularjsapp-accent,  
    warn: $angularjsapp-warn,  
  )  
));  
  
/* You can add global styles to this file, and also import other.json style files */  
  
@include mat.all-component-themes($angularjsapp-light-theme);  
  
  
html, body {  
  height: 100%;  
}  
  
body {  
  margin: 0;  
  font-family: Roboto, "Helvetica Neue", sans-serif;  
}  
  
  
@media (prefers-color-scheme: light) {  
  @include angular-material-theme($angularjsapp-light-theme);  
}  
  
@media (prefers-color-scheme: dark) {  
  @include angular-material-theme($angularjsapp-dark-theme);  
  $background: map.get($angularjsapp-dark-theme, background);  
 
  body {  
    background: mat.get-color-from-palette($background,'background');  
  }  
  
}