Vaadin：动态更改 CSS 变量答案

【问题标题】：Vaadin: change CSS variables dynamicallyVaadin：动态更改 CSS 变量
【发布时间】：2021-05-14 09:57:57
【问题描述】：

有没有办法动态改变 lumo 原色：

html {
  --lumo-primary-text-color: hsl(214, 35%, 15%);
  --lumo-primary-color-50pct: rgba(140, 236, 0, 0.5);
  --lumo-primary-color-10pct: rgba(140, 236, 0, 0.1);
  --lumo-primary-color: #8CEC00;
  --lumo-primary-contrast-color: hsl(214, 35%, 15%);
}

提前致谢！

最好的问候，托马斯

【问题讨论】：

嗨！这可能对您有用：demo.vaadin.com/lumo-editor
您好！我使用主题编辑器来获取我的颜色。但是如何在应用程序中实时更改呢？
@Thomas 所以你的意思是你想在运行时以编程方式改变它们？比如让用户改变一些颜色？如果是这样，你想用 Java 来做吗？
塔瑞克您好！是的，我想在运行时更改颜色。

标签： vaadin vaadin-flow

【解决方案1】：

CSS 变量可以像这样从 Java 中动态更新

UI.getCurrent().getElement().getStyle().set("--lumo-primary-text-color", "hsl(214, 35%, 15%)")

这将更新整个 UI 的变量值。如果您只想更改特定组件（及其子组件）的变量，则可以仅在该组件上调用 getElement().getStyle().set()。

【讨论】：

哇，这么简单！谢谢你:)