Vaadin中的大量Lumo变量列表

这是一个很好的问题，因为通过重新定义 Lumo CSS 变量的值来开始高级定制应用程序通常是最佳实践。

以 ComboBox 下拉按钮、文本字段清除图标、DatePicker 弹出按钮等元素为例，都使用变量--lumo-contrast-60pct。在共享的全局 css 中很容易定义它的值，并且新颜色将被所有组件一致使用。这是比为每个组件定义自定义 css 更好的方法。请参见下面的示例，其中原始石墨灰色已更改为蓝色。

1. 在设计系统基础文档中，每个子部分都会列出可用的变量。

此外，如果您检查浏览器开发工具中的元素，您也可以看到它们在那里列出。

2. 在Lumo 主题编辑器演示中，您可以根据需要更改任意数量的样式。然后，您可以下载一个文件，其中列出了您更改的所有变量。

另一种选择是访问https://start.vaadin.com，您还可以在其中自定义主题的某些方面，下载的应用程序将包含这些定义。