CSS Loading Order
A theme is the recommended way to organize styles in a Vaadin application.
However, the other ways to import styles, namely the @CSSImport
and @StyleSheet
annotations, are still supported.
Styles applied with different approaches have different loading orders.
That is, their priorities are computed in the browser and possibly override each other.
To keep the application theming and styles consistent and well formed, it’s important to consider the loading order of the following CSS sources:
-
The
Lumo
theme -
Application-specific bundled CSS added with a `@CssImport', as described in Importing Bundled Style Sheets (if used)
-
Styles added on the Java side via
Page::addStylesheet()
(if used) -
Application-specific unbundled CSS added with
@StyleSheet
, as described in Importing External Style Sheets (if used) -
Parent theme (if used)
-
Current theme
Note
|
The Lumo theme isn’t loaded and applied if another theme class is provided (for example, @Theme(themeClass = MyCustomTheme.class) ), or if @NoTheme is found.
|
The parent theme is an existing theme whose styles and variables the current theme inherits.
The "current theme" is the theme used in your application.
It can be a theme created locally or packaged as a JAR
dependency.
See Creating a Custom Theme for more information.
Styles with a higher loading order have a higher precedence.
For example, the following style, if placed in global.css
within the theme folder frontend/themes/my-theme
, overrides the default Lumo
font size 1rem
with 0.875rem
:
html {
--lumo-font-size-m: 0.875rem;
}
Warning
|
By default, a loading indicator is shown at the top of the viewport after a delay.
If a theme modifies the loading indicator style, the new style is applied in the middle of the loading progress.
To avoid this, the style for the loading indicator should be defined in frontend/index.html explicitly using the .v-loading-indicator CSS selector.
|
150CF4BB-648C-40E8-B631-0152059D95C8