Select vaadin flow lumo compact theme based on user logged in?

Question

in Vaadin 23 there exists the Lumo compact theme. In the examples/documentation https://vaadin.com/docs/latest/styling/lumo/variants/compact it's shown how to activate this in the main layout via some JS includes.

@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js") 
public class Foo { 
}

But unfortunally this happens for all user, and we are not able to provide the users to choose between compact and regular mode.

Compact mode would be great when working on small laptop screens and the regular one for large desktop displays.

Any ideas on how to switch from iside the java code?

Answer 1

You could copy-paste the custom property definitions from the compact mode style sheet into your theme, under a specific selector, which you can then toggle from your Java code.

For example:

frontend/themes/mytheme/styles.css:

.compact-theme {
      --lumo-size-xl: 3rem;
      --lumo-size-l: 2.5rem;
      --lumo-size-m: 2rem;
      --lumo-size-s: 1.75rem;
      --lumo-size-xs: 1.5rem;
      --lumo-font-size: 1rem;
      --lumo-font-size-xxxl: 1.75rem;
      --lumo-font-size-xxl: 1.375rem;
      --lumo-font-size-xl: 1.125rem;
      --lumo-font-size-l: 1rem;
      --lumo-font-size-m: 0.875rem;
      --lumo-font-size-s: 0.8125rem;
      --lumo-font-size-xs: 0.75rem;
      --lumo-font-size-xxs: 0.6875rem;
      --lumo-line-height-m: 1.4;
      --lumo-line-height-s: 1.2;
      --lumo-line-height-xs: 1.1;
      --lumo-space-xl: 1.875rem;
      --lumo-space-l: 1.25rem;
      --lumo-space-m: 0.625rem;
      --lumo-space-s: 0.3125rem;
      --lumo-space-xs: 0.1875rem;
}

UI.getCurrent().getComponent().getClassList().add("compact-theme");