feat: add support for dynamic theme in iframes

src/main/java/com/flowingcode/vaadin/addons/demo/DynamicTheme.java

@@ -224,10 +224,19 @@ public void apply(HasElement component) {
     assertFeatureInitialized();
 
     VaadinSession.getCurrent().setAttribute(DynamicTheme.class, this);
+
+    String document;
+    if (component.getElement().getTag().equalsIgnoreCase("iframe")) {
+      document = "this.contentWindow.document";
+    } else {
+      document = "document";
+    }
+
     component.getElement().executeJs("""
+        const _document = %s;
         const applyTheme = () => {
           ["lumo/lumo.css", "aura/aura.css"].forEach(href=> {
-            let link = document.querySelector(`link[href='${href}']`);
+            let link = _document.querySelector(`link[href='${href}']`);
             if (!link) return;
             if (href === $0) {
                if (link.rel === 'preload') link.rel = 'stylesheet';
@@ -238,12 +247,12 @@ public void apply(HasElement component) {
           });
         };
 
-        if (document.startViewTransition) {
-          document.startViewTransition(applyTheme);
+        if (_document.startViewTransition) {
+          _document.startViewTransition(applyTheme);
         } else {
           applyTheme();
         }
-        """, href);
+        """.formatted(document), href);
   }
 
 }

src/main/java/com/flowingcode/vaadin/addons/demo/TabbedDemo.java

@@ -139,7 +139,10 @@ public TabbedDemo() {
       themeSelect.setItems(DynamicTheme.values());
       themeSelect.setValue(DynamicTheme.getCurrent());
       themeSelect.setWidth("85px");
-      themeSelect.addValueChangeListener(ev -> ev.getValue().apply(this));
+      themeSelect.addValueChangeListener(ev -> {
+        ev.getValue().apply(this);
+        observeThemeChange(this);
+      });
       footer.add(themeSelect);
     }
 
@@ -466,8 +469,19 @@ public static void setColorScheme(Component component, @NonNull ColorScheme colo
     element.executeJs(script, theme);
 
     collectThemeChangeObservers(component).forEach(observer -> observer.onThemeChange(theme));
+    observeThemeChange(component);
   }
 
+  private static void observeThemeChange(Component source) {
+    DynamicTheme dynamicTheme = null;
+    if (DynamicTheme.isFeatureSupported()) {
+      dynamicTheme = DynamicTheme.getCurrent();
+    }
+    ThemeChangeEvent event = new ThemeChangeEvent(source, false, getColorScheme(), dynamicTheme);
+    collectThemeChangeObservers(source).forEach(observer -> observer.onThemeChange(event));
+  }
+
+
   private static Stream<ThemeChangeObserver> collectThemeChangeObservers(Component c) {
     Stream<ThemeChangeObserver> children =
         c.getChildren().flatMap(child -> collectThemeChangeObservers(child));

src/main/java/com/flowingcode/vaadin/addons/demo/ThemeChangeEvent.java

@@ -0,0 +1,63 @@
+/*-
+ * #%L
+ * Commons Demo
+ * %%
+ * Copyright (C) 2020 - 2026 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.demo;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.ComponentEvent;
+import java.util.Optional;
+import lombok.Getter;
+
+/**
+ * Event fired when a theme change occurs in the application. It contains information about the new
+ * {@link ColorScheme} and {@link DynamicTheme}.
+ */
+@SuppressWarnings("serial")
+public class ThemeChangeEvent extends ComponentEvent<Component> {
+
+  @Getter
+  private final ColorScheme colorScheme;
+
+  private final DynamicTheme dynamicTheme;
+
+  /**
+   * Constructs a new {@code ThemeChangeEvent}.
+   *
+   * @param source the source component of the event
+   * @param fromClient true if the event originated from the client side, false otherwise
+   * @param colorScheme the new color scheme applied
+   * @param dynamicTheme the new dynamic theme applied (may be null)
+   */
+  public ThemeChangeEvent(Component source, boolean fromClient, ColorScheme colorScheme, DynamicTheme dynamicTheme) {
+    super(source, fromClient);
+    this.colorScheme = colorScheme;
+    this.dynamicTheme = dynamicTheme;
+  }
+
+  /**
+   * Returns the dynamic theme applied, if any.
+   *
+   * @return an {@code Optional} containing the dynamic theme, or empty if dynamic theming is not
+   *         initialized.
+   */
+  public Optional<DynamicTheme> getDynamicTheme() {
+    return Optional.ofNullable(dynamicTheme);
+  }
+
+}

src/main/java/com/flowingcode/vaadin/addons/demo/ThemeChangeObserver.java

@@ -2,7 +2,7 @@
  * #%L
  * Commons Demo
  * %%
- * Copyright (C) 2020 - 2025 Flowing Code
+ * Copyright (C) 2020 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,10 +22,31 @@
 /**
  * Any attached component implementing this interface will receive an event when a new theme is
  * applied.
+ * <p>
+ * Observers are notified twice to support backward compatibility:
+ * first via the deprecated
+ * {@link #onThemeChange(String) onThemeChange(String theme)} and then via the
+ * {@link #onThemeChange(ThemeChangeEvent) onThemeChange(ThemeChangeEvent)}.
+ * </p>
  */
-@FunctionalInterface
 public interface ThemeChangeObserver {
 
-  void onThemeChange(String themeName);
+  /**
+   * Called when a theme change occurs.
+   *
+   * @param themeName the name of the new theme
+   * @deprecated Use {@link #onThemeChange(ThemeChangeEvent)} instead.
+   */
+  @Deprecated(forRemoval = true, since = "5.3.0")
+  default void onThemeChange(String themeName) {
+  };
+
+  /**
+   * Called when a theme change occurs.
+   *
+   * @param event the theme change event
+   */
+  default void onThemeChange(ThemeChangeEvent event) {
+  }
 
 }