Docs

Docs

Styling Views & Layouts with CSS

How to add CSS styles to views and Lit components in Hilla applications.

CSS Theme Folder

You can style components that extend View and Layout by placing CSS files in the frontend/themes/<app-name>/ folder and importing them in styles.css using import(). Styles defined in the theme directory are available across the application. You can also import styles from node_modules, like line-awesome in the following example:

Source code
frontend/themes/<app-name>/styles.css
@import "line-awesome/dist/line-awesome/css/line-awesome.min.css";

@import "./main-layout.css";
@import "./views/example-view.css";

Using CSS Variables

Hilla apps typically use either the Lumo or Aura theme as a base for component and application styling. Both themes are based on a set of CSS custom properties that you can use to achieve a consistent look and feel across applications.

You can use these properties in place of hard-coded units using var().

Source code
CSS
.card {
  border: 1px solid var(--lumo-contrast-30pct);
  border-radius: var(--lumo-border-radius-s);
  box-shadow: var(--lumo-box-shadow-s);
}

The Styling section provides more information about styling Vaadin applications.

Updated –