Vaadin 14 | Styling - appreciated/vaadin-app-layout GitHub Wiki
There are in general two ways to style Vaadin Components. The easier one is using CSS variables the other is to use the vaadin-themable-mixin (which is not yet supported).
Styling using vaadin-themable-mixin
... See theme example
CSS Variable Usage
The usage of the Css Variable is straightforward, create a CSS file in your Project and import it by using the @CssImport annotation in your AppLayoutRouterLayout implementation.
Note that you are not able to style the Components directly due to the nature of shadow DOM this can only be done using vaadin-themable-mixin.
Css Varaibles
| Css Variable | Default value | Description |
|---|---|---|
| --app-layout-primary-color | var(--lumo-primary-color) | primary color used as the accent color by many components |
| --app-layout-background | var(--lumo-base-color) | background color of the content view |
| --app-layout-font-size-header | var(--lumo-font-size-m) | |
| --app-layout-font-size-menu | var(--lumo-font-size-m) | |
| --app-layout-font-size-notifications | var(--lumo-font-size-m) | |
| --app-layout-bar-height | calc(var(--lumo-size-s) * 2.1) | |
| --app-layout-bar-background-base-color | var(--lumo-base-color) | |
| --app-layout-bar-background-color | var(--lumo-base-color) | |
| --app-layout-bar-font-color | var(--lumo-contrast-70pct) | |
| --app-layout-bar-shadow | var(--lumo-box-shadow-s) | |
| --app-layout-bar-z-index | 10 | |
| --app-layout-drawer-shadow | var(--lumo-box-shadow-s) | |
| --app-layout-drawer-background-base-color | var(--lumo-base-color) | |
| --app-layout-drawer-background-color | var(--lumo-base-color) | |
| --app-layout-drawer-submenu-background-color | var(--lumo-contrast-10pct) | |
| --app-layout-drawer-font-color | var(--lumo-contrast-90pct) | |
| --app-layout-drawer-width | calc(var(--lumo-size-xl) * 4.6) | |
| --app-layout-drawer-small-width | calc(var(--app-layout-bar-height) - 1px) | |
| --app-layout-menu-button-height | calc(var(--lumo-size-s) * 1.6) | |
| --app-layout-menu-button-padding | 0 14px | |
| --app-layout-menu-button-margin | 0 | |
| --app-layout-menu-padding | 5px | |
| --app-layout-menu-button-border-radius | var(--lumo-border-radius) | |
| --app-layout-menu-submenu-max-height | 999px | |
| --app-bar-height | var(--app-layout-bar-height) | |
| --app-menu-background-color | var(--lumo-base-color) | |
| --app-menu-selected-bg-color | var(--lumo-primary-color-10pct) | |
| --app-menu-color | var(--lumo-secondary-text-color) | |
| --app-layout-badge-width | calc(var(--lumo-size-s) * 0.8) | |
| --app-layout-badge-height | calc(var(--lumo-size-s) * 0.8) | |
| --app-layout-badge-top | 0px | |
| --app-layout-badge-right | 0px | |
| --app-layout-badge-color | var(--app-layout-bar-font-color) | |
| --app-layout-badge-small-width | 5px | |
| --app-layout-badge-small-height | 5px | |
| --app-layout-badge-small-top | -12px | |
| --app-layout-badge-small-right | -4px | |
| --app-layout-badge-background | var(--lumo-primary-color) | |
| --app-layout-badge-font-color | var(--lumo-primary-contrast-color) | |
| --app-layout-notification-highlight-color | var(--app-layout-primary-color) | |
| --app-layout-notification-font-color | var(--lumo-body-text-color) | |
| --app-layout-notification-background-base-color | var(--lumo-base-color) | |
| --app-layout-notification-background-color | var(--lumo-base-color) | |
| --app-layout-notification-shadow | var(--lumo-box-shadow-s) |