vaadin · sissbruecker · Nov 12, 2025 · Nov 12, 2025
diff --git a/articles/styling/_images/aura-theme-customized.png b/articles/styling/_images/aura-theme-customized.png
diff --git a/articles/styling/_images/lumo-theme-customized.png b/articles/styling/_images/lumo-theme-customized.png
diff --git a/articles/styling/themes.adoc b/articles/styling/themes.adoc
@@ -0,0 +1,144 @@
+---
+title: Themes and Base Styles
+page-title: Vaadin themes and base styles
+description: An overview of Vaadin themes and base styles.
+meta-description: Discover Vaadin's themes and base styles to enhance your application's appearance.
+order: 20
+---
+
+
+= Themes and Base Styles
+
+By default, Vaadin components are rendered with their minimalistic built-in styles. These are called the _base styles_ of the components.
+
+.Login form using base styles
+image::_images/base-styles.png[Login form using base styles, width=50%]
+
+== Aura Theme
+
+Aura is the official theme for Vaadin applications. It provides a modern, polished look and feel for all Vaadin components.
+
+.Login form using the Aura theme
+image::_images/aura-theme.png[[Login form using the Aura theme, width=50%]
+
+To load the Aura theme in your application, add it with a [classname]`@StyleSheet` annotation on your main application class, or a CSS `@import` rule at the top of your master stylesheet. The [classname]`Aura` class provides a constant for the path to the Aura stylesheet that can be used with the [classname]`@StyleSheet` annotation.
+
+[source,java]
+----
+/* Aura theme loaded with @StyleSheet annotation */
+@StyleSheet(Aura.STYLESHEET)
+@StyleSheet("styles.css")
+public class Application implements AppShellConfigurator {
+ ...
+}
+----
+
+[source,css]
+----
+/* src/resources/META-INF/resources/styles.css */
+
+/* Aura theme loaded with @import rule in a stylesheet */
+@import "aura/aura.css";
+
+/* your CSS goes here */
+
+----
+
+Note that themes should always be loaded _before_ any other styles in your application.
+
+Aura is available in a light and dark variant. The light variant is the default. You can switch to the dark variant statically, or let the OS or browser settings determine which is used:
+
+[source,css]
+----
+/* src/resources/META-INF/resources/styles.css */
+
+html {
+  /* Sets the dark variant */
+  --aura-color-scheme: dark;
+
+  /* Uses the color scheme defined by the OS/browser */
+  --aura-color-scheme: light dark;
+}
+----
+
+// TODO: Link "Aura style property reference" when available
+Aura includes a comprehensive set of style properties (custom CSS properties) that can be used to customize it without writing complicated CSS selectors. See the Aura style property reference for a complete list.
+
+.Login form using customized Aura theme
+image::_images/aura-theme-customized.png[[Login form using customized Aura theme, width=50%]
+
+[source,css]
+----
+html {
+  --aura-background-light: #e3ffe8;
+  --aura-font-family: Verdana;
+  --aura-base-font-size: 16;
+  --aura-base-radius: 10;
+}
+
+vaadin-button {
+  --aura-accent-color: #42C556;
+}
+----
+
+== Lumo Theme
+
+Lumo is the original Vaadin theme.
+
+.Login form using the Lumo theme
+image::_images/lumo-theme.png[Login form using the Lumo theme, width=50%]
+
+To load the Lumo theme in your application, add it with a [classname]`@StyleSheet` annotation on your main application class, or a CSS `@import` rule at the top of your master stylesheet. The [classname]`Lumo` class provides a constant for the path to the Lumo stylesheet that can be used with the [classname]`@StyleSheet` annotation.
+
+[source,java]
+----
+/* Lumo theme loaded with @StyleSheet annotation */
+@StyleSheet(Lumo.STYLESHEET)
+@StyleSheet("styles.css")
+public class Application implements AppShellConfigurator {
+ ...
+}
+----
+
+[source,css]
+----
+/* src/resources/META-INF/resources/styles.css */
+
+/* Lumo theme loaded with @import rule in a stylesheet */
+@import "lumo/lumo.css";
+
+/* your CSS goes here */
+----
+
+Note that themes should always be loaded _before_ any other styles in your application.
+
+Lumo is available in a light and dark variant. The light variant is the default. You can switch to the dark variant statically by adding the `theme="dark"` attribute to the generated `index.html` file:
+
+[source,html]
+----
+<!-- src/main/frontend/index.html -->
+
+<html theme="dark">
+ ...
+</html>
+----
+
+// TODO: Link "Lumo style property reference" when available
+Lumo includes a comprehensive set of style properties (custom CSS properties) that can be used to customize it without writing complicated CSS selectors. See the Lumo style property reference for a complete list.
+
+.Login form using customized Lumo theme
+image::_images/lumo-theme-customized.png[Login form using customized Lumo theme, width=50%]
+
+[source,css]
+----
+html {
+  --lumo-primary-color: green;
+  --lumo-primary-text-color: green;
+  --lumo-font-family: Verdana;
+  --lumo-font-size-m: 14px;
+  --lumo-border-radius-m: 1em;
+}
+----
+
+// TODO: Link "Lumo Utility Classes" when available
+The Lumo Utility Classes, when enabled, can be used together with the Lumo theme.