Блог

Здравствуйте, я хочу применить темную тему при входе пользователя в 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);
}
 

Метод вызывается с помощью кнопки изменить тему.

Вы можете прочитать значение в onAttach методе. Вот полный пример класса, который использует cookie для хранения:

 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);
    }
}