Feature/Set meta theme color dynamically to respect appearance (#3129)

* Set meta theme color dynamically to respect appearance (dark mode)

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Moved the support to grant private access with permissions from experimental to general availability
+- Set the meta theme color dynamically to respect the appearance (dark mode)
 - Improved the usability to edit market data in the admin control panel
 
 ## 2.64.0 - 2024-03-16

apps/client/src/app/app.component.ts

@@ -1,3 +1,4 @@
+import { getCssVariable } from '@ghostfolio/common/helper';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { ColorScheme } from '@ghostfolio/common/types';
@@ -187,20 +188,28 @@ export class AppComponent implements OnDestroy, OnInit {
       ? userPreferredColorScheme === 'DARK'
       : window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-    this.toggleThemeStyleClass(isDarkTheme);
+    this.toggleTheme(isDarkTheme);
 
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
-        this.toggleThemeStyleClass(event.matches);
+        this.toggleTheme(event.matches);
       }
     });
   }
 
-  private toggleThemeStyleClass(isDarkTheme: boolean) {
+  private toggleTheme(isDarkTheme: boolean) {
+    const themeColor = getCssVariable(
+      isDarkTheme ? '--dark-background' : '--light-background'
+    );
+
     if (isDarkTheme) {
       this.document.body.classList.add('is-dark-theme');
     } else {
       this.document.body.classList.remove('is-dark-theme');
     }
+
+    this.document
+      .querySelector('meta[name="theme-color"]')
+      .setAttribute('content', themeColor);
   }
 }