fix: apply color-scheme CSS property in @colorscheme annotation (#22828)

Make @colorscheme annotation apply both the theme attribute and the
color-scheme CSS property to the html element, matching the behavior of
Page.setColorScheme() method for consistent behavior between static and
dynamic color scheme configuration.

Author: Artur-

flow-server/src/main/java/com/vaadin/flow/server/communication/IndexHtmlRequestHandler.java

@@ -43,6 +43,7 @@
 import com.vaadin.experimental.Feature;
 import com.vaadin.experimental.FeatureFlags;
 import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.page.ColorScheme;
 import com.vaadin.flow.function.DeploymentConfiguration;
 import com.vaadin.flow.internal.BootstrapHandlerHelper;
 import com.vaadin.flow.internal.BrowserLiveReload;
@@ -259,14 +260,24 @@ private void applyColorScheme(Document indexDocument,
         AppShellRegistry registry = AppShellRegistry.getInstance(context);
         Class<?> shell = registry.getShell();
         if (shell != null) {
-            com.vaadin.flow.component.page.ColorScheme colorSchemeAnnotation = shell
-                    .getAnnotation(
-                            com.vaadin.flow.component.page.ColorScheme.class);
+            ColorScheme colorSchemeAnnotation = shell
+                    .getAnnotation(ColorScheme.class);
             if (colorSchemeAnnotation != null) {
-                String colorScheme = colorSchemeAnnotation.value()
-                        .getThemeValue();
-                if (!colorScheme.isEmpty() && !colorScheme.equals("normal")) {
-                    indexDocument.head().parent().attr("theme", colorScheme);
+                ColorScheme.Value colorSchemeValue = colorSchemeAnnotation
+                        .value();
+                String themeValue = colorSchemeValue.getThemeValue();
+                if (!themeValue.isEmpty() && !themeValue.equals("normal")) {
+                    Element html = indexDocument.head().parent();
+                    html.attr("theme", themeValue);
+                    String colorSchemeStyle = "color-scheme: "
+                            + colorSchemeValue.getValue() + ";";
+                    String existingStyle = html.attr("style");
+                    if (existingStyle != null && !existingStyle.isBlank()) {
+                        html.attr("style",
+                                existingStyle.trim() + " " + colorSchemeStyle);
+                    } else {
+                        html.attr("style", colorSchemeStyle);
+                    }
                 }
             }
         }

flow-server/src/test/java/com/vaadin/flow/server/communication/IndexHtmlRequestHandlerTest.java

@@ -51,6 +51,7 @@
 
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.page.AppShellConfigurator;
+import com.vaadin.flow.component.page.ColorScheme;
 import com.vaadin.flow.di.Lookup;
 import com.vaadin.flow.di.ResourceProvider;
 import com.vaadin.flow.internal.JacksonUtils;
@@ -841,6 +842,117 @@ public void should_apply_theme_variant() throws IOException {
         assertEquals("dark", document.head().parent().attr("theme"));
     }
 
+    @ColorScheme(ColorScheme.Value.DARK)
+    public static class ClassWithDarkColorScheme
+            implements AppShellConfigurator {
+    }
+
+    @Test
+    public void should_apply_colorScheme_dark() throws IOException {
+        AppShellRegistry registry = AppShellRegistry.getInstance(context);
+        registry.setShell(ClassWithDarkColorScheme.class);
+        mocks.setAppShellRegistry(registry);
+
+        indexHtmlRequestHandler.synchronizedHandleRequest(session,
+                createVaadinRequest("/"), response);
+
+        String indexHtml = responseOutput.toString(StandardCharsets.UTF_8);
+        Document document = Jsoup.parse(indexHtml);
+
+        assertEquals("dark", document.head().parent().attr("theme"));
+        assertEquals("color-scheme: dark;",
+                document.head().parent().attr("style"));
+    }
+
+    @ColorScheme(ColorScheme.Value.LIGHT_DARK)
+    public static class ClassWithLightDarkColorScheme
+            implements AppShellConfigurator {
+    }
+
+    @Test
+    public void should_apply_colorScheme_lightDark() throws IOException {
+        AppShellRegistry registry = AppShellRegistry.getInstance(context);
+        registry.setShell(ClassWithLightDarkColorScheme.class);
+        mocks.setAppShellRegistry(registry);
+
+        indexHtmlRequestHandler.synchronizedHandleRequest(session,
+                createVaadinRequest("/"), response);
+
+        String indexHtml = responseOutput.toString(StandardCharsets.UTF_8);
+        Document document = Jsoup.parse(indexHtml);
+
+        assertEquals("light-dark", document.head().parent().attr("theme"));
+        assertEquals("color-scheme: light dark;",
+                document.head().parent().attr("style"));
+    }
+
+    @ColorScheme(ColorScheme.Value.NORMAL)
+    public static class ClassWithNormalColorScheme
+            implements AppShellConfigurator {
+    }
+
+    @Test
+    public void should_not_apply_colorScheme_normal() throws IOException {
+        AppShellRegistry registry = AppShellRegistry.getInstance(context);
+        registry.setShell(ClassWithNormalColorScheme.class);
+        mocks.setAppShellRegistry(registry);
+
+        indexHtmlRequestHandler.synchronizedHandleRequest(session,
+                createVaadinRequest("/"), response);
+
+        String indexHtml = responseOutput.toString(StandardCharsets.UTF_8);
+        Document document = Jsoup.parse(indexHtml);
+
+        assertEquals("", document.head().parent().attr("theme"));
+        assertEquals("", document.head().parent().attr("style"));
+    }
+
+    @Test
+    public void should_append_colorScheme_to_existing_style()
+            throws IOException {
+        File projectRootFolder = temporaryFolder.newFolder();
+
+        // Create custom index.html with existing style attribute on html
+        // element
+        String indexHtmlWithStyle = """
+                <!DOCTYPE html>
+                <html style="--custom-prop: value;">
+                <head>
+                  <meta charset="UTF-8" />
+                  <meta name="viewport" content="width=device-width, initial-scale=1" />
+                </head>
+                <body>
+                  <div id="outlet"></div>
+                </body>
+                </html>
+                """;
+
+        File frontendDir = new File(projectRootFolder, "frontend");
+        frontendDir.mkdirs();
+        File indexHtml = new File(frontendDir, "index.html");
+        java.nio.file.Files.writeString(indexHtml.toPath(), indexHtmlWithStyle);
+
+        TestUtil.createStatsJsonStub(projectRootFolder);
+
+        deploymentConfiguration.setProductionMode(false);
+        deploymentConfiguration.setProjectFolder(projectRootFolder);
+
+        AppShellRegistry registry = AppShellRegistry.getInstance(context);
+        registry.setShell(ClassWithDarkColorScheme.class);
+        mocks.setAppShellRegistry(registry);
+
+        indexHtmlRequestHandler.synchronizedHandleRequest(session,
+                createVaadinRequest("/"), response);
+
+        String indexHtmlOutput = responseOutput
+                .toString(StandardCharsets.UTF_8);
+        Document document = Jsoup.parse(indexHtmlOutput);
+
+        assertEquals("dark", document.head().parent().attr("theme"));
+        assertEquals("--custom-prop: value; color-scheme: dark;",
+                document.head().parent().attr("style"));
+    }
+
     @Test
     public void should_store_IndexHtmltitleToUI_When_LoadingServerEagerly()
             throws IOException {