Vaadin应用主题切换后刷新恢复默认，如何实现全局持久化？

这个问题很常见——因为Vaadin应用刷新后会重新初始化UI，之前选择的主题没有被持久化，所以会回到默认值。我们需要把用户选择的主题保存下来，在页面加载时自动应用。下面分两种常用场景给出解决方案：

一、无需登录：用浏览器localStorage保存主题（简单快捷） #

这种方式适合不需要用户登录的应用，主题设置保存在用户本地浏览器中，换设备会失效，但实现简单。

1. 完善主题选择器的监听逻辑 #

修改你的ThemeSelectorComboBox中的init方法，在用户选择主题时，不仅切换主题，还把选择保存到localStorage：

private void init() {
    comboBox.setLabel(SELECT_THEME);
    comboBox.setItems(CustomTheme.values());
    comboBox.setItemLabelGenerator(CustomTheme::name); // 显示枚举名称，可自定义

    // 监听主题选择变化
    comboBox.addValueChangeListener(event -> {
        CustomTheme selectedTheme = event.getValue();
        if (selectedTheme != null) {
            String themeName = selectedTheme.getThemeName();
            // 切换当前UI的主题
            UI.getCurrent().getPage().setThemeName(themeName);
            // 保存到localStorage，用JS执行
            UI.getCurrent().getPage().executeJs("localStorage.setItem('selectedTheme', $0)", themeName);
        }
    });

    setCompositionRoot(comboBox);
}

假设你的CustomTheme枚举是这样的（确保themeName和Vaadin配置的主题名一致）：

public enum CustomTheme {
    LIGHT("light"),
    DARK("dark"),
    HIGH_CONTRAST("high-contrast");

    private final String themeName;

    CustomTheme(String themeName) {
        this.themeName = themeName;
    }

    public String getThemeName() {
        return themeName;
    }
}

2. 页面加载时读取并应用保存的主题 #

在应用的主UI或主视图初始化时（比如视图的onAttach方法），读取localStorage里的主题并设置：

@Override
protected void onAttach(AttachEvent attachEvent) {
    super.onAttach(attachEvent);
    // 读取localStorage中的主题
    attachEvent.getUI().getPage().executeJs("return localStorage.getItem('selectedTheme')")
            .then(String.class, savedTheme -> {
                if (savedTheme != null && !savedTheme.isEmpty()) {
                    // 应用保存的主题
                    attachEvent.getUI().getPage().setThemeName(savedTheme);
                    // 同步ComboBox的选中状态，让用户看到之前的选择
                    CustomTheme matchedTheme = Arrays.stream(CustomTheme.values())
                            .filter(theme -> theme.getThemeName().equals(savedTheme))
                            .findFirst()
                            .orElse(null);
                    if (matchedTheme != null) {
                        comboBox.setValue(matchedTheme);
                    }
                }
            });
}

二、需要登录：用会话/数据库持久化主题（跨页面/设备同步） #

如果你的应用需要用户登录，推荐把主题设置保存到用户会话或数据库中，这样用户换页面或重新登录时主题保持一致。

1. 保存到用户会话 #

修改主题选择的监听逻辑，把主题保存到Vaadin会话中：

comboBox.addValueChangeListener(event -> {
    CustomTheme selectedTheme = event.getValue();
    if (selectedTheme != null) {
        String themeName = selectedTheme.getThemeName();
        UI.getCurrent().getPage().setThemeName(themeName);
        // 保存到当前用户会话
        VaadinSession.getCurrent().setAttribute("selectedTheme", themeName);
    }
});

然后在UI初始化时读取会话中的主题：

@Override
protected void init(VaadinRequest request) {
    // 其他初始化代码...
    String savedTheme = (String) VaadinSession.getCurrent().getAttribute("selectedTheme");
    if (savedTheme != null) {
        UI.getCurrent().getPage().setThemeName(savedTheme);
        // 同步ComboBox选中值
        CustomTheme matchedTheme = Arrays.stream(CustomTheme.values())
                .filter(theme -> theme.getThemeName().equals(savedTheme))
                .findFirst()
                .orElse(null);
        if (matchedTheme != null) {
            comboBox.setValue(matchedTheme);
        }
    }
}

2. 持久化到数据库（可选） #

如果需要用户换设备也能保持主题，就把主题设置关联到用户账号，保存到数据库：

• 选择主题时，调用后端服务更新用户记录中的主题字段
• 用户登录后，从数据库读取用户的主题设置并应用

关键注意事项 #

• 确保CustomTheme的themeName和你Vaadin项目中配置的主题名称完全一致，否则主题切换会失效
• 同步ComboBox的选中状态很重要，否则用户刷新后看到的选择器还是默认值，体验不好
• 对于Vaadin 14+的版本，setThemeName()方法是通用的，低版本可能需要调整主题切换方式

内容的提问来源于stack exchange，提问作者Bartosz Kolej