根据用户登录选择vaadin flow lumo compact主题

Question

在Vaadin 23中存在Lumo紧凑主题。在示例/文档中https://vaadin.com/docs/latest/styling/lumo/variants/compact它展示了如何通过一些JS includes在主布局中激活它。

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

但不幸的是，这种情况发生在所有用户身上，我们无法让用户在紧凑模式和常规模式之间进行选择。

在小型笔记本电脑屏幕上工作时，紧凑模式会很好，而在大型桌面显示器上则是常规模式。

关于如何从iside切换到java代码，有什么想法吗？

Answer 1

您可以将紧凑模式样式表中的自定义属性定义复制粘贴到特定选择器下的主题中，然后可以从Java代码中切换。

例如：

frontend/themes/metheme/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");