Update the theme color when the color scheme is updated

See https://www.woltlab.com/community/thread/300357-theme-color-im-darkmode/
WoltLab · Jun 29, 2023 · 2072c19 · 2072c19
1 parent 81769bd
commit 2072c19
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/com.woltlab.wcf/templates/headIncludeIcons.tpl b/com.woltlab.wcf/templates/headIncludeIcons.tpl
@@ -3,3 +3,8 @@
 <link rel="icon" type="image/png" sizes="48x48" href="{$__wcf->getStyleHandler()->getStyle()->getFavicon()}">
 <meta name="msapplication-config" content="{$__wcf->getStyleHandler()->getStyle()->getFaviconBrowserconfig()}">
 <meta name="theme-color" content="{$__wcf->getStyleHandler()->getStyle()->getVariable('wcfPageThemeColor', true)}">
+<script>
+ {
+ document.querySelector('meta[name="theme-color"]').content = window.getComputedStyle(document.documentElement).getPropertyValue("--wcfPageThemeColor");
+ }
+</script>
diff --git a/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts b/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts
@@ -15,12 +15,14 @@ export type ColorScheme = "dark" | "light" | "system";
 
 let currentScheme: ColorScheme = "system";
 let mediaQuery: MediaQueryList;
+let themeColor: HTMLMetaElement;
 
 function setScheme(scheme: ColorScheme): void {
  currentScheme = scheme;
 
  if (currentScheme === "light" || currentScheme === "dark") {
  document.documentElement.dataset.colorScheme = currentScheme;
+ updateThemeColor();
  } else {
  applySystemScheme();
  }
@@ -35,9 +37,14 @@ function setScheme(scheme: ColorScheme): void {
 function applySystemScheme(): void {
  if (currentScheme === "system") {
  document.documentElement.dataset.colorScheme = mediaQuery.matches ? "dark" : "light";
+ updateThemeColor();
  }
 }
 
+function updateThemeColor(): void {
+ themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
+}
+
 function initializeButton(button: HTMLElement): void {
  const dropdownMenu = create([
  {
@@ -89,6 +96,8 @@ export function setup(): void {
  /* Ignore any errors when accessing the `localStorage`. */
  }
 
+ themeColor = document.querySelector('meta[name="theme-color"]')!;
+
  mediaQuery = matchMedia("(prefers-color-scheme: dark)");
  mediaQuery.addEventListener("change", () => {
  applySystemScheme();

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js