保留深色主题设置并在 vaadin 14 中应用

Question

您好，我想在 Vaadin 14 的用户登录时应用深色主题。但是当我以编程方式调用切换功能时它不起作用。我正在关注这个例子：

https://vaadin.com/learn/tutorials/toggle-dark-theme

设置已经保留，但如何应用主题设置？它仅在触发器来自请求线程时才起作用。这是我的代码：

/**
 * Changes the theme from dark to light and vice versa
 */
private static void toogleTheme() {
    boolean darkThemeEnabled = ConfigManager.isLightThemeEnabled();
    ThemeList themeList = UI.getCurrent().getElement().getThemeList(); //
    if (themeList.contains(Lumo.DARK)) { //
        themeList.remove(Lumo.DARK);
        themeList.add(Lumo.LIGHT);
    } else {
        themeList.remove(Lumo.LIGHT);
        themeList.add(Lumo.DARK);
    }
    ConfigManager.setLightThemeEnabled(!darkThemeEnabled);
}

从更改主题按钮调用该方法。

Answer 1

您可以在onAttach方法中读取值。这是一个使用 cookie 进行存储的完整示例 class：

public class HelloWorldView extends HorizontalLayout {
    
    private static final String LIGHTMODE = "lightmode";

    private Button toggleTheme;
    
    public HelloWorldView() {
        setMargin(true);
        toggleTheme = new Button("Toggle theme between light and dark");
        add(toggleTheme);
        toggleTheme.addClickListener(e -> {
            toggleTheme();
        });
    }

    private void setThemeFromCookie() {
        ThemeList themeList = UI.getCurrent().getElement().getThemeList();
        if (isLightThemeOn()) {
            if (themeList.contains(Lumo.DARK)) {
                themeList.remove(Lumo.DARK);
            }
            themeList.add(Lumo.LIGHT);
        } else {
            if (themeList.contains(Lumo.LIGHT)) {
                themeList.remove(Lumo.LIGHT);
            }
            themeList.add(Lumo.DARK);
        }
    }

    private void toggleTheme() {
        boolean saveLightTheme = true;
        ThemeList themeList = UI.getCurrent().getElement().getThemeList();
        if (themeList.contains(Lumo.DARK)) {
            themeList.remove(Lumo.DARK);
            themeList.add(Lumo.LIGHT);
        } else {
            themeList.remove(Lumo.LIGHT);
            themeList.add(Lumo.DARK);
            saveLightTheme = false;
        }
        setLightThemeInCookie(saveLightTheme);
    }


    private void setLightThemeInCookie(boolean b) {
        Cookie myCookie = new Cookie(LIGHTMODE, b ? "true" : "false");
        // Make cookie expire in 2 minutes
        myCookie.setMaxAge(120);
        myCookie.setPath(VaadinService.getCurrentRequest().getContextPath());
        VaadinService.getCurrentResponse().addCookie(myCookie);
    }

    private String getLightModeCookieValue() {
        for (Cookie c : VaadinService.getCurrentRequest().getCookies()) {
            if ("lightmode".equals(c.getName())) {
                String value = c.getValue();
                return value;
            }
        }
        return null;
    }

    private boolean isLightThemeOn() {
        String value = getLightModeCookieValue();
        if (value == null) {
            setLightThemeInCookie(true);
            return true;
        }
        return "true".equals(value);
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        setThemeFromCookie();
        super.onAttach(attachEvent);
    }
}

保留深色主题设置并在 vaadin 14 中应用

Persist dark theme setting and apply in vaadin 14

java

themes

vaadin14