可切换 Vaadin 12 主题的最佳实践答案

【问题标题】：Best practice for switchable Vaadin 12 themes可切换 Vaadin 12 主题的最佳实践
【发布时间】：2019-06-29 00:56:14
【问题描述】：

我目前正在将 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 文件（出于兼容性考虑），然后通过动态导入以某种方式覆盖当前使用的文件？

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

【问题讨论】：

仅供参考，在带有现代 Web 浏览器和四行 JavaScript 的 Vaadin 14 中，您的 Web 应用程序可以在 Light Mode 和 Dark Mode 之间即时自动切换以匹配您的在主机操作系统中设置的用户首选项。请参阅问题上的this Answer by Marcus Hellberg Vaadin Flow app switch between light and dark modes automatically。
另请参阅 Marcus Hellberg 在 Vaadin.com 上的帖子，Toggle dark Lumo theme variant dynamically。

标签： vaadin vaadin-flow vaadin12 vaadin-themes

【解决方案1】：

在同一主题的两个不同变体之间切换相对容易，例如Lumo 的深色和浅色变体。为此，您只需在<html> 元素上切换相应的theme 属性。无法从服务器直接访问该元素，但您可以使用 JavaScript 的小 sn-p 来完成：ui.getPage().executeJavaScript("document.documentElement.setAttribute($0, $1)", "theme", "dark");

根据具体情况，您可以或必须将更改应用到 <body> 元素。在这种情况下，您可以在 JS sn-p 中将 .documentElement 切换为 .body，或者在 Java 中直接使用 ui.getElement().setAttribute("theme", "dark")。

在两个不同的基本主题之间切换，例如Lumo vs Material 是一件复杂得多的事情。对于每个组件，只能在浏览器中同时加载一个基本主题，重新加载页面是摆脱已加载主题的唯一方法。对于用于 Flow 的每个组件，除了没有任何样式的基本导入之外，框架还负责加载正确的主题导入。更复杂的是，使用@Theme 指定的主题会自动包含在应用程序的生产包中。为了能够使用多个基本主题，您还必须以某种方式生成多个不同的包，并以某种方式配置 Flow 以根据情况使用正确的包。

【讨论】：

谢谢你。假设我现在要自定义外观。如果我只使用主题的一个变体（假设是浅色版本）并且我想要不同的字体颜色或背景颜色，我只需创建一个 HTML/CSS 文件并覆盖它。但是假设我想改变两个变体的外观：在“浅色”中使用红色字体颜色，在“深色”中使用绿色字体颜色（仅作为示例）。我将如何管理？我需要两个 CSS 文件并切换它们吗？或者有没有办法仅在使用特定变体时应用样式？这对我来说是最不清楚的一点。
一句话：Lumo的明暗变体定制最实用的方法是什么？
@Loahrs 我已将其添加到我的答案中。然而，与其将其放在评论中，不如在另一个问题中提出这个问题？

【解决方案2】：

如果您只对在 light 和 dark 之间切换感兴趣，那么您可以在 DOM 中非常高的位置添加/删除 dark。例如。 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)
            }
        }
    }
}

编辑

正如在另一个答案的 cmets 中所问的那样：

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

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

【讨论】：

太好了，这正是我想要的！谢谢！无法从 vaadin 文档中找到该信息，但我确信必须有一些这样的符号才能轻松实现。