From 567092b9a876b335b4ffc9121f3bbf906fc0b29d Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 1 Dec 2025 15:24:54 +0530
Subject: [PATCH] feat: try runtime themeing

---
 .../dashboard/assets/scss/_next-colors.scss   | 20 +++++++++
 .../components-next/message/bubbles/Base.vue  | 14 ++++---
 .../ChatwootMessageListWebComponent.vue       | 42 +++++++++++++++++++
 3 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss
index 181733ad2..22092f7d4 100644
--- a/app/javascript/dashboard/assets/scss/_next-colors.scss
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -109,6 +109,16 @@
     --solid-blue: 218 236 255;
     --solid-iris: 230 231 255;
 
+    // Bubble-specific colors (override these for custom theming)
+    --bubble-agent-bg: var(--solid-blue);
+    --bubble-agent-text: var(--slate-12);
+    --bubble-user-bg: var(--slate-4);
+    --bubble-user-text: var(--slate-12);
+    --bubble-private-bg: var(--solid-amber);
+    --bubble-private-text: var(--amber-12);
+    --bubble-bot-bg: var(--solid-iris);
+    --bubble-bot-text: var(--slate-12);
+
     --alpha-1: 67, 67, 67, 0.06;
     --alpha-2: 201, 202, 207, 0.15;
     --alpha-3: 255, 255, 255, 0.96;
@@ -224,6 +234,16 @@
     --solid-iris: 38 42 101;
     --text-blue: 126 182 255;
 
+    // Bubble-specific colors (override these for custom theming)
+    --bubble-agent-bg: var(--solid-blue);
+    --bubble-agent-text: var(--slate-12);
+    --bubble-user-bg: var(--slate-4);
+    --bubble-user-text: var(--slate-12);
+    --bubble-private-bg: var(--solid-amber);
+    --bubble-private-text: var(--amber-12);
+    --bubble-bot-bg: var(--solid-iris);
+    --bubble-bot-text: var(--slate-12);
+
     --alpha-1: 36, 36, 36, 0.8;
     --alpha-2: 139, 147, 182, 0.15;
     --alpha-3: 36, 38, 45, 0.9;
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
index f66f272de..c78bf9a54 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -19,13 +19,17 @@ const { variant, orientation, inReplyTo, shouldGroupWithNext } =
 const { t } = useI18n();
 
 const varaintBaseMap = {
-  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
+  [MESSAGE_VARIANTS.AGENT]:
+    'bg-[rgb(var(--bubble-agent-bg))] text-[rgb(var(--bubble-agent-text))]',
   [MESSAGE_VARIANTS.PRIVATE]:
-    'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
-  [MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
+    'bg-[rgb(var(--bubble-private-bg))] text-[rgb(var(--bubble-private-text))] [&_.prosemirror-mention-node]:font-semibold',
+  [MESSAGE_VARIANTS.USER]:
+    'bg-[rgb(var(--bubble-user-bg))] text-[rgb(var(--bubble-user-text))]',
   [MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
-  [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
-  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
+  [MESSAGE_VARIANTS.BOT]:
+    'bg-[rgb(var(--bubble-bot-bg))] text-[rgb(var(--bubble-bot-text))]',
+  [MESSAGE_VARIANTS.TEMPLATE]:
+    'bg-[rgb(var(--bubble-bot-bg))] text-[rgb(var(--bubble-bot-text))]',
   [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
   [MESSAGE_VARIANTS.EMAIL]: 'w-full',
   [MESSAGE_VARIANTS.UNSUPPORTED]:
diff --git a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
index d69378b90..bc555ab06 100644
--- a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
+++ b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
@@ -7,6 +7,48 @@ import MessageList from '../../../ui/MessageList.vue';
 </template>
 
 <style>
+/*
+ * Runtime Theme Customization
+ *
+ * Consumers can override bubble colors from outside the Shadow DOM.
+ * Set these CSS variables on :root or any ancestor element:
+ *
+ *   --chatwoot-bubble-agent-bg: RGB values for agent message background
+ *   --chatwoot-bubble-agent-text: RGB values for agent message text
+ *   --chatwoot-bubble-user-bg: RGB values for user message background
+ *   --chatwoot-bubble-user-text: RGB values for user message text
+ *   --chatwoot-bubble-private-bg: RGB values for private note background
+ *   --chatwoot-bubble-private-text: RGB values for private note text
+ *   --chatwoot-bubble-bot-bg: RGB values for bot message background
+ *   --chatwoot-bubble-bot-text: RGB values for bot message text
+ *
+ * Example usage in consumer's CSS:
+ *   :root {
+ *     --chatwoot-bubble-agent-bg: 59 130 246;
+ *     --chatwoot-bubble-user-bg: 243 244 246;
+ *   }
+ */
+:host {
+  /* FUNKY TEST COLORS - remove these overrides for production */
+  --bubble-agent-bg: var(
+    --chatwoot-bubble-agent-bg,
+    255 105 180
+  ); /* Hot Pink */
+  --bubble-agent-text: var(--chatwoot-bubble-agent-text, 255 255 255);
+  --bubble-user-bg: var(
+    --chatwoot-bubble-user-bg,
+    144 238 144
+  ); /* Lime Green */
+  --bubble-user-text: var(--chatwoot-bubble-user-text, 28 32 36);
+  --bubble-private-bg: var(
+    --chatwoot-bubble-private-bg,
+    255 165 0
+  ); /* Orange */
+  --bubble-private-text: var(--chatwoot-bubble-private-text, 79 52 34);
+  --bubble-bot-bg: var(--chatwoot-bubble-bot-bg, 0 255 255); /* Cyan */
+  --bubble-bot-text: var(--chatwoot-bubble-bot-text, 28 32 36);
+}
+
 .file-uploads {
   overflow: hidden;
   position: relative;