Vaadin中的大量Lumo变量列表
我想为我的 Vaadin 20 应用程序做自定义主题变体。为此，我将为可用的 Lumo CSS 变量提供自定义值，例如--lumo-base-color和--lumo-primary-color。问题是我找不到可用变量的广泛列表。
我的问题是：
- 我在哪里可以找到所有可主题化的变量的列表？
- 是否有一个很好的主题示例，其中设置了很多这些变量，我可以将其用作示例？
回答
这是一个很好的问题，因为通过重新定义 Lumo CSS 变量的值来开始高级定制应用程序通常是最佳实践。
以 ComboBox 下拉按钮、文本字段清除图标、DatePicker 弹出按钮等元素为例，都使用变量--lumo-contrast-60pct。在共享的全局 css 中很容易定义它的值，并且新颜色将被所有组件一致使用。这是比为每个组件定义自定义 css 更好的方法。请参见下面的示例，其中原始石墨灰色已更改为蓝色。
- 在设计系统基础文档中，每个子部分都会列出可用的变量。
此外，如果您检查<html>浏览器开发工具中的元素，您也可以看到它们在那里列出。
- 在Lumo 主题编辑器演示中，您可以根据需要更改任意数量的样式。然后，您可以下载一个文件，其中列出了您更改的所有变量。
另一种选择是访问https://start.vaadin.com，您还可以在其中自定义主题的某些方面，下载的应用程序将包含这些定义。