gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 15:02:14 25 4
gpt4 key购买 nike

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

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

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

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

我现在的问题:

在运行时实现主题之间切换的最佳方法是什么?(Lumo 或任何其他主题的自定义明暗变体)。

我是否会创建 2 个包含 CSS 的 HTML 文件(为了兼容性),然后通过动态导入以某种方式覆盖当前使用的文件?

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

最佳答案

如果你只对在 lightdark 之间切换感兴趣,那么你可以在一个非常高的地方添加/删除 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;
}

关于vaadin - 可切换 Vaadin 12 主题的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54530464/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com