Skip to content

Commit ba9ce46

Browse files
committed
feat: add component-level ColorScheme support via Style interface
Adds setColorScheme() and getColorScheme() methods to the Style interface, allowing developers to set the CSS color-scheme property on individual components. This complements the page-level ColorScheme API. The implementation follows existing Style interface patterns for CSS properties and uses the same ColorScheme.Value enum for type safety. Changes: - Added STYLE_COLOR_SCHEME constant to ElementConstants - Added setColorScheme(ColorScheme.Value) to Style interface - Added getColorScheme() to Style interface - Added comprehensive unit tests in HasStyleTest Usage example: component.getStyle().setColorScheme(ColorScheme.Value.DARK);
1 parent 49d4ef8 commit ba9ce46

File tree

3 files changed

+117
-0
lines changed

3 files changed

+117
-0
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,10 @@ public class ElementConstants {
111111
* The style property for cursor.
112112
*/
113113
public static final String STYLE_CURSOR = "cursor";
114+
/**
115+
* The style property for color-scheme.
116+
*/
117+
public static final String STYLE_COLOR_SCHEME = "color-scheme";
114118
/**
115119
* The style property for display.
116120
*/

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
import java.io.Serializable;
1919
import java.util.stream.Stream;
2020

21+
import com.vaadin.flow.component.page.ColorScheme;
22+
2123
import static com.vaadin.flow.dom.ElementConstants.STYLE_ALIGN_ITEMS;
2224
import static com.vaadin.flow.dom.ElementConstants.STYLE_ALIGN_SELF;
2325
import static com.vaadin.flow.dom.ElementConstants.STYLE_BACKGROUND;
@@ -35,6 +37,7 @@
3537
import static com.vaadin.flow.dom.ElementConstants.STYLE_BOX_SIZING;
3638
import static com.vaadin.flow.dom.ElementConstants.STYLE_CLEAR;
3739
import static com.vaadin.flow.dom.ElementConstants.STYLE_COLOR;
40+
import static com.vaadin.flow.dom.ElementConstants.STYLE_COLOR_SCHEME;
3841
import static com.vaadin.flow.dom.ElementConstants.STYLE_CURSOR;
3942
import static com.vaadin.flow.dom.ElementConstants.STYLE_DISPLAY;
4043
import static com.vaadin.flow.dom.ElementConstants.STYLE_FILTER;
@@ -357,6 +360,35 @@ default Style setColor(String value) {
357360
return set(STYLE_COLOR, value);
358361
}
359362

363+
/**
364+
* Sets the <code>color-scheme</code> property.
365+
* <p>
366+
* The color scheme affects how the browser renders UI elements and allows
367+
* the component to adapt to system color scheme preferences.
368+
*
369+
* @param value
370+
* the color scheme value (if <code>null</code> or NORMAL, the
371+
* property will be removed)
372+
* @return this style instance
373+
*/
374+
default Style setColorScheme(ColorScheme.Value value) {
375+
if (value == null || value == ColorScheme.Value.NORMAL) {
376+
return remove(STYLE_COLOR_SCHEME);
377+
} else {
378+
return set(STYLE_COLOR_SCHEME, value.getValue());
379+
}
380+
}
381+
382+
/**
383+
* Gets the <code>color-scheme</code> property.
384+
*
385+
* @return the color scheme value, or NORMAL if not set
386+
*/
387+
default ColorScheme.Value getColorScheme() {
388+
String value = get(STYLE_COLOR_SCHEME);
389+
return ColorScheme.Value.fromString(value);
390+
}
391+
360392
/**
361393
* Sets the <code>filter</code> property.
362394
*

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
import org.junit.Assert;
2323
import org.junit.Test;
2424

25+
import com.vaadin.flow.component.page.ColorScheme;
26+
2527
public class HasStyleTest {
2628

2729
@Tag("div")
@@ -223,6 +225,85 @@ public void removeClassNames_removeNullClassName_throws() {
223225
component.addClassNames(null, null);
224226
}
225227

228+
@Test
229+
public void setColorScheme_setsInlineStyleProperty() {
230+
HasStyleComponent component = new HasStyleComponent();
231+
232+
component.getStyle().setColorScheme(ColorScheme.Value.DARK);
233+
Assert.assertEquals("dark",
234+
component.getElement().getStyle().get("color-scheme"));
235+
236+
component.getStyle().setColorScheme(ColorScheme.Value.LIGHT);
237+
Assert.assertEquals("light",
238+
component.getElement().getStyle().get("color-scheme"));
239+
240+
component.getStyle().setColorScheme(ColorScheme.Value.LIGHT_DARK);
241+
Assert.assertEquals("light dark",
242+
component.getElement().getStyle().get("color-scheme"));
243+
}
244+
245+
@Test
246+
public void getColorScheme_retrievesSetValue() {
247+
HasStyleComponent component = new HasStyleComponent();
248+
249+
component.getStyle().setColorScheme(ColorScheme.Value.DARK);
250+
Assert.assertEquals(ColorScheme.Value.DARK,
251+
component.getStyle().getColorScheme());
252+
253+
component.getStyle().setColorScheme(ColorScheme.Value.LIGHT);
254+
Assert.assertEquals(ColorScheme.Value.LIGHT,
255+
component.getStyle().getColorScheme());
256+
}
257+
258+
@Test
259+
public void setColorScheme_nullClearsProperty() {
260+
HasStyleComponent component = new HasStyleComponent();
261+
262+
component.getStyle().setColorScheme(ColorScheme.Value.DARK);
263+
Assert.assertEquals("dark",
264+
component.getElement().getStyle().get("color-scheme"));
265+
266+
component.getStyle().setColorScheme(null);
267+
Assert.assertNull(component.getElement().getStyle().get("color-scheme"));
268+
Assert.assertEquals(ColorScheme.Value.NORMAL,
269+
component.getStyle().getColorScheme());
270+
}
271+
272+
@Test
273+
public void setColorScheme_normalClearsProperty() {
274+
HasStyleComponent component = new HasStyleComponent();
275+
276+
component.getStyle().setColorScheme(ColorScheme.Value.DARK);
277+
Assert.assertEquals("dark",
278+
component.getElement().getStyle().get("color-scheme"));
279+
280+
component.getStyle().setColorScheme(ColorScheme.Value.NORMAL);
281+
Assert.assertNull(component.getElement().getStyle().get("color-scheme"));
282+
Assert.assertEquals(ColorScheme.Value.NORMAL,
283+
component.getStyle().getColorScheme());
284+
}
285+
286+
@Test
287+
public void colorScheme_roundtripWorks() {
288+
HasStyleComponent component = new HasStyleComponent();
289+
290+
for (ColorScheme.Value value : ColorScheme.Value.values()) {
291+
if (value == ColorScheme.Value.NORMAL) {
292+
continue; // NORMAL clears the property
293+
}
294+
component.getStyle().setColorScheme(value);
295+
Assert.assertEquals("Roundtrip failed for " + value,
296+
value, component.getStyle().getColorScheme());
297+
}
298+
}
299+
300+
@Test
301+
public void getColorScheme_notSet_returnsNormal() {
302+
HasStyleComponent component = new HasStyleComponent();
303+
Assert.assertEquals(ColorScheme.Value.NORMAL,
304+
component.getStyle().getColorScheme());
305+
}
306+
226307
private void assertClasses(HasStyleComponent c, String... expectedClasses) {
227308
Set<String> actual = c.getClassNames();
228309
Set<String> expected = new HashSet<>(Arrays.asList(expectedClasses));

0 commit comments

Comments
 (0)