Vaadin14设置Dialog暗黑主题后遮罩层不透明问题如何解决？

问题根因 #

Vaadin 14.7.x版本的Lumo主题存在已知适配缺陷：单独为Dialog组件设置theme="dark"属性时，仅Dialog本体应用了深色主题样式，其关联的模态遮罩层（backdrop）没有同步继承深色主题的样式变量，会沿用浅色主题下的不透明配色，最终表现为纯色遮挡下层页面内容。

解决方案 #

方案1：样式覆盖适配（适用于仅部分Dialog需要深色主题的场景） #

在全局自定义CSS中添加适配规则，直接指定带深色主题的Dialog遮罩层样式：

/* 适配带dark主题的Dialog模态遮罩 */
vaadin-dialog-overlay[theme~="dark"]::part(backdrop) {
  background-color: var(--lumo-shade-60pct);
  opacity: 0.6;
}

你可以根据视觉需求调整opacity透明度参数，实现和浅色主题一致的半透明透视效果。

方案2：全局统一切换深色主题（适用于全应用切换深色主题的场景） #

不要单独为Dialog设置深色主题，直接给当前UI全局配置深色主题，所有组件包括Dialog的遮罩层都会自动继承深色主题变量，无需额外适配：

UI.getCurrent().getElement().setAttribute("theme", Lumo.DARK);

方案3：版本升级（最彻底的解决方式） #

该缺陷已经在Vaadin 14.8及更高的LTS版本中修复，你可以直接将Vaadin版本升级到14.8.x最新稳定版，无需修改代码即可解决该问题。

内容的提问来源于stack exchange，提问作者Miłosz Bąbliński