fix(demo): improve dark theme support in demos

Author: javier-godoy

pom.xml

@@ -18,7 +18,7 @@
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 		<drivers.dir>${project.basedir}/drivers</drivers.dir>
 		<jetty.version>11.0.12</jetty.version>
-		<flowingcode.commons.demo.version>4.0.0</flowingcode.commons.demo.version>
+		<flowingcode.commons.demo.version>4.2.0-SNAPSHOT</flowingcode.commons.demo.version>
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>
 

src/test/java/com/flowingcode/vaadin/addons/extendedlogin/ExtendedLoginOverlayDemo.java

@@ -7,9 +7,9 @@
  * 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.
@@ -20,7 +20,7 @@
 package com.flowingcode.vaadin.addons.extendedlogin;
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
-import com.vaadin.flow.component.dependency.CssImport;
+import com.flowingcode.vaadin.addons.demo.ThemeChangeObserver;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.IFrame;
 import com.vaadin.flow.router.PageTitle;
@@ -31,13 +31,22 @@
 @PageTitle("Extended Login Overlay Demo")
 @SuppressWarnings("serial")
 @Route(value = "extended-login/login-overlay-demo", layout = ExtendedLoginDemoView.class)
-public class ExtendedLoginOverlayDemo extends Div {
+public class ExtendedLoginOverlayDemo extends Div implements ThemeChangeObserver {
+
+  private final IFrame iframe;
 
   public ExtendedLoginOverlayDemo() {
     setClassName("wrap-iframe");
-    IFrame iframe = new IFrame("/extended-login/login-overlay");
+    iframe = new IFrame("/extended-login/login-overlay");
     iframe.setSizeFull();
     iframe.getElement().setAttribute("frameBorder", "0");
     add(iframe);
   }
+
+  @Override
+  public void onThemeChange(String themeName) {
+    iframe.getElement().executeJs(
+        "this.contentWindow.document.querySelector('html').setAttribute('theme', $0)", themeName);
+  }
+
 }

src/test/java/com/flowingcode/vaadin/addons/extendedlogin/LoginLayoutDemo.java

@@ -7,9 +7,9 @@
  * 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.
@@ -20,7 +20,7 @@
 package com.flowingcode.vaadin.addons.extendedlogin;
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
-import com.vaadin.flow.component.dependency.CssImport;
+import com.flowingcode.vaadin.addons.demo.ThemeChangeObserver;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.IFrame;
 import com.vaadin.flow.router.PageTitle;
@@ -31,14 +31,23 @@
 @PageTitle("Login Layout Demo")
 @SuppressWarnings("serial")
 @Route(value = "extended-login/login-layout-demo", layout = ExtendedLoginDemoView.class)
-public class LoginLayoutDemo extends Div {
+public class LoginLayoutDemo extends Div implements ThemeChangeObserver {
+
+  private IFrame iframe;
 
   public LoginLayoutDemo() {
     setClassName("wrap-iframe");
-    IFrame iframe = new IFrame("/extended-login/login-layout");
+    iframe = new IFrame("/extended-login/login-layout");
     iframe.setClassName("frame");
     iframe.setSizeFull();
     iframe.getElement().setAttribute("frameBorder", "0");
     add(iframe);
   }
+
+  @Override
+  public void onThemeChange(String themeName) {
+    iframe.getElement().executeJs(
+        "this.contentWindow.document.querySelector('html').setAttribute('theme', $0)", themeName);
+  }
+
 }