From 18edaabc485f3249ecad991fffe39f805f1daa5b Mon Sep 17 00:00:00 2001
From: Javier Godoy <11554739+javier-godoy@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:15:22 -0300
Subject: [PATCH 1/2] feat(demo): add support for dynamic theme switching

---
 .../vaadin/addons/AppShellConfiguratorImpl.java       | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
index 5d8c02a..4860552 100644
--- a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
+++ b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
@@ -2,7 +2,7 @@
  * #%L
  * Chat Assistant Add-on
  * %%
- * Copyright (C) 2023 - 2024 Flowing Code
+ * Copyright (C) 2023 - 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.
@@ -19,11 +19,20 @@
  */
 package com.flowingcode.vaadin.addons;
 
+import com.flowingcode.vaadin.addons.demo.DynamicTheme;
 import com.vaadin.flow.component.page.AppShellConfigurator;
 import com.vaadin.flow.component.page.Push;
+import com.vaadin.flow.server.AppShellSettings;
 
 @SuppressWarnings("serial")
 @Push
 public class AppShellConfiguratorImpl implements AppShellConfigurator {
 
+  @Override
+  public void configurePage(AppShellSettings settings) {
+    if (DynamicTheme.isFeatureSupported()) {
+      DynamicTheme.LUMO.initialize(settings);
+    }
+  }
+
 }

From 8023d9bee957c51204163c4472d7a77b4d67dc23 Mon Sep 17 00:00:00 2001
From: Javier Godoy <11554739+javier-godoy@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:44:50 -0300
Subject: [PATCH 2/2] chore: add aura styles

---
 .../resources/META-INF/frontend/react/animated-fab.tsx   | 8 ++++----
 .../META-INF/frontend/styles/chat-assistant-styles.css   | 4 ++--
 .../META-INF/frontend/styles/chat-message-styles.css     | 9 ++++-----
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/META-INF/frontend/react/animated-fab.tsx b/src/main/resources/META-INF/frontend/react/animated-fab.tsx
index 3b5ac6e..4941d6e 100644
--- a/src/main/resources/META-INF/frontend/react/animated-fab.tsx
+++ b/src/main/resources/META-INF/frontend/react/animated-fab.tsx
@@ -7,7 +7,7 @@ import Badge from '@mui/material/Badge';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { ReactAdapterElement, type RenderHooks } from 'Frontend/generated/flow/ReactAdapter';
 
-const lumoTheme = createTheme({
+const animatedFabTheme = createTheme({
   palette: {
     primary: {
       main: 'var(--lumo-primary-color)',
@@ -16,10 +16,10 @@ const lumoTheme = createTheme({
       contrastText: 'rgb(var(--lumo-primary-contrast-color))',
     },
     warning: {
-        main: 'var(--lumo-warning-color)',
+        main: 'var(--lumo-warning-color, var(--aura-yellow))',
         light: 'var(--lumo-warning-color-50pct)',
         dark: 'var(--lumo-warning-color-20pct)',
-        contrastText: 'rgb(var(--lumo-warning-contrast-color))',
+        contrastText: 'rgb(var(--lumo-warning-contrast-color, var(--aura-accent-color-light)))',
     }
     },
     components: {
@@ -55,7 +55,7 @@ class AnimatedFABElement extends ReactAdapterElement {
         }
       }
     return (
-      <ThemeProvider theme={lumoTheme}>
+      <ThemeProvider theme={animatedFabTheme}>
         <Draggable 
           nodeRef={this.draggableNodeRef}
           onDrag={eventControl}
diff --git a/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css b/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css
index 8644844..13737f8 100644
--- a/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css
+++ b/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css
@@ -2,7 +2,7 @@
  * #%L
  * Chat Assistant Add-on
  * %%
- * Copyright (C) 2023 - 2024 Flowing Code
+ * Copyright (C) 2023 - 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.
@@ -31,7 +31,7 @@ vaadin-vertical-layout.chat-assistant-resizable-vertical-layout {
 
 vaadin-vertical-layout.chat-assistant-container-vertical-layout {
     flex-grow: 1;
-    gap: var(--lumo-space-s);
+    gap: var(--lumo-space-s, var(--vaadin-gap-s));
     transform: rotate(180deg); /* This second rotation completes the "double rotation trick."
                                   Together, these two rotations position the resize handle in the upper-left corner.
                                   This new position is more suitable for resizing the chat window because the chat bubble 
diff --git a/src/main/resources/META-INF/frontend/styles/chat-message-styles.css b/src/main/resources/META-INF/frontend/styles/chat-message-styles.css
index 6c24929..fbc737c 100644
--- a/src/main/resources/META-INF/frontend/styles/chat-message-styles.css
+++ b/src/main/resources/META-INF/frontend/styles/chat-message-styles.css
@@ -2,7 +2,7 @@
  * #%L
  * Chat Assistant Add-on
  * %%
- * Copyright (C) 2023 - 2024 Flowing Code
+ * Copyright (C) 2023 - 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.
@@ -83,10 +83,9 @@
 
 .chat-assistant-who-is-typing {
 	width: 100%;
-    padding: var(--lumo-space-xs);
-    font-size: var(--lumo-font-size-xs);
-    font-family: var(--lumo-font-family);
-    color: var(--lumo-secondary-text-color);
+    padding: var(--lumo-space-xs, var(--vaadin-padding-xs, 0.25rem));
+    font-size: var(--lumo-font-size-xs, var(--aura-font-size-s, small));
+    color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary));
 }
 
 .wmde-markdown {