Vaadin 24 Flow中如何通过选择器实现适配明暗模式的用户自定义动态CSS？

嘿，这个需求我之前也碰到过！要实现用户自定义背景色还自动适配明暗模式，其实可以结合CSS变量、媒体查询和Vaadin Flow的动态样式操作来搞定，给你一步步拆解：

1. 先在全局样式里搭好明暗模式的切换框架 #

首先在你的styles.css里定义好基础的变量结构，利用CSS的媒体查询来区分明暗模式：

/* 全局样式文件 styles.css */
html {
  /* 亮色模式下的自定义背景变量，先给初始值后续会被动态覆盖 */
  --user-section-bg-light: #fc7c7c;
}

@media (prefers-color-scheme: dark) {
  html {
    /* 暗色模式下的自定义背景变量 */
    --user-section-bg-dark: #a83a3a;
  }
}

/* 把变量绑定到目标元素的样式上 */
.my-custom-section {
  background-color: var(--user-section-bg-light);
}

@media (prefers-color-scheme: dark) {
  .my-custom-section {
    background-color: var(--user-section-bg-dark);
  }
}

2. 在Vaadin组件里应用样式类 #

不管你用Div、VerticalLayout还是自定义组件，只要给目标元素加上我们定义的样式类即可：

// 创建自定义区块组件
Div userSection = new Div();
userSection.addClassName("my-custom-section");
// 将组件添加到页面
add(userSection);

3. 在Java代码里动态设置用户自定义颜色 #

这是核心步骤，当用户在界面上选择或输入颜色后，直接通过Vaadin Flow修改根元素的CSS变量值：

// 模拟获取用户输入的颜色值，实际项目替换为用户输入组件的取值
String userLightColor = "#ff9999"; // 用户选择的亮色模式背景色
String userDarkColor = "#7c2e2e"; // 用户选择的暗色模式背景色

// 获取当前UI根元素，动态更新CSS变量
UI.getCurrent().getElement().getStyle()
    .set("--user-section-bg-light", userLightColor)
    .set("--user-section-bg-dark", userDarkColor);

额外小技巧：针对单个组件单独设置 #

如果不想全局生效，只想给特定组件设置自定义颜色，可以直接给组件元素绑定专属变量：

Div singleSection = new Div();
singleSection.addClassName("my-custom-section");
// 给该组件单独设置明暗模式变量
singleSection.getElement().getStyle()
    .set("--user-section-bg-light", "#e6b8b8")
    .set("--user-section-bg-dark", "#5c1f1f");
add(singleSection);

对应的CSS可以调整为带 fallback 值的写法，避免变量未设置时没有默认样式：

.my-custom-section {
  background-color: var(--user-section-bg-light, #fc7c7c);
}

@media (prefers-color-scheme: dark) {
  .my-custom-section {
    background-color: var(--user-section-bg-dark, #a83a3a);
  }
}

这样一来，不管用户选择什么颜色，系统都会自动根据当前的明暗模式切换对应的背景色，完美适配你的需求~

备注：内容来源于stack exchange，提问作者Curtis Snowden