feat: add component-level ColorScheme support via Style interface

flow-server/src/main/java/com/vaadin/flow/dom/ElementConstants.java

@@ -111,6 +111,10 @@ public class ElementConstants {
      * The style property for cursor.
      */
     public static final String STYLE_CURSOR = "cursor";
+    /**
+     * The style property for color-scheme.
+     */
+    public static final String STYLE_COLOR_SCHEME = "color-scheme";
     /**
      * The style property for display.
      */

flow-server/src/main/java/com/vaadin/flow/dom/Style.java

@@ -18,6 +18,8 @@
 import java.io.Serializable;
 import java.util.stream.Stream;
 
+import com.vaadin.flow.component.page.ColorScheme;
+
 import static com.vaadin.flow.dom.ElementConstants.STYLE_ALIGN_ITEMS;
 import static com.vaadin.flow.dom.ElementConstants.STYLE_ALIGN_SELF;
 import static com.vaadin.flow.dom.ElementConstants.STYLE_BACKGROUND;
@@ -35,6 +37,7 @@
 import static com.vaadin.flow.dom.ElementConstants.STYLE_BOX_SIZING;
 import static com.vaadin.flow.dom.ElementConstants.STYLE_CLEAR;
 import static com.vaadin.flow.dom.ElementConstants.STYLE_COLOR;
+import static com.vaadin.flow.dom.ElementConstants.STYLE_COLOR_SCHEME;
 import static com.vaadin.flow.dom.ElementConstants.STYLE_CURSOR;
 import static com.vaadin.flow.dom.ElementConstants.STYLE_DISPLAY;
 import static com.vaadin.flow.dom.ElementConstants.STYLE_FILTER;
@@ -357,6 +360,35 @@ default Style setColor(String value) {
         return set(STYLE_COLOR, value);
     }
 
+    /**
+     * Sets the <code>color-scheme</code> property.
+     * <p>
+     * The color scheme affects how the browser renders UI elements and allows
+     * the component to adapt to system color scheme preferences.
+     *
+     * @param value
+     *            the color scheme value (if <code>null</code> or NORMAL, the
+     *            property will be removed)
+     * @return this style instance
+     */
+    default Style setColorScheme(ColorScheme.Value value) {
+        if (value == null || value == ColorScheme.Value.NORMAL) {
+            return remove(STYLE_COLOR_SCHEME);
+        } else {
+            return set(STYLE_COLOR_SCHEME, value.getValue());
+        }
+    }
+
+    /**
+     * Gets the <code>color-scheme</code> property.
+     *
+     * @return the color scheme value, or NORMAL if not set
+     */
+    default ColorScheme.Value getColorScheme() {
+        String value = get(STYLE_COLOR_SCHEME);
+        return ColorScheme.Value.fromString(value);
+    }
+
     /**
      * Sets the <code>filter</code> property.
      *

flow-server/src/test/java/com/vaadin/flow/component/HasStyleTest.java

@@ -22,6 +22,8 @@
 import org.junit.Assert;
 import org.junit.Test;
 
+import com.vaadin.flow.component.page.ColorScheme;
+
 public class HasStyleTest {
 
     @Tag("div")
@@ -212,17 +214,98 @@
     }
 
     @Test(expected = IllegalArgumentException.class)
     public void removeClassNames_removeEmptyClassName_throws() {
         HasStyleComponent component = new HasStyleComponent();
         component.addClassNames(" ");
     }
 
     @Test(expected = IllegalArgumentException.class)
     public void removeClassNames_removeNullClassName_throws() {
         HasStyleComponent component = new HasStyleComponent();
         component.addClassNames(null, null);
     }
 
+    @Test
+    public void setColorScheme_setsInlineStyleProperty() {
+        HasStyleComponent component = new HasStyleComponent();
+
+        component.getStyle().setColorScheme(ColorScheme.Value.DARK);
+        Assert.assertEquals("dark",
+                component.getElement().getStyle().get("color-scheme"));
+
+        component.getStyle().setColorScheme(ColorScheme.Value.LIGHT);
+        Assert.assertEquals("light",
+                component.getElement().getStyle().get("color-scheme"));
+
+        component.getStyle().setColorScheme(ColorScheme.Value.LIGHT_DARK);
+        Assert.assertEquals("light dark",
+                component.getElement().getStyle().get("color-scheme"));
+    }
+
+    @Test
+    public void getColorScheme_retrievesSetValue() {
+        HasStyleComponent component = new HasStyleComponent();
+
+        component.getStyle().setColorScheme(ColorScheme.Value.DARK);
+        Assert.assertEquals(ColorScheme.Value.DARK,
+                component.getStyle().getColorScheme());
+
+        component.getStyle().setColorScheme(ColorScheme.Value.LIGHT);
+        Assert.assertEquals(ColorScheme.Value.LIGHT,
+                component.getStyle().getColorScheme());
+    }
+
+    @Test
+    public void setColorScheme_nullClearsProperty() {
+        HasStyleComponent component = new HasStyleComponent();
+
+        component.getStyle().setColorScheme(ColorScheme.Value.DARK);
+        Assert.assertEquals("dark",
+                component.getElement().getStyle().get("color-scheme"));
+
+        component.getStyle().setColorScheme(null);
+        Assert.assertNull(
+                component.getElement().getStyle().get("color-scheme"));
+        Assert.assertEquals(ColorScheme.Value.NORMAL,
+                component.getStyle().getColorScheme());
+    }
+
+    @Test
+    public void setColorScheme_normalClearsProperty() {
+        HasStyleComponent component = new HasStyleComponent();
+
+        component.getStyle().setColorScheme(ColorScheme.Value.DARK);
+        Assert.assertEquals("dark",
+                component.getElement().getStyle().get("color-scheme"));
+
+        component.getStyle().setColorScheme(ColorScheme.Value.NORMAL);
+        Assert.assertNull(
+                component.getElement().getStyle().get("color-scheme"));
+        Assert.assertEquals(ColorScheme.Value.NORMAL,
+                component.getStyle().getColorScheme());
+    }
+
+    @Test
+    public void colorScheme_roundtripWorks() {
+        HasStyleComponent component = new HasStyleComponent();
+
+        for (ColorScheme.Value value : ColorScheme.Value.values()) {
+            if (value == ColorScheme.Value.NORMAL) {
+                continue; // NORMAL clears the property
+            }
+            component.getStyle().setColorScheme(value);
+            Assert.assertEquals("Roundtrip failed for " + value, value,
+                    component.getStyle().getColorScheme());
+        }
+    }
+
+    @Test
+    public void getColorScheme_notSet_returnsNormal() {
+        HasStyleComponent component = new HasStyleComponent();
+        Assert.assertEquals(ColorScheme.Value.NORMAL,
+                component.getStyle().getColorScheme());
+    }
+
     private void assertClasses(HasStyleComponent c, String... expectedClasses) {
         Set<String> actual = c.getClassNames();
         Set<String> expected = new HashSet<>(Arrays.asList(expectedClasses));