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 dde2ef07213b64a9cf5dab1cece43f4090dc4d72..d85f3bf8d51a0822cc6d1435fb5e0be196b2bbc9 100644 (file)
--- 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 16b917d2fac71be065f02b98c1fcc28f1f6f50ad..9cd20e687aa340cb3fdf410dfae2a6dc83ea3146 100644 (file)
--- 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) {