From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 18 Oct 2023 16:49:54 +0000 (+0200)
Subject: Fix the `theme-color` in the admin panel
X-Git-Tag: 6.0.1_dev_1~3^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=9d33f2ded85c07ee9da863098ca741347f93201e;p=GitHub%2FWoltLab%2FWCF.git

Fix the `theme-color` in the admin panel
---

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index dde2ef0721..d85f3bf8d5 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -23,14 +23,27 @@
 		<link rel="manifest" href="{$__wcf->getStyleHandler()->getDefaultStyle()->getFaviconManifest()}">
 		<link rel="icon" type="image/png" sizes="48x48" href="{$__wcf->getStyleHandler()->getDefaultStyle()->getFavicon()}">
 		<meta name="msapplication-config" content="{$__wcf->getStyleHandler()->getDefaultStyle()->getFaviconBrowserconfig()}">
-		<meta name="theme-color" content="{$__wcf->getStyleHandler()->getDefaultStyle()->getVariable('wcfPageThemeColor', true)}">
 	{else}	
 		<link rel="apple-touch-icon" sizes="180x180" href="{$__wcf->getPath()}images/favicon/default.apple-touch-icon.png">
 		<link rel="manifest" href="{$__wcf->getPath()}images/favicon/default.manifest.json">
 		<link rel="icon" href="{$__wcf->getPath()}images/favicon/default.favicon.ico">
 		<meta name="msapplication-config" content="{$__wcf->getPath()}images/favicon/default.browserconfig.xml">
-		<meta name="theme-color" content="#3a6d9c">
 	{/if}
+	<script data-eager="true">
+	{
+		{if $__wcf->getStyleHandler()->getColorScheme() === 'system'}
+		{
+			const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+			document.documentElement.dataset.colorScheme = colorScheme;
+		}
+		{/if}
+		
+		const themeColor = document.createElement("meta");
+		themeColor.name = "theme-color";
+		themeColor.content = window.getComputedStyle(document.documentElement).getPropertyValue("--wcfHeaderBackground");
+		document.currentScript.replaceWith(themeColor);
+	}
+	</script>
 
 	<meta name="timezone" content="{$__wcf->user->getTimeZone()->getName()}">
 	
@@ -49,13 +62,6 @@
 		{* This constant is a compiler option, it does not exist in production. *}
 		{* Unlike the frontend, this option must be defined in the ACP at all times. *}
 		var COMPILER_TARGET_DEFAULT = true;
-
-		{if $__wcf->getStyleHandler()->getColorScheme() === 'system'}
-		{
-			const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-			document.documentElement.dataset.colorScheme = colorScheme;
-		}
-		{/if}
 	</script>
 
 	<script data-eager="true" src="{$__wcf->getPath()}js/WoltLabSuite/WebComponent.min.js?v={@LAST_UPDATE_TIME}"></script>
diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index 16b917d2fa..9cd20e687a 100644
--- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
@@ -433,6 +433,9 @@ final class StyleCompiler extends SingletonFactory
 
         $variables = $this->prepareVariables($variables);
 
+        // The theme color implicitly matches the header background color.
+        $variables['wcfPageThemeColor'] = 'var(--wcfHeaderBackground)';
+
         $scss = "/*!\n\nstylesheet for the admin panel, generated on " . \gmdate('r') . " -- DO NOT EDIT\n\n*/\n";
         $scss .= $this->bootstrap($variables);
         foreach ($files as $file) {