Change theme-color meta tag according to dark mode setting

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, ApplicationRef, ChangeDetectorRef, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
+import { DOCUMENT, Location } from '@angular/common';
 import { User } from './users/user';
 import { TWIGS_SERVICE, TwigsService } from './shared/twigs.service';
 import { SwUpdate } from '@angular/service-worker';
@@ -29,8 +29,9 @@ export class AppComponent implements OnInit {
     private appRef: ApplicationRef,
     private updates: SwUpdate,
     private changeDetector: ChangeDetectorRef,
-    private storage: Storage
-  ){}
+    private storage: Storage,
+    @Inject(DOCUMENT) private document: Document
+  ) { }
 
   ngOnInit(): void {
     const unauthenticatedRoutes = [
@@ -54,7 +55,7 @@ export class AppComponent implements OnInit {
         }
       });
     } else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
-        this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
+      this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
     }
 
     this.updates.available.subscribe(
@@ -91,6 +92,9 @@ export class AppComponent implements OnInit {
         }
       }
     )
+    const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
+    this.handleDarkModeChanges(darkMode);
+    darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
   }
 
   getUsername(): String {
@@ -122,4 +126,15 @@ export class AppComponent implements OnInit {
     this.title = title;
     this.changeDetector.detectChanges();
   }
+
+  handleDarkModeChanges(darkMode: any) {
+    const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
+    let themeColorValue: string;
+    if (darkMode.matches) {
+      themeColorValue = '#333333';
+    } else {
+      themeColorValue = '#F1F1F1';
+    }
+    themeColor.content = themeColorValue;
+  }
 }

src/index.html

@@ -13,7 +13,7 @@
 	<meta name="apple-mobile-web-app-title" content="Twigs">
 	<meta name="application-name" content="Twigs">
 	<meta name="msapplication-TileColor" content="#81c784">
-	<meta name="theme-color" content="#212121">
+	<meta name="theme-color" content="#FFFFFF">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 	<link rel="manifest" href="manifest.json">
 </head>