diff --git a/articles/styling/_images/aura-theme-customized.png b/articles/styling/_images/aura-theme-customized.png new file mode 100644 index 0000000000..4c699f26a9 Binary files /dev/null and b/articles/styling/_images/aura-theme-customized.png differ diff --git a/articles/styling/_images/lumo-theme-customized.png b/articles/styling/_images/lumo-theme-customized.png new file mode 100644 index 0000000000..2e5cc9b3e2 Binary files /dev/null and b/articles/styling/_images/lumo-theme-customized.png differ diff --git a/articles/styling/themes.adoc b/articles/styling/themes.adoc new file mode 100644 index 0000000000..85fb6a1568 --- /dev/null +++ b/articles/styling/themes.adoc @@ -0,0 +1,140 @@ +--- +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 by adding the `theme="dark"` attribute to the generated `index.html` file, or use `theme="light-dark"` to let the OS or browser settings determine which is used: + +[source,html] +---- + + + + ... + +---- + +// 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-color-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] +---- + + + + ... + +---- + +// 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.