Implement dark theme support in manifest (#198)

* Implement dark theme support in manifest The update has expanded the color scheme of the application manifest to support dark themes. It defines new attributes for the dark theme color and adjusts the theme color settings for the light theme. Obsolete configurations handling favicons have been removed.
Spomky-Labs · May 11, 2024 · 828d87a · 828d87a
1 parent d2b3a71
commit 828d87a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 25 deletions.
diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon
@@ -410,16 +410,6 @@ parameters:
 			count: 3
 			path: src/ImageProcessor/GDImageProcessor.php
 
-		-
-			message: "#^Since spomky\\-labs/pwa\\-bundle 1\\.2\\.0\\: The \"format\", \"width\" and \"height\" parameters are deprecated and will be removed in 2\\.0\\.0\\. Please use \"configuration\" instead\\.\\.$#"
-			count: 1
-			path: src/ImageProcessor/GDImageProcessor.php
-
-		-
-			message: "#^Since spomky\\-labs/pwa\\-bundle 1\\.2\\.0\\: The \"format\", \"width\" and \"height\" parameters are deprecated and will be removed in 2\\.0\\.0\\. Please use \"configuration\" instead\\.\\.$#"
-			count: 1
-			path: src/ImageProcessor/ImagickImageProcessor.php
-
 		-
 			message: "#^PHPDoc tag @return with type array\\<string, string\\> is incompatible with native type string\\.$#"
 			count: 1

diff --git a/src/Dto/Manifest.php b/src/Dto/Manifest.php
@@ -55,6 +55,9 @@ final class Manifest
     #[SerializedName('theme_color')]
     public null|string $themeColor = null;
 
+    #[SerializedName('dark_theme_color')]
+    public null|string $darkThemeColor = null;
+
     #[SerializedName('edge_side_panel')]
     public null|EdgeSidePanel $edgeSidePanel = null;
 

diff --git a/src/Resources/config/definition/favicons.php b/src/Resources/config/definition/favicons.php
@@ -6,19 +6,6 @@
 
 return static function (DefinitionConfigurator $definition): void {
     $definition->rootNode()
-        /*->beforeNormalization()
-            ->ifTrue(
-                static fn (null|array $v): bool => $v !== null && isset($v['manifest']) && $v['manifest']['enabled'] === true && isset($v['favicons']) && $v['favicons']['enabled'] === true
-            )
-            ->then(static function (array $v): array {
-                if (isset($v['favicons']['background_color']) || ! isset($v['manifest']['theme_color'])) {
-                    return $v;
-                }
-
-                $v['favicons']['background_color'] = $v['manifest']['theme_color'];
-                return $v;
-            })
-        ->end()*/
         ->children()
             ->arrayNode('favicons')
                 ->canBeEnabled()

diff --git a/src/Resources/config/definition/manifest.php b/src/Resources/config/definition/manifest.php
@@ -91,7 +91,13 @@
                     ->example('https://example.com')
                 ->end()
                 ->scalarNode('theme_color')
-                    ->info('The theme color of the application.')
+                    ->info(
+                        'The theme color of the application. If a dark theme color is specified, the theme color will be used for the light theme.'
+                    )
+                    ->example('red')
+                ->end()
+                ->scalarNode('dark_theme_color')
+                    ->info('The dark theme color of the application.')
                     ->example('red')
                 ->end()
                 ->arrayNode('edge_side_panel')

diff --git a/src/Twig/PwaRuntime.php b/src/Twig/PwaRuntime.php
@@ -77,8 +77,25 @@ private function injectThemeColor(string $output, bool $themeColor): string
         if ($this->manifest->themeColor === null || $themeColor === false) {
             return $output;
         }
+        $colors = [
+            'light' => [$this->manifest->themeColor],
+        ];
+        if ($this->manifest->darkThemeColor !== null) {
+            $colors['light'] = [
+                $this->manifest->themeColor,
+                'media' => ' media="(prefers-color-scheme: light)"',
+            ];
+            $colors['dark'] = [
+                $this->manifest->darkThemeColor,
+                'media' => ' media="(prefers-color-scheme: dark)"',
+            ];
+        }
+        foreach ($colors as $color) {
+            $media = $color['media'] ?? '';
+            $output .= sprintf('%s<meta name="theme-color" content="%s" %s>', PHP_EOL, $color[0], $media);
+        }
 
-        return $output . sprintf('%s<meta name="theme-color" content="%s">', PHP_EOL, $this->manifest->themeColor);
+        return $output;
     }
 
     /**