diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts
index 85bff725..d7449801 100644
--- a/packages/chat-component/src/main.ts
+++ b/packages/chat-component/src/main.ts
@@ -135,6 +135,15 @@ export class ChatComponent extends LitElement {
 
   static override styles = [mainStyle];
 
+  override updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('customStyles')) {
+      this.style.setProperty('--c-accent-high', this.customStyles.AccentHigh);
+      this.style.setProperty('--c-accent-lighter', this.customStyles.AccentLighter);
+      this.style.setProperty('--c-accent-contrast', this.customStyles.AccentContrast);
+    }
+  }
   // debounce dispatching must-scroll event
   debounceScrollIntoView(): void {
     let timeout: any = 0;
diff --git a/packages/webapp/src/pages/chat/Chat.tsx b/packages/webapp/src/pages/chat/Chat.tsx
index 7b92e171..88136ff7 100644
--- a/packages/webapp/src/pages/chat/Chat.tsx
+++ b/packages/webapp/src/pages/chat/Chat.tsx
@@ -69,9 +69,9 @@ const Chat = () => {
   };
 
   const [customStyles, setCustomStyles] = useState<CustomStylesState>({
-    AccentHigh: '#ff0000',
-    AccentLighter: '#ff0000',
-    AccentContrast: '#ff0000',
+    AccentHigh: '#692b61',
+    AccentLighter: '#f6d5f2',
+    AccentContrast: '#5e3c7d',
   });
 
   const handleCustomStylesChange = (newStyles: CustomStylesState) => {