时间戳

首页 > 解决方案 > 可切换 Vaadin 12 主题的最佳实践

vaadin - 可切换 Vaadin 12 主题的最佳实践

问题描述

我目前正在将 Vaadin 8 应用程序迁移到 Vaadin 12。外观应该由用户使用，并在登录时或通过按下按钮进行更改。

在我们的 Vaadin 8 应用程序中，我们有 2 个主题（一个深色和一个浅色），每个主题都有自己的 SASS/CSS 和一些共享属性。用户可以使用 setTheme() 方法进行切换。当点击切换按钮时，外观就发生了变化。在 Vaadin 12 中，Theming 采用了不同的方法，我正在努力寻找一种在 Vaadin 12 中实现此功能的好方法。

假设我们不想创建一个全新的主题，只想使用自定义的 LUMO。我可以通过@Theme Annotation 设置主题/变体。缺点：主题将在运行时固定。

我也可以编写一些代码来将变体应用于我的应用程序和组件。（如动态样式章节：https : //vaadin.com/docs/flow/element-api/tutorial-dynamic-styling.html ）缺点：遍历每个元素并应用变体。

我现在的问题：

在运行时实现主题之间切换的最佳方法是什么？（定制的 Lumo 或任何其他主题的明暗变体）。

我是否只需创建 2 个包含 CSS 的 HTML 文件（为了兼容性），然后通过动态导入以某种方式覆盖当前使用的文件？

我希望我的问题很清楚，有人可以指出我正确的方向。

标签： vaadinvaadin-flowvaadin12vaadin-themes

解决方案

如果您只对在light和dark之间切换感兴趣，那么您可以dark在 DOM 中非常高的位置添加/删除。例如，UI 的元素通常是body或至少非常高。

例如：

new Checkbox("Use Dark Theme").tap{
    addValueChangeListener{ cb ->
        getUI().ifPresent(){ ui ->
            def themeList = ui.getElement().getThemeList()
            if (cb.value) {
                themeList.add(Lumo.DARK)
            } else {
                themeList.remove(Lumo.DARK)
            }
        }
    }
}

编辑

正如另一个答案的评论中所问的那样：

要更改主题中的颜色，您可以覆盖使用的颜色。这是如何更改浅色和深色 Lumo 主题的文本颜色的示例：

html {
    --lumo-body-text-color: red;
}
[theme~="dark"] {
    --lumo-body-text-color: yellow;
}

推荐阅读