0
# Themes & Styling
1

2
Theme configuration and styling APIs for customizing application appearance.
3

4
## Theme Configuration
5

6
```java { .api }
7
@Target(ElementType.TYPE)
8
@interface Theme {
9
    String value() default "";
10
    String variant() default "";
11
}
12

13
class Lumo {
14
    static final String DARK = "dark";
15
    static final String LIGHT = "light";
16
}
17
```
18

19
**Example:**
20

21
```java
22
@Theme(value = Lumo.class)
23
@PWA(name = "My App")
24
public class AppShell implements AppShellConfigurator {
25
}
26

27
// Dark theme
28
@Theme(value = Lumo.class, variant = Lumo.DARK)
29
public class AppShell implements AppShellConfigurator {
30
}
31
```
32

33
## Theme Variants
34

35
```java { .api }
36
enum ButtonVariant implements ThemeVariant {
37
    LUMO_PRIMARY, LUMO_SECONDARY, LUMO_TERTIARY,
38
    LUMO_SUCCESS, LUMO_ERROR, LUMO_CONTRAST,
39
    LUMO_SMALL, LUMO_LARGE, LUMO_ICON
40
}
41

42
enum GridVariant implements ThemeVariant {
43
    LUMO_NO_BORDER, LUMO_NO_ROW_BORDERS,
44
    LUMO_ROW_STRIPES, LUMO_COMPACT, LUMO_WRAP_CELL_CONTENT
45
}
46

47
interface HasTheme {
48
    void addThemeVariants(ThemeVariant... variants);
49
    void removeThemeVariants(ThemeVariant... variants);
50
}
51
```
52

53
**Examples:**
54

55
```java
56
Button primary = new Button("Primary");
57
primary.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_LARGE);
58

59
Button danger = new Button("Delete");
60
danger.addThemeVariants(ButtonVariant.LUMO_ERROR, ButtonVariant.LUMO_PRIMARY);
61

62
Grid<Person> grid = new Grid<>();
63
grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES, GridVariant.LUMO_COMPACT);
64
```
65

66
## Styling
67

68
```java { .api }
69
interface HasStyle {
70
    void addClassName(String className);
71
    void addClassNames(String... classNames);
72
    void removeClassName(String className);
73
    void setClassName(String className);
74
    void setClassName(String className, boolean set);
75
    Style getStyle();
76
    boolean hasClassName(String className);
77
}
78

79
interface Style {
80
    Style set(String name, String value);
81
    Style remove(String name);
82
    String get(String name);
83
}
84

85
@Target(ElementType.TYPE)
86
@interface CssImport {
87
    String value();
88
    String themeFor() default "";
89
    String include() default "";
90
}
91
```
92

93
**Examples:**
94

95
```java
96
// CSS classes
97
Div container = new Div();
98
container.addClassName("my-container");
99
container.addClassNames("highlighted", "active");
100

101
// Inline styles
102
Div box = new Div();
103
box.getStyle()
104
    .set("background-color", "#f0f0f0")
105
    .set("padding", "20px")
106
    .set("border-radius", "8px");
107

108
// Conditional styling
109
button.setClassName("active", isActive);
110

111
// Custom CSS import
112
@Route("styled")
113
@CssImport("./styles/custom.css")
114
public class StyledView extends VerticalLayout {
115
}
116

117
// Scoped CSS
118
@CssImport(value = "./styles/grid.css", themeFor = "vaadin-grid")
119
public class GridView extends VerticalLayout {
120
}
121
```
122

123
## Lumo Utilities
124

125
```java { .api }
126
class LumoUtility {
127
    interface Spacing {
128
        String PADDING_SMALL = "padding-s";
129
        String PADDING = "padding";
130
        String PADDING_LARGE = "padding-l";
131
        String MARGIN_SMALL = "margin-s";
132
        String MARGIN = "margin";
133
        String MARGIN_LARGE = "margin-l";
134
    }
135

136
    interface Typography {
137
        String TEXT_SMALL = "text-s";
138
        String TEXT_MEDIUM = "text-m";
139
        String TEXT_LARGE = "text-l";
140
        String FONT_WEIGHT_BOLD = "font-weight-bold";
141
    }
142

143
    interface TextColor {
144
        String PRIMARY = "text-primary";
145
        String SECONDARY = "text-secondary";
146
        String SUCCESS = "text-success";
147
        String ERROR = "text-error";
148
    }
149

150
    interface Background {
151
        String BASE = "bg-base";
152
        String CONTRAST = "bg-contrast";
153
        String PRIMARY = "bg-primary";
154
        String SUCCESS = "bg-success";
155
        String ERROR = "bg-error";
156
    }
157
}
158
```
159

160
**Example:**
161

162
```java
163
VerticalLayout layout = new VerticalLayout();
164
layout.addClassName(LumoUtility.Spacing.PADDING_LARGE);
165

166
H1 title = new H1("Welcome");
167
title.addClassName(LumoUtility.TextColor.PRIMARY);
168
title.addClassName(LumoUtility.Typography.FONT_WEIGHT_BOLD);
169
```
170

171
## Dynamic Theme Switching
172

173
```java
174
UI.getCurrent().getElement().executeJs(
175
    "document.documentElement.setAttribute('theme', $0)",
176
    darkMode ? Lumo.DARK : Lumo.LIGHT
177
);
178
```
179