eriklumme

body[theme~="clean"] vaadin-app-layout::part(navbar)::before {
  background: var(--navbar-background);
}

eriklumme

body[theme~="my-theme-variant"] nav {
  background-color: blue;
}

eriklumme

private Component createDrawerContent(Tabs menu) {
  ...
  Image logo = new Image(
    getLogoSrc(ThemeUtil.getCurrentTheme()), "Dynamic Theme Demo logo");
  ThemeUtil.addThemeChangedListener(
    UI.getCurrent(), 
    e -> logo.setSrc(getLogoSrc(e.getThemeVariant()))
  );

  ...

eriklumme

public static void selectTheme(Theme theme) {
  ...
  ComponentUtil.fireEvent(ui, new ThemeVariantChangedEvent(ui, themeVariant));
}

eriklumme

public static Registration addThemeChangedListener(
      UI ui, ComponentEventListener<ThemeVariantChangedEvent> listener) {
  return ComponentUtil.addListener(ui, ThemeVariantChangedEvent.class, listener);
}

public static class ThemeVariantChangedEvent extends ComponentEvent<UI> {

  private final ThemeVariant themeVariant;

  public ThemeVariantChangedEvent(UI source, ThemeVariant themeVariant) {

eriklumme

:root {
  --datepicker-overlay-background-image:
      linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
}

body[theme~="clean"] {
  --datepicker-overlay-background-image: none;
}

eriklumme

:host {
  background-image: var(--datepicker-overlay-background-image);
}

eriklumme

body[theme~="clean"] vaadin-tab[selected]{
  background-color: rgba(0, 0, 0, 0);
}

body[theme~="clean"] .editor-layout {
    background: none;
}

body[theme~="clean"] vaadin-text-field, 
body[theme~="clean"] vaadin-date-picker {

eriklumme

body[theme~="carrot_inc"] {
  --yellow-carrot: #ffa84a;
  --orange-carrot: #d25700;

  --lumo-base-color: var(--yellow-carrot);
  --lumo-primary-color: var(--yellow-carrot);
  --lumo-primary-text-color: var(--orange-carrot);
}

body[theme~="carrot_inc"] [theme~="dark"] {

eriklumme

public class ThemeSelector extends Tabs {

  public ThemeSelector() {
    addSelectedChangeListener(e -> {
      // Don't fire when we call setSelectedTab(tab) in the for-loop below
      if (e.isFromClient()) {
        ThemeVariant themeVariant = ComponentUtil.getData(e.getSelectedTab(), ThemeVariant.class);
        ThemeUtil.selectThemeVariant(themeVariant);
      }
    });