-
Notifications
You must be signed in to change notification settings - Fork 44
Vaadin 14 | Styling
appreciated edited this page Nov 7, 2019
·
6 revisions
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).
... See theme example
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 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) |