From 5168e7b9b83e77a3e6313c2aeab90d328873898f Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 17 Jul 2026 13:42:06 +0100
Subject: [PATCH 1/2] feat(examples): add dark-mode styling to the example
 subprojects

Convert every example variant (React + JavaScript, static markup and the
dynamically-rendered .ts/.tsx markup) to render correctly in dark: hardcoded
light Tailwind utilities gain `dark:` counterparts and custom CSS gets
`.dark`-scoped overrides via the shadcn vars the examples already ship.
Semantic and per-user colours (status dots, avatars, cursors, badge hues) are
preserved.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../javascript/index.html                     | 10 ++++----
 .../react/src/App.tsx                         | 10 ++++----
 .../javascript/index.html                     |  8 +++----
 .../react/src/App.tsx                         | 10 ++++----
 .../auth-generate-jwt/javascript/index.html   |  4 ++--
 .../javascript/src/styles.css                 |  9 +++++++
 examples/auth-generate-jwt/react/src/App.tsx  |  8 +++----
 .../react/src/styles/styles.css               |  9 +++++++
 .../auth-request-token/javascript/index.html  |  4 ++--
 .../javascript/src/styles.css                 |  9 +++++++
 examples/auth-request-token/react/src/App.tsx |  8 +++----
 .../react/src/styles/styles.css               |  9 +++++++
 examples/chat-presence/javascript/index.html  |  2 +-
 .../chat-presence/javascript/src/script.ts    |  2 +-
 .../chat-presence/javascript/src/styles.css   |  4 ++++
 examples/chat-presence/react/src/App.tsx      |  4 ++--
 .../chat-presence/react/src/styles/styles.css |  4 ++++
 .../chat-room-history/javascript/index.html   | 10 ++++----
 .../javascript/src/script.ts                  |  6 ++---
 examples/chat-room-history/react/src/Chat.tsx |  6 ++---
 examples/chat-room-history/react/src/Home.tsx |  6 ++---
 .../chat-room-messages/javascript/index.html  |  2 +-
 .../javascript/src/script.ts                  |  2 +-
 .../javascript/src/styles.css                 |  4 ++++
 examples/chat-room-messages/react/src/App.tsx |  4 ++--
 .../react/src/styles/styles.css               |  4 ++++
 .../chat-room-reactions/javascript/index.html |  2 +-
 .../javascript/src/styles.css                 |  4 ++++
 .../chat-room-reactions/react/src/App.tsx     |  2 +-
 .../react/src/styles/styles.css               |  4 ++++
 .../chat-ui-chat-window/react/src/App.tsx     |  2 +-
 examples/chat-ui-sidebar/react/src/App.tsx    |  2 +-
 .../javascript/index.html                     | 18 +++++++-------
 .../javascript/src/styles.css                 |  5 ++++
 .../javascript/index.html                     |  4 ++--
 .../javascript/src/script.ts                  |  2 +-
 .../javascript/src/styles.css                 |  5 ++++
 .../javascript/index.html                     |  2 +-
 .../javascript/src/script.ts                  |  2 +-
 .../javascript/src/styles.css                 |  4 ++++
 .../react/src/App.tsx                         |  6 ++---
 .../react/src/styles/styles.css               |  4 ++++
 .../javascript/index.html                     |  2 +-
 .../javascript/src/styles.css                 |  4 ++++
 .../pub-sub-channel-state/react/src/App.tsx   |  4 ++--
 .../react/src/styles/styles.css               |  4 ++++
 .../pub-sub-history/javascript/index.html     | 16 ++++++-------
 .../pub-sub-history/javascript/src/script.ts  |  2 +-
 .../pub-sub-history/react/src/Auction.tsx     | 10 ++++----
 examples/pub-sub-history/react/src/Home.tsx   |  4 ++--
 .../react/src/styles/styles.css               |  4 ++++
 .../javascript/index.html                     |  2 +-
 .../javascript/src/components/annotations.ts  | 10 ++++----
 .../javascript/src/components/details.ts      |  8 +++----
 .../javascript/src/components/message.ts      |  6 ++---
 .../javascript/src/components/summary.ts      | 24 +++++++++----------
 .../javascript/src/styles.css                 |  4 ++++
 .../javascript/index.html                     |  2 +-
 .../react/src/App.tsx                         |  8 +++----
 .../pub-sub-occupancy/javascript/index.html   |  2 +-
 .../javascript/src/styles.css                 |  4 ++++
 examples/pub-sub-occupancy/react/src/App.tsx  |  2 +-
 .../pub-sub-presence/javascript/index.html    |  2 +-
 .../pub-sub-presence/javascript/src/script.ts |  2 +-
 examples/pub-sub-presence/react/src/App.tsx   |  4 ++--
 .../react/src/styles/styles.css               |  4 ++++
 examples/pub-sub-rewind/javascript/index.html | 16 ++++++-------
 .../pub-sub-rewind/javascript/src/script.ts   |  2 +-
 examples/pub-sub-rewind/react/src/Home.tsx    |  4 ++--
 examples/pub-sub-rewind/react/src/Odds.tsx    | 14 +++++------
 .../javascript/src/script.ts                  |  2 +-
 .../react/src/components/Avatar.tsx           |  4 ++--
 .../react/src/styles/styles.css               |  4 ++++
 .../javascript/src/script.ts                  | 12 +++++-----
 .../react/src/components/InputCell.tsx        | 10 ++++----
 .../react/src/styles/styles.css               |  4 ++++
 .../spaces-live-cursors/javascript/index.html |  2 +-
 .../spaces-live-cursors/react/src/App.tsx     |  2 +-
 .../react/src/styles/styles.css               |  4 ++++
 .../javascript/index.html                     |  2 +-
 .../javascript/src/script.ts                  |  8 +++----
 .../react/src/components/Cell.tsx             |  6 ++---
 .../react/src/components/Spreadsheet.tsx      |  4 ++--
 .../react/src/styles/styles.css               |  4 ++++
 84 files changed, 291 insertions(+), 173 deletions(-)

diff --git a/examples/ai-transport-message-per-response/javascript/index.html b/examples/ai-transport-message-per-response/javascript/index.html
index b002b18e24..7276edbe7b 100644
--- a/examples/ai-transport-message-per-response/javascript/index.html
+++ b/examples/ai-transport-message-per-response/javascript/index.html
@@ -7,15 +7,15 @@
     <title>AI Transport Message Per Response - JavaScript</title>
   </head>
 
-  <body class="bg-gray-100">
+  <body class="bg-gray-100 dark:bg-gray-800">
     <div class="max-w-6xl mx-auto p-5">
       <!-- Response section with always visible status -->
       <div class="mb-4">
         <div class="flex-1">
-          <div class="text-sm text-gray-600 mt-4 mb-2 flex justify-between">
+          <div class="text-sm text-gray-600 dark:text-gray-300 mt-4 mb-2 flex justify-between">
             <span id="prompt-display"></span>
             <div class="flex items-center gap-2">
-              <span class="text-xs bg-gray-200 px-2 py-1 rounded flex items-center gap-1">
+              <span class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded flex items-center gap-1">
                 <span id="processing-status">Ready</span>
               </span>
               <!-- Disconnect/Reconnect button -->
@@ -24,7 +24,7 @@
               </button>
             </div>
           </div>
-          <div class="p-4 border border-gray-300 rounded-lg bg-gray-50 h-48 overflow-y-auto text-base leading-relaxed">
+          <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-900 h-48 overflow-y-auto text-base leading-relaxed">
             <span id="response-text">Select a prompt below to get started</span>
             <span id="cursor" class="text-blue-600"></span>
           </div>
@@ -36,7 +36,7 @@
         <div class="flex flex-wrap gap-2" id="prompt-buttons">
           <button
             id="prompt-button"
-            class="px-3 py-2 text-sm border rounded-md transition-colors bg-white hover:bg-blue-50 border-gray-300 hover:border-blue-300 cursor-pointer"
+            class="px-3 py-2 text-sm border rounded-md transition-colors bg-white dark:bg-gray-900 hover:bg-blue-50 dark:hover:bg-blue-950 border-gray-300 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 cursor-pointer"
           >
             What is Ably AI Transport?
           </button>
diff --git a/examples/ai-transport-message-per-response/react/src/App.tsx b/examples/ai-transport-message-per-response/react/src/App.tsx
index 07bb4b730b..6e9f3852bb 100644
--- a/examples/ai-transport-message-per-response/react/src/App.tsx
+++ b/examples/ai-transport-message-per-response/react/src/App.tsx
@@ -92,9 +92,9 @@ const AITransportDemo: React.FC = () => {
       {/* Response section with always visible status */}
       <div className="mb-4">
         <div className="flex-1">
-          <div className="text-sm text-gray-600 mt-4 mb-2 flex justify-end items-center">
+          <div className="text-sm text-gray-600 dark:text-gray-300 mt-4 mb-2 flex justify-end items-center">
             <div className="flex items-center gap-2">
-              <span className="text-xs bg-gray-200 px-2 py-1 rounded flex items-center gap-1">
+              <span className="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded flex items-center gap-1">
                 <span
                   className={`w-2 h-2 rounded-full ${
                     isChannelDetached ? 'bg-red-500' : connectionState === 'connected' ? 'bg-green-500' : 'bg-red-500'
@@ -111,7 +111,7 @@ const AITransportDemo: React.FC = () => {
               </button>
             </div>
           </div>
-          <div className="p-4 border border-gray-300 rounded-lg bg-gray-50 h-48 overflow-y-auto whitespace-pre-wrap text-base leading-relaxed">
+          <div className="p-4 border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-900 h-48 overflow-y-auto whitespace-pre-wrap text-base leading-relaxed">
             {currentResponse || 'Select a prompt below to get started'}
           </div>
         </div>
@@ -125,8 +125,8 @@ const AITransportDemo: React.FC = () => {
             disabled={connectionState !== 'connected' || isChannelDetached}
             className={`px-3 py-2 text-sm border rounded-md transition-colors ${
               connectionState !== 'connected' || isChannelDetached
-                ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200'
-                : 'bg-white hover:bg-blue-50 border-gray-300 hover:border-blue-300 cursor-pointer'
+                ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 cursor-not-allowed border-gray-200 dark:border-gray-700'
+                : 'bg-white dark:bg-gray-900 hover:bg-blue-50 dark:hover:bg-blue-950 border-gray-300 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 cursor-pointer'
             }`}
           >
             What is Ably AI Transport?
diff --git a/examples/ai-transport-message-per-token/javascript/index.html b/examples/ai-transport-message-per-token/javascript/index.html
index 0d6a7baa7f..cef0a693ac 100644
--- a/examples/ai-transport-message-per-token/javascript/index.html
+++ b/examples/ai-transport-message-per-token/javascript/index.html
@@ -7,15 +7,15 @@
     <title>AI Transport Token Streaming - JavaScript</title>
   </head>
 
-  <body class="bg-gray-100">
+  <body class="bg-gray-100 dark:bg-gray-800">
     <div class="max-w-6xl mx-auto p-5">
       <!-- Response section with always visible status -->
       <div class="mb-4">
         <div class="flex-1">
-          <div class="text-sm text-gray-600 mt-4 mb-2 flex justify-between">
+          <div class="text-sm text-gray-600 dark:text-gray-300 mt-4 mb-2 flex justify-between">
             <span id="prompt-display"></span>
             <div class="flex items-center gap-2">
-              <span class="text-xs bg-gray-200 px-2 py-1 rounded flex items-center gap-1">
+              <span class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded flex items-center gap-1">
                 <span id="processing-status">ready</span>
               </span>
               <!-- Disconnect/Reconnect button -->
@@ -24,7 +24,7 @@
               </button>
             </div>
           </div>
-          <div class="p-4 border border-gray-300 rounded-lg bg-gray-50 h-48 overflow-y-auto text-base leading-relaxed">
+          <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-900 h-48 overflow-y-auto text-base leading-relaxed">
             <span id="response-text">Select a prompt below to get started</span>
             <span id="cursor" class="text-blue-600"></span>
           </div>
diff --git a/examples/ai-transport-message-per-token/react/src/App.tsx b/examples/ai-transport-message-per-token/react/src/App.tsx
index c7ecc026ee..39afdd3e4d 100644
--- a/examples/ai-transport-message-per-token/react/src/App.tsx
+++ b/examples/ai-transport-message-per-token/react/src/App.tsx
@@ -115,9 +115,9 @@ const AITransportDemo: React.FC = () => {
       {/* Response section with always visible status */}
       <div className="mb-4">
         <div className="flex-1">
-          <div className="text-sm text-gray-600 mt-4 mb-2 flex justify-end items-center">
+          <div className="text-sm text-gray-600 dark:text-gray-300 mt-4 mb-2 flex justify-end items-center">
             <div className="flex items-center gap-2">
-              <span className="text-xs bg-gray-200 px-2 py-1 rounded flex items-center gap-1">
+              <span className="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded flex items-center gap-1">
                 <span
                   className={`w-2 h-2 rounded-full ${
                     isChannelDetached ? 'bg-red-500' : connectionState === 'connected' ? 'bg-green-500' : 'bg-red-500'
@@ -142,7 +142,7 @@ const AITransportDemo: React.FC = () => {
               </button>
             </div>
           </div>
-          <div className="p-4 border border-gray-300 rounded-lg bg-gray-50 h-48 overflow-y-auto whitespace-pre-wrap text-base leading-relaxed">
+          <div className="p-4 border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-900 h-48 overflow-y-auto whitespace-pre-wrap text-base leading-relaxed">
             {currentResponse || (isProcessing ? 'Thinking...' : 'Select a prompt below to get started')}
             {isProcessing && <span className="text-blue-600">▋</span>}
           </div>
@@ -157,8 +157,8 @@ const AITransportDemo: React.FC = () => {
             disabled={isProcessing || connectionState !== 'connected' || isChannelDetached}
             className={`px-3 py-2 text-sm border rounded-md transition-colors ${
               isProcessing || connectionState !== 'connected' || isChannelDetached
-                ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200'
-                : 'bg-white hover:bg-blue-50 border-gray-300 hover:border-blue-300 cursor-pointer'
+                ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 cursor-not-allowed border-gray-200 dark:border-gray-700'
+                : 'bg-white dark:bg-gray-900 hover:bg-blue-50 dark:hover:bg-blue-950 border-gray-300 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 cursor-pointer'
             }`}
           >
             What is Ably AI Transport?
diff --git a/examples/auth-generate-jwt/javascript/index.html b/examples/auth-generate-jwt/javascript/index.html
index f6fe86e515..ceb9571dce 100644
--- a/examples/auth-generate-jwt/javascript/index.html
+++ b/examples/auth-generate-jwt/javascript/index.html
@@ -8,8 +8,8 @@
     <title>Authentication to Ably with JWT</title>
   </head>
   <body class="font-inter">
-    <div class="flex items-center justify-center min-h-screen bg-gray-100">
-      <div class="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+    <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
+      <div class="bg-white dark:bg-gray-900 shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div class="flex-grow text-center">
           <h1 class="text-2xl font-bold mb-4">
             Authentication to Ably with JWT
diff --git a/examples/auth-generate-jwt/javascript/src/styles.css b/examples/auth-generate-jwt/javascript/src/styles.css
index 8c7be91507..bfe99b78ee 100644
--- a/examples/auth-generate-jwt/javascript/src/styles.css
+++ b/examples/auth-generate-jwt/javascript/src/styles.css
@@ -98,3 +98,12 @@ input {
   outline: none;
   transition: all 0.2s ease-in-out;
 }
+
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
+.dark input {
+  background-color: hsl(var(--input));
+  color: hsl(var(--foreground));
+}
diff --git a/examples/auth-generate-jwt/react/src/App.tsx b/examples/auth-generate-jwt/react/src/App.tsx
index dde24b5b04..d7c6d13c5b 100644
--- a/examples/auth-generate-jwt/react/src/App.tsx
+++ b/examples/auth-generate-jwt/react/src/App.tsx
@@ -23,8 +23,8 @@ const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
   });
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
+      <div className="bg-white dark:bg-gray-900 shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div className="flex-grow text-center">
           <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
           <p className="mb-8">The Ably client has been successfully initialized.</p>
@@ -89,8 +89,8 @@ export default function App() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
+      <div className="bg-white dark:bg-gray-900 shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div className="flex-grow text-center">
           <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
           <p>Press the Connect button to initialize the client:</p>
diff --git a/examples/auth-generate-jwt/react/src/styles/styles.css b/examples/auth-generate-jwt/react/src/styles/styles.css
index f5fbac7a2b..ee68679f38 100644
--- a/examples/auth-generate-jwt/react/src/styles/styles.css
+++ b/examples/auth-generate-jwt/react/src/styles/styles.css
@@ -78,3 +78,12 @@ input {
   outline: none;
   transition: all 0.2s ease-in-out;
 }
+
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
+.dark input {
+  background-color: hsl(var(--input));
+  color: hsl(var(--foreground));
+}
diff --git a/examples/auth-request-token/javascript/index.html b/examples/auth-request-token/javascript/index.html
index 20e112099b..af57895824 100644
--- a/examples/auth-request-token/javascript/index.html
+++ b/examples/auth-request-token/javascript/index.html
@@ -8,8 +8,8 @@
     <title>Generate Token</title>
   </head>
   <body class="font-inter">
-    <div class="flex items-center justify-center min-h-screen bg-gray-100">
-      <div class="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+    <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
+      <div class="bg-white dark:bg-gray-900 shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div class="flex-grow text-center">
           <h1 class="text-2xl font-bold mb-4">
             Authentication with Ably
diff --git a/examples/auth-request-token/javascript/src/styles.css b/examples/auth-request-token/javascript/src/styles.css
index f5fbac7a2b..ee68679f38 100644
--- a/examples/auth-request-token/javascript/src/styles.css
+++ b/examples/auth-request-token/javascript/src/styles.css
@@ -78,3 +78,12 @@ input {
   outline: none;
   transition: all 0.2s ease-in-out;
 }
+
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
+.dark input {
+  background-color: hsl(var(--input));
+  color: hsl(var(--foreground));
+}
diff --git a/examples/auth-request-token/react/src/App.tsx b/examples/auth-request-token/react/src/App.tsx
index 62c83dac86..0fc0791491 100644
--- a/examples/auth-request-token/react/src/App.tsx
+++ b/examples/auth-request-token/react/src/App.tsx
@@ -23,8 +23,8 @@ const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
   });
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
+      <div className="bg-white dark:bg-gray-900 shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div className="flex-grow text-center">
           <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
           <p className="mb-8">The Ably client has been successfully initialized.</p>
@@ -92,8 +92,8 @@ export default function App() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
+      <div className="bg-white dark:bg-gray-900 shadow-md rounded-md p-8 w-[50%] flex flex-col">
         <div className="flex-grow text-center">
           <h1 className="text-2xl font-bold mb-4">Authentication with Ably</h1>
           <p>Press the Connect button to initialize the client:</p>
diff --git a/examples/auth-request-token/react/src/styles/styles.css b/examples/auth-request-token/react/src/styles/styles.css
index f5fbac7a2b..ee68679f38 100644
--- a/examples/auth-request-token/react/src/styles/styles.css
+++ b/examples/auth-request-token/react/src/styles/styles.css
@@ -78,3 +78,12 @@ input {
   outline: none;
   transition: all 0.2s ease-in-out;
 }
+
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
+.dark input {
+  background-color: hsl(var(--input));
+  color: hsl(var(--foreground));
+}
diff --git a/examples/chat-presence/javascript/index.html b/examples/chat-presence/javascript/index.html
index 9ec32049aa..1bef81af88 100644
--- a/examples/chat-presence/javascript/index.html
+++ b/examples/chat-presence/javascript/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body class="font-inter">
-  <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg uk-text-primary">
+  <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg uk-text-primary">
     <div id='cards' class="space-y-4"></div>
   </div>
 </body>
diff --git a/examples/chat-presence/javascript/src/script.ts b/examples/chat-presence/javascript/src/script.ts
index ec2a18a511..caed2c480d 100644
--- a/examples/chat-presence/javascript/src/script.ts
+++ b/examples/chat-presence/javascript/src/script.ts
@@ -91,7 +91,7 @@ async function addCard(onlineStatus: PresenceMember) {
   // Create an element to store status items
   const card = document.createElement('div');
   card.className =
-    'flex items-center p-4 bg-gray-100 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200';
+    'flex items-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200';
   card.id = onlineStatus.clientId;
 
   // Create element to store online status
diff --git a/examples/chat-presence/javascript/src/styles.css b/examples/chat-presence/javascript/src/styles.css
index dcfe1df2d8..24ecc25570 100644
--- a/examples/chat-presence/javascript/src/styles.css
+++ b/examples/chat-presence/javascript/src/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 .away-button {
   margin-top: 1rem;
   padding: 0.5rem 1rem;
diff --git a/examples/chat-presence/react/src/App.tsx b/examples/chat-presence/react/src/App.tsx
index c1cd951056..fce2a050ad 100644
--- a/examples/chat-presence/react/src/App.tsx
+++ b/examples/chat-presence/react/src/App.tsx
@@ -29,12 +29,12 @@ const Online = () => {
   });
 
   return (
-    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg uk-text-primary">
+    <div className="max-w-md mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg uk-text-primary">
       <div className="space-y-4">
         {presenceData.map((onlineStatus) => (
           <div
             key={onlineStatus.clientId}
-            className="flex items-center p-4 bg-gray-100 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200"
+            className="flex items-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200"
           >
             <div
               className={`w-4 h-4 mr-3 rounded-full ${
diff --git a/examples/chat-presence/react/src/styles/styles.css b/examples/chat-presence/react/src/styles/styles.css
index 65f4ffd418..2791aa1860 100644
--- a/examples/chat-presence/react/src/styles/styles.css
+++ b/examples/chat-presence/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/chat-room-history/javascript/index.html b/examples/chat-room-history/javascript/index.html
index 51d2dc39a1..6eeedeadeb 100644
--- a/examples/chat-room-history/javascript/index.html
+++ b/examples/chat-room-history/javascript/index.html
@@ -11,8 +11,8 @@
 
 <body class="font-inter">
   <!-- Landing Page View -->
-  <div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100 uk-text-primary">
-    <div class="w-1/3 bg-gray-300 p-8 rounded-lg shadow-lg">
+  <div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 uk-text-primary">
+    <div class="w-1/3 bg-gray-300 dark:bg-gray-600 p-8 rounded-lg shadow-lg">
       <h2 class="text-sm mb-4 text-center">Use the 'Send message' button to send 5 messages before you enter and
         subscribe to the chat room.</h2>
       <div class="flex flex-col gap-4">
@@ -21,7 +21,7 @@ <h2 class="text-sm mb-4 text-center">Use the 'Send message' button to send 5 mes
           Send message
         </button>
         <button id="enter-chat"
-          class="uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black bg-transparent text-black cursor-not-allowed"
+          class="uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black dark:border-gray-600 bg-transparent text-black dark:text-white cursor-not-allowed"
           disabled>
           Enter chat
         </button>
@@ -30,7 +30,7 @@ <h2 class="text-sm mb-4 text-center">Use the 'Send message' button to send 5 mes
   </div>
 
   <div id="chat-room-messages"
-    class="w-full flex justify-center items-center relative bg-[#f4f8fb] h-screen uk-text-primary"
+    class="w-full flex justify-center items-center relative bg-[#f4f8fb] dark:bg-[hsl(var(--background))] h-screen uk-text-primary"
     style="display: none;">
     <div class="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
       <div id="messages"
@@ -41,7 +41,7 @@ <h2 class="text-sm mb-4 text-center">Use the 'Send message' button to send 5 mes
           ↑ Load previous messages
         </button>
       </div>
-      <div class="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+      <div class="border-t-2 border-gray-200 dark:border-gray-700 px-4 pt-4 mb-2 sm:mb-0">
         <form class="flex" onsubmit="event.preventDefault(); handleSubmit();">
           <input type="text" name="message" placeholder="Type something..."
             class="uk-input uk-width-1-1 uk-border-rounded-left" autoFocus />
diff --git a/examples/chat-room-history/javascript/src/script.ts b/examples/chat-room-history/javascript/src/script.ts
index 0056f364a3..6ac4849a1e 100644
--- a/examples/chat-room-history/javascript/src/script.ts
+++ b/examples/chat-room-history/javascript/src/script.ts
@@ -66,7 +66,7 @@ document.getElementById('send-message').addEventListener('click', () => {
     if (enterChatButton) {
       enterChatButton.disabled = false;
       enterChatButton.className =
-        'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black bg-transparent text-black';
+        'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black dark:border-gray-600 bg-transparent text-black dark:text-white';
     }
   }
 
@@ -102,7 +102,7 @@ const getPastMessages = async () => {
   if (loadButton instanceof HTMLButtonElement) {
     loadButton.disabled = true;
     loadButton.className =
-      'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black bg-transparent text-black cursor-not-allowed hover:uk-btn-primary+1 active:uk-btn-primary+2 absolute top-2 left-1/2 transform -translate-x-1/2 p-2 cursor-not-allowed';
+      'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black dark:border-gray-600 bg-transparent text-black dark:text-white cursor-not-allowed hover:uk-btn-primary+1 active:uk-btn-primary+2 absolute top-2 left-1/2 transform -translate-x-1/2 p-2 cursor-not-allowed';
   }
 };
 
@@ -140,7 +140,7 @@ function addMessage(message: Message, position = 'after') {
 
   /** Add message text to message div */
   const messageSpan = document.createElement('span');
-  messageSpan.className = 'text-gray-700';
+  messageSpan.className = 'text-gray-700 dark:text-gray-300';
   messageSpan.textContent = message.text;
   messageDiv.appendChild(messageSpan);
 }
diff --git a/examples/chat-room-history/react/src/Chat.tsx b/examples/chat-room-history/react/src/Chat.tsx
index fc8167e9a3..e10d4a8872 100644
--- a/examples/chat-room-history/react/src/Chat.tsx
+++ b/examples/chat-room-history/react/src/Chat.tsx
@@ -30,7 +30,7 @@ export default function Chat() {
       if (loadButton instanceof HTMLButtonElement) {
         loadButton.disabled = true;
         loadButton.className =
-          'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black bg-transparent text-black cursor-not-allowed hover:uk-btn-primary+1 active:uk-btn-primary+2 absolute top-2 left-1/2 transform -translate-x-1/2 p-2 cursor-not-allowed';
+          'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black dark:border-gray-600 bg-transparent text-black dark:text-white cursor-not-allowed hover:uk-btn-primary+1 active:uk-btn-primary+2 absolute top-2 left-1/2 transform -translate-x-1/2 p-2 cursor-not-allowed';
       }
     });
   };
@@ -44,7 +44,7 @@ export default function Chat() {
   return (
     <div
       id="chat-room-messages"
-      className="w-full flex justify-center items-center relative bg-[#f4f8fb] h-screen uk-text-primary"
+      className="w-full flex justify-center items-center relative bg-[#f4f8fb] dark:bg-[hsl(var(--background))] h-screen uk-text-primary"
     >
       <div className="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
         <div
@@ -67,7 +67,7 @@ export default function Chat() {
             </div>
           ))}
         </div>
-        <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+        <div className="border-t-2 border-gray-200 dark:border-gray-700 px-4 pt-4 mb-2 sm:mb-0">
           <form className="flex" onSubmit={handleSubmit}>
             <input
               type="text"
diff --git a/examples/chat-room-history/react/src/Home.tsx b/examples/chat-room-history/react/src/Home.tsx
index 01f2bab0d8..79f67b0f15 100644
--- a/examples/chat-room-history/react/src/Home.tsx
+++ b/examples/chat-room-history/react/src/Home.tsx
@@ -40,7 +40,7 @@ export default function Home() {
     if (messageCount >= 4 && enterChatButton) {
       (enterChatButton as HTMLButtonElement).disabled = false;
       enterChatButton.className =
-        'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black bg-transparent text-black';
+        'uk-btn uk-btn-sm mb-1 rounded-[1998px] border border-black dark:border-gray-600 bg-transparent text-black dark:text-white';
       enterChatButton.onclick = () => navigate('/chat');
     }
 
@@ -50,8 +50,8 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100 uk-text-primary">
-      <div className="w-1/3 bg-gray-300 p-8 rounded-lg shadow-lg">
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 uk-text-primary">
+      <div className="w-1/3 bg-gray-300 dark:bg-gray-600 p-8 rounded-lg shadow-lg">
         <h2 className="text-sm mb-4 text-center">
           Use the 'Send message' button to send 5 messages before you enter and subscribe to the chat room.
         </h2>
diff --git a/examples/chat-room-messages/javascript/index.html b/examples/chat-room-messages/javascript/index.html
index 02e333e308..dfdb56fc1a 100644
--- a/examples/chat-room-messages/javascript/index.html
+++ b/examples/chat-room-messages/javascript/index.html
@@ -15,7 +15,7 @@
           class="w-80 flex flex-auto flex-col space-y-2 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch"
         >
         </div>
-        <div class="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+        <div class="border-t-2 border-gray-200 dark:border-gray-700 px-4 pt-4 mb-2 sm:mb-0">
           <form class="flex" onsubmit="event.preventDefault(); handleSubmit();">
             <input
               type="text"
diff --git a/examples/chat-room-messages/javascript/src/script.ts b/examples/chat-room-messages/javascript/src/script.ts
index f6b3ca4931..f8898d24eb 100644
--- a/examples/chat-room-messages/javascript/src/script.ts
+++ b/examples/chat-room-messages/javascript/src/script.ts
@@ -30,7 +30,7 @@ async function initializeChat() {
     authorSpan.textContent = `${message.message.clientId === chatClient.clientId ? 'You' : message.message.clientId}:`;
     messageDiv.appendChild(authorSpan);
     const messageSpan = document.createElement('span');
-    messageSpan.className = 'text-gray-700';
+    messageSpan.className = 'text-gray-700 dark:text-gray-300';
     messageSpan.textContent = message.message.text;
     messageDiv.appendChild(messageSpan);
   });
diff --git a/examples/chat-room-messages/javascript/src/styles.css b/examples/chat-room-messages/javascript/src/styles.css
index 562e9ac776..da6e6287c9 100644
--- a/examples/chat-room-messages/javascript/src/styles.css
+++ b/examples/chat-room-messages/javascript/src/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 .inner {
   width: 100%;
   max-width: 320px;
diff --git a/examples/chat-room-messages/react/src/App.tsx b/examples/chat-room-messages/react/src/App.tsx
index 9225de8c8f..dfc918d9ef 100644
--- a/examples/chat-room-messages/react/src/App.tsx
+++ b/examples/chat-room-messages/react/src/App.tsx
@@ -49,11 +49,11 @@ const Chat = () => {
               <span className={`font-bold ${message.clientId === clientId ? 'text-grey-500' : 'text-blue-500'} mr-2`}>
                 {message.clientId === clientId ? 'You' : message.clientId}:
               </span>
-              <span className="text-gray-700">{message.text}</span>
+              <span className="text-gray-700 dark:text-gray-300">{message.text}</span>
             </div>
           ))}
         </div>
-        <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+        <div className="border-t-2 border-gray-200 dark:border-gray-700 px-4 pt-4 mb-2 sm:mb-0">
           <form className="flex" onSubmit={handleSubmit}>
             <input
               type="text"
diff --git a/examples/chat-room-messages/react/src/styles/styles.css b/examples/chat-room-messages/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/chat-room-messages/react/src/styles/styles.css
+++ b/examples/chat-room-messages/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/chat-room-reactions/javascript/index.html b/examples/chat-room-reactions/javascript/index.html
index 762ee19342..4d5e15f7d1 100644
--- a/examples/chat-room-reactions/javascript/index.html
+++ b/examples/chat-room-reactions/javascript/index.html
@@ -16,7 +16,7 @@
       <div id="messages"
         class="w-96 flex flex-auto flex-col space-y-4 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch">
       </div>
-      <div class="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+      <div class="border-t-2 border-gray-200 dark:border-gray-700 px-4 pt-4 mb-2 sm:mb-0">
         <div id="emoji-selector" class="emoji-selector"></div>
         <div class="absolute right-0 bottom-[100px] mb-2 mr-2">
           <div class="reaction-container">
diff --git a/examples/chat-room-reactions/javascript/src/styles.css b/examples/chat-room-reactions/javascript/src/styles.css
index 33cafc8e11..a00c75ea85 100644
--- a/examples/chat-room-reactions/javascript/src/styles.css
+++ b/examples/chat-room-reactions/javascript/src/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/chat-room-reactions/react/src/App.tsx b/examples/chat-room-reactions/react/src/App.tsx
index d8372cedee..409603232e 100644
--- a/examples/chat-room-reactions/react/src/App.tsx
+++ b/examples/chat-room-reactions/react/src/App.tsx
@@ -33,7 +33,7 @@ function Chat() {
           id="messages"
           className="w-96 flex flex-auto flex-col space-y-4 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch"
         ></div>
-        <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+        <div className="border-t-2 border-gray-200 dark:border-gray-700 px-4 pt-4 mb-2 sm:mb-0">
           <div className="emoji-selector">
             {emojis.map((emoji, index) => (
               <span key={index} className="emoji-btn" onClick={() => sendRoomReaction({ name: emoji })}>
diff --git a/examples/chat-room-reactions/react/src/styles/styles.css b/examples/chat-room-reactions/react/src/styles/styles.css
index 4fbd22a683..0afef6b61e 100644
--- a/examples/chat-room-reactions/react/src/styles/styles.css
+++ b/examples/chat-room-reactions/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/chat-ui-chat-window/react/src/App.tsx b/examples/chat-ui-chat-window/react/src/App.tsx
index 12866326b3..1b256f418d 100644
--- a/examples/chat-ui-chat-window/react/src/App.tsx
+++ b/examples/chat-ui-chat-window/react/src/App.tsx
@@ -34,7 +34,7 @@ export default function App() {
               <ChatRoomProvider name={initialRoom}>
                 <div className="flex flex-1 justify-center items-center h-screen bg-white dark:bg-gray-950">
                   <div
-                    className="h-full w-full max-w-4xl border rounded-lg overflow-hidden bg-white dark:bg-gray-900 flex flex-col">
+                    className="h-full w-full max-w-4xl border dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-900 flex flex-col">
                     <ChatWindow
                       roomName={initialRoom}
                       customHeaderContent={<RoomInfo />}
diff --git a/examples/chat-ui-sidebar/react/src/App.tsx b/examples/chat-ui-sidebar/react/src/App.tsx
index b8e5803708..29dd74c180 100644
--- a/examples/chat-ui-sidebar/react/src/App.tsx
+++ b/examples/chat-ui-sidebar/react/src/App.tsx
@@ -47,7 +47,7 @@ export default function App() {
         <AvatarProvider>
           <ChatSettingsProvider>
             <ChatClientProvider client={chatClient}>
-              <div className="h-screen w-full flex justify-center items-center bg-white">
+              <div className="h-screen w-full flex justify-center items-center bg-white dark:bg-gray-950">
                 <div
                   className="shadow-lg rounded-lg overflow-hidden"
                 >
diff --git a/examples/liveobjects-live-counter/javascript/index.html b/examples/liveobjects-live-counter/javascript/index.html
index 69773cf9af..e7a5c549ab 100644
--- a/examples/liveobjects-live-counter/javascript/index.html
+++ b/examples/liveobjects-live-counter/javascript/index.html
@@ -9,26 +9,26 @@
   </head>
   <body class="font-inter">
     <div class="min-h-screen p-6">
-      <div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg p-6 space-y-2">
+      <div class="max-w-sm mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 space-y-2">
         <h2 class="text-sm font-bold mb-2">Vote for your favorite Color</h2>
 
         <div id="vote-options">
-          <div class="flex justify-between items-center p-2 border-b space-x-4">
+          <div class="flex justify-between items-center p-2 border-b dark:border-gray-700 space-x-4">
             <span class="text-red-500 text-sm font-semibold flex-grow">Red</span>
-            <span class="font-bold text-gray-700 text-sm" id="count-red">0</span>
+            <span class="font-bold text-gray-700 dark:text-gray-300 text-sm" id="count-red">0</span>
             <button
-              class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap vote-button rounded-[1998px] bg-transparent border border-black"
+              class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap vote-button rounded-[1998px] bg-transparent border border-black dark:border-gray-600"
               data-color="red"
             >
               Vote
             </button>
           </div>
 
-          <div class="flex justify-between items-center p-2 border-b space-x-4">
+          <div class="flex justify-between items-center p-2 border-b dark:border-gray-700 space-x-4">
             <span class="text-green-500 text-sm font-semibold flex-grow">Green</span>
-            <span class="font-bold text-gray-700 text-sm" id="count-green">0</span>
+            <span class="font-bold text-gray-700 dark:text-gray-300 text-sm" id="count-green">0</span>
             <button
-              class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap vote-button rounded-[1998px] bg-transparent border border-black"
+              class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap vote-button rounded-[1998px] bg-transparent border border-black dark:border-gray-600"
               data-color="green"
             >
               Vote
@@ -37,9 +37,9 @@ <h2 class="text-sm font-bold mb-2">Vote for your favorite Color</h2>
 
           <div class="flex justify-between items-center p-2 space-x-4">
             <span class="text-blue-500 font-semibold text-sm flex-grow">Blue</span>
-            <span class="font-bold text-gray-700 text-sm" id="count-blue">0</span>
+            <span class="font-bold text-gray-700 dark:text-gray-300 text-sm" id="count-blue">0</span>
             <button
-              class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap vote-button rounded-[1998px] bg-transparent border border-black"
+              class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap vote-button rounded-[1998px] bg-transparent border border-black dark:border-gray-600"
               data-color="blue"
             >
               Vote
diff --git a/examples/liveobjects-live-counter/javascript/src/styles.css b/examples/liveobjects-live-counter/javascript/src/styles.css
index 536fe4c50f..76309aaf0c 100644
--- a/examples/liveobjects-live-counter/javascript/src/styles.css
+++ b/examples/liveobjects-live-counter/javascript/src/styles.css
@@ -62,3 +62,8 @@
 .uk-text-primary {
   color: hsl(var(--primary));
 }
+
+.dark body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
diff --git a/examples/liveobjects-live-map/javascript/index.html b/examples/liveobjects-live-map/javascript/index.html
index 1bd87e66df..9535a99c4f 100644
--- a/examples/liveobjects-live-map/javascript/index.html
+++ b/examples/liveobjects-live-map/javascript/index.html
@@ -21,12 +21,12 @@ <h2 id="title" class="text-sm font-bold text-center mb-4">Realtime Task Board</h
           />
           <button id="add-task" class="uk-btn uk-btn-primary uk-btn-sm uk-border-rounded-right whitespace-nowrap rounded-[1998px]">Add</button>
 
-          <button id="remove-tasks" class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap rounded-[1998px] bg-transparent border border-black">
+          <button id="remove-tasks" class="uk-btn uk-btn-sm uk-border-rounded-right whitespace-nowrap rounded-[1998px] bg-transparent border border-black dark:border-gray-600">
             Remove all
           </button>
         </div>
 
-        <div class="h-full border rounded-lg overflow-y-auto bg-white shadow-lg">
+        <div class="h-full border dark:border-gray-700 rounded-lg overflow-y-auto bg-white dark:bg-gray-900 shadow-lg">
           <div id="tasks" class="p-4 space-y-4"></div>
         </div>
       </div>
diff --git a/examples/liveobjects-live-map/javascript/src/script.ts b/examples/liveobjects-live-map/javascript/src/script.ts
index ab90be0df7..df7b86b5d7 100644
--- a/examples/liveobjects-live-map/javascript/src/script.ts
+++ b/examples/liveobjects-live-map/javascript/src/script.ts
@@ -87,7 +87,7 @@ function createTaskDiv(id: string, title: string, tasks: PathObject<LiveMap<Task
     `<div class="flex justify-between items-center rounded space-x-4 task" data-task-id="${id}">
         <span class="flex-grow">${title}</span>
         <button class="uk-btn uk-btn-primary uk-btn-sm uk-border-rounded-right update-task rounded-[1998px]">Edit</button>
-        <button class="uk-btn uk-btn-sm uk-border-rounded-right remove-task rounded-[1998px] bg-transparent border border-black">Remove</button>
+        <button class="uk-btn uk-btn-sm uk-border-rounded-right remove-task rounded-[1998px] bg-transparent border border-black dark:border-gray-600">Remove</button>
     </div>`,
     'text/html',
   ).body.firstChild;
diff --git a/examples/liveobjects-live-map/javascript/src/styles.css b/examples/liveobjects-live-map/javascript/src/styles.css
index 536fe4c50f..76309aaf0c 100644
--- a/examples/liveobjects-live-map/javascript/src/styles.css
+++ b/examples/liveobjects-live-map/javascript/src/styles.css
@@ -62,3 +62,8 @@
 .uk-text-primary {
   color: hsl(var(--primary));
 }
+
+.dark body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
diff --git a/examples/pub-sub-channel-messages/javascript/index.html b/examples/pub-sub-channel-messages/javascript/index.html
index 7eb9aa4bfa..c596ca24a9 100644
--- a/examples/pub-sub-channel-messages/javascript/index.html
+++ b/examples/pub-sub-channel-messages/javascript/index.html
@@ -15,7 +15,7 @@
       class="uk-btn uk-btn-sm uk-btn-primary mb-1 rounded-[1998px] hover:uk-btn-primary+1 active:uk-btn-primary+2">
       Publish Random Headline
     </button>
-    <div class="w-full max-w-2xl h-80 border rounded-lg overflow-y-auto bg-white shadow-lg">
+    <div class="w-full max-w-2xl h-80 border rounded-lg overflow-y-auto bg-white dark:bg-gray-900 shadow-lg">
       <div id="headlines" class="p-4 space-y-2"></div>
     </div>
     <div id="headlines-remaining" class="text-sm"></div>
diff --git a/examples/pub-sub-channel-messages/javascript/src/script.ts b/examples/pub-sub-channel-messages/javascript/src/script.ts
index 16dc9451a1..c6bc829396 100644
--- a/examples/pub-sub-channel-messages/javascript/src/script.ts
+++ b/examples/pub-sub-channel-messages/javascript/src/script.ts
@@ -39,7 +39,7 @@ channel.subscribe((message) => {
   newFlag.className = 'bg-green-500 text-white text-xs px-2 py-1 rounded-full font-bold mr-2';
   newFlag.textContent = 'NEW';
 
-  newMessage.className = 'p-3 bg-gray-50 rounded-lg flex items-center gap-2';
+  newMessage.className = 'p-3 bg-gray-50 dark:bg-gray-900 rounded-lg flex items-center gap-2';
   newMessage.appendChild(newFlag);
   const messageText = document.createElement('span');
   messageText.innerText = message.data;
diff --git a/examples/pub-sub-channel-messages/javascript/src/styles.css b/examples/pub-sub-channel-messages/javascript/src/styles.css
index 562e9ac776..da6e6287c9 100644
--- a/examples/pub-sub-channel-messages/javascript/src/styles.css
+++ b/examples/pub-sub-channel-messages/javascript/src/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 .inner {
   width: 100%;
   max-width: 320px;
diff --git a/examples/pub-sub-channel-messages/react/src/App.tsx b/examples/pub-sub-channel-messages/react/src/App.tsx
index aef556166a..a89de81f6d 100644
--- a/examples/pub-sub-channel-messages/react/src/App.tsx
+++ b/examples/pub-sub-channel-messages/react/src/App.tsx
@@ -67,10 +67,10 @@ function ChannelMessages() {
         Publish Random Headline
       </button>
 
-      <div className="w-full max-w-2xl h-80 border rounded-lg overflow-y-auto bg-white shadow-lg">
+      <div className="w-full max-w-2xl h-80 border rounded-lg overflow-y-auto bg-white dark:bg-gray-900 shadow-lg">
         <div className="p-4 space-y-2">
           {messages.map((msg, index) => (
-            <div key={index} className="p-3 bg-gray-50 rounded-lg flex items-center gap-2">
+            <div key={index} className="p-3 bg-gray-50 dark:bg-gray-900 rounded-lg flex items-center gap-2">
               {msg.isNew && (
                 <span className="bg-green-500 text-white text-xs px-2 py-1 rounded-full font-bold">NEW</span>
               )}
@@ -80,7 +80,7 @@ function ChannelMessages() {
         </div>
       </div>
 
-      <div className="text-sm text-gray-500">Headlines remaining: {headlines.length}</div>
+      <div className="text-sm text-gray-500 dark:text-gray-400">Headlines remaining: {headlines.length}</div>
     </div>
   );
 }
diff --git a/examples/pub-sub-channel-messages/react/src/styles/styles.css b/examples/pub-sub-channel-messages/react/src/styles/styles.css
index 4fbd22a683..0afef6b61e 100644
--- a/examples/pub-sub-channel-messages/react/src/styles/styles.css
+++ b/examples/pub-sub-channel-messages/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/pub-sub-channel-state/javascript/index.html b/examples/pub-sub-channel-state/javascript/index.html
index 565b06507f..70ec02edb4 100644
--- a/examples/pub-sub-channel-state/javascript/index.html
+++ b/examples/pub-sub-channel-state/javascript/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body class="font-inter">
-  <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6 uk-text-primary">
+  <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 uk-text-primary">
     <div class="flex justify-center items-center">
       <button id="channel-action"
         class="uk-btn uk-btn-sm uk-btn-primary mb-1 rounded-[1998px] hover:uk-btn-primary+1 active:uk-btn-primary+2">Click
diff --git a/examples/pub-sub-channel-state/javascript/src/styles.css b/examples/pub-sub-channel-state/javascript/src/styles.css
index 94b4f84544..32d359adfa 100644
--- a/examples/pub-sub-channel-state/javascript/src/styles.css
+++ b/examples/pub-sub-channel-state/javascript/src/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 .uk-text-primary {
   color: hsl(var(--primary));
 }
diff --git a/examples/pub-sub-channel-state/react/src/App.tsx b/examples/pub-sub-channel-state/react/src/App.tsx
index c798a51855..3ae8b9bf2f 100644
--- a/examples/pub-sub-channel-state/react/src/App.tsx
+++ b/examples/pub-sub-channel-state/react/src/App.tsx
@@ -45,7 +45,7 @@ function ChannelState() {
   };
 
   return (
-    <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6 uk-text-primary">
+    <div className="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 uk-text-primary">
       {isAttached ? (
         <div className="flex justify-center items-center">
           <button
@@ -82,7 +82,7 @@ export default function App() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-gray-100">
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-800">
       <AblyProvider client={client}>
         <ChannelProvider channelName={channelName}>
           <ChannelState />
diff --git a/examples/pub-sub-channel-state/react/src/styles/styles.css b/examples/pub-sub-channel-state/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/pub-sub-channel-state/react/src/styles/styles.css
+++ b/examples/pub-sub-channel-state/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/pub-sub-history/javascript/index.html b/examples/pub-sub-history/javascript/index.html
index fd1eae894f..0273ad01a1 100644
--- a/examples/pub-sub-history/javascript/index.html
+++ b/examples/pub-sub-history/javascript/index.html
@@ -10,8 +10,8 @@
 </head>
 
 <body class="font-inter">
-  <div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100 uk-text-primary">
-    <div class="bg-white p-8 rounded-lg shadow-lg w-96 text-center">
+  <div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 uk-text-primary">
+    <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-96 text-center">
       <h2 class="text-2xl mb-6">Welcome to the auction</h2>
       <p>Click the button below to add some historical bids.</p>
       <div class="inline-flex flex-col gap-4 items-center">
@@ -23,9 +23,9 @@ <h2 class="text-2xl mb-6">Welcome to the auction</h2>
     </div>
   </div>
   <div id="auction" class="h-max p-4 overflow-y-auto uk-text-primary" style="display: none;">
-    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
       <div class="p-4">
-        <p class="text-gray-600 text-sm mb-2">
+        <p class="text-gray-600 dark:text-gray-300 text-sm mb-2">
           Auction item #1
         </p>
         <button id="place-bid"
@@ -33,12 +33,12 @@ <h2 class="text-2xl mb-6">Welcome to the auction</h2>
           Place bid
         </button>
 
-        <div class="bg-gray-100 p-2 rounded-lg mb-4">
+        <div class="bg-gray-100 dark:bg-gray-800 p-2 rounded-lg mb-4">
           <h2 class="text-sm font-bold mb-1">Current bid</h2>
-          <p id="no-bids" class="text-gray-600 text-xs">No bids yet.</p>
+          <p id="no-bids" class="text-gray-600 dark:text-gray-300 text-xs">No bids yet.</p>
           <div id="current-bid" class="flex justify-between items-center text-xs" style="display: none;">
             <span id="current-bid-name" class="font-medium w-1/3 text-left"></span>
-            <span id="current-bid-time" class="text-gray-600 w-1/3 text-center"></span>
+            <span id="current-bid-time" class="text-gray-600 dark:text-gray-300 w-1/3 text-center"></span>
             <span id="current-bid-amount" class="font-bold text-lg w-1/3 text-right"></span>
           </div>
         </div>
@@ -61,7 +61,7 @@ <h3 class="text-sm font-bold mb-2">Place your bid</h3>
           <input type="number" id="bid-amount" class="uk-input uk-form-sm mb-2" placeholder="Enter bid amount" />
           <p class="uk-text-right">
             <button id="cancel-bid"
-              class="uk-btn uk-btn-default uk-btn-sm mr-2 border rounded-[1998px] border-black bg-transparent text-black">
+              class="uk-btn uk-btn-default uk-btn-sm mr-2 border rounded-[1998px] border-black dark:border-gray-600 bg-transparent text-black dark:text-white">
               Cancel
             </button>
             <button id="place-bid-dialog"
diff --git a/examples/pub-sub-history/javascript/src/script.ts b/examples/pub-sub-history/javascript/src/script.ts
index c3a1f4caef..886ece1a6e 100644
--- a/examples/pub-sub-history/javascript/src/script.ts
+++ b/examples/pub-sub-history/javascript/src/script.ts
@@ -120,7 +120,7 @@ async function addHistoryItem(message: Message, position = 'prepend') {
   historyItem.appendChild(clientId);
 
   const timestamp = document.createElement('span');
-  timestamp.className = 'text-gray-600 w-1/3 text-center';
+  timestamp.className = 'text-gray-600 dark:text-gray-300 w-1/3 text-center';
   timestamp.textContent = new Date(message.data.timestamp).toLocaleTimeString([], {
     hour: '2-digit',
     minute: '2-digit',
diff --git a/examples/pub-sub-history/react/src/Auction.tsx b/examples/pub-sub-history/react/src/Auction.tsx
index b06c8a0073..59739e57bd 100644
--- a/examples/pub-sub-history/react/src/Auction.tsx
+++ b/examples/pub-sub-history/react/src/Auction.tsx
@@ -129,9 +129,9 @@ export default function AuctionRoom() {
 
   return (
     <div className="h-max p-4 overflow-y-auto uk-text-primary">
-      <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+      <div className="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
         <div className="p-4">
-          <p className="text-gray-600 text-sm mb-2">Auction item #1</p>
+          <p className="text-gray-600 dark:text-gray-300 text-sm mb-2">Auction item #1</p>
           <button
             className="uk-btn uk-btn-sm uk-btn-primary mb-1 rounded-[1998px] hover:uk-btn-primary+1 active:uk-btn-primary+2 min-w-[180px]"
             type="button"
@@ -141,7 +141,7 @@ export default function AuctionRoom() {
           </button>
 
           {currentBid ? (
-            <div className="bg-gray-100 p-2 rounded-lg mb-4">
+            <div className="bg-gray-100 dark:bg-gray-800 p-2 rounded-lg mb-4">
               <h2 className="text-sm font-bold mb-1">Current Bid</h2>
               <div className="flex justify-between items-center text-xs">
                 <span className="font-medium w-1/3 text-left">
@@ -183,7 +183,7 @@ export default function AuctionRoom() {
                     {bid.clientId}
                     {bid.clientId === currentClientId ? ' (You)' : ''}
                   </span>
-                  <span className="text-gray-600 w-1/3 text-center">
+                  <span className="text-gray-600 dark:text-gray-300 w-1/3 text-center">
                     {bid.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                   </span>
                   <span className="font-bold w-1/3 text-right">${bid.amount}</span>
@@ -208,7 +208,7 @@ export default function AuctionRoom() {
 
               <p className="uk-text-right">
                 <button
-                  className="uk-btn uk-btn-default uk-btn-sm mr-2 border rounded-[1998px] border-black bg-transparent text-black"
+                  className="uk-btn uk-btn-default uk-btn-sm mr-2 border rounded-[1998px] border-black dark:border-gray-600 bg-transparent text-black dark:text-white"
                   type="button"
                   uk-toggle="target: #bid-modal"
                 >
diff --git a/examples/pub-sub-history/react/src/Home.tsx b/examples/pub-sub-history/react/src/Home.tsx
index aba43c70d0..0a5d4e2b6b 100644
--- a/examples/pub-sub-history/react/src/Home.tsx
+++ b/examples/pub-sub-history/react/src/Home.tsx
@@ -38,8 +38,8 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100 uk-text-primary">
-      <div className="bg-white p-8 rounded-lg shadow-lg w-96 text-center">
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 uk-text-primary">
+      <div className="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-96 text-center">
         <h2 className="text-2xl mb-6">Welcome to the auction</h2>
         <p>Click the button below to add some historical bids.</p>
         <div className="inline-flex flex-col gap-4 items-center">
diff --git a/examples/pub-sub-history/react/src/styles/styles.css b/examples/pub-sub-history/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/pub-sub-history/react/src/styles/styles.css
+++ b/examples/pub-sub-history/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/pub-sub-message-annotations/javascript/index.html b/examples/pub-sub-message-annotations/javascript/index.html
index 9dccae7e19..f4eaaf3797 100644
--- a/examples/pub-sub-message-annotations/javascript/index.html
+++ b/examples/pub-sub-message-annotations/javascript/index.html
@@ -13,7 +13,7 @@
   <div class="flex justify-center items-start min-h-screen p-4 uk-text-primary">
     <div class="w-full max-w-screen-sm mt-5 flex flex-col space-y-4">
       <div class="flex space-x-2">
-        <input id="message-input" placeholder="Publish a message" class="uk-input uk-width-1-1 uk-border-rounded-left h-10 border rounded-md px-3 bg-white" type="text" value="">
+        <input id="message-input" placeholder="Publish a message" class="uk-input uk-width-1-1 uk-border-rounded-left h-10 border rounded-md px-3 bg-white dark:bg-gray-900" type="text" value="">
         <button id="publish-button" class="uk-btn uk-btn-sm uk-btn-primary mb-1 rounded-md hover:uk-btn-primary+1 active:uk-btn-primary+2 h-10">Publish</button>
       </div>
       <div id="messages"></div>
diff --git a/examples/pub-sub-message-annotations/javascript/src/components/annotations.ts b/examples/pub-sub-message-annotations/javascript/src/components/annotations.ts
index 7283aa2d00..7d1b464780 100644
--- a/examples/pub-sub-message-annotations/javascript/src/components/annotations.ts
+++ b/examples/pub-sub-message-annotations/javascript/src/components/annotations.ts
@@ -27,7 +27,7 @@ function createAnnotationItem(annotation: Annotation) {
   const { color, label } = findAnnotationType(typeKey);
 
   const item = document.createElement('div');
-  item.className = `pl-3 pr-2 py-2 border-l-4 border-l-${color}-500 border-y border-r border-gray-200 bg-white shadow-sm flex flex-wrap items-center`;
+  item.className = `pl-3 pr-2 py-2 border-l-4 border-l-${color}-500 border-y border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm flex flex-wrap items-center`;
   item.setAttribute('data-id', annotation.id);
   item.setAttribute('data-timestamp', annotation.timestamp.toString());
   item.setAttribute('data-serial', annotation.messageSerial);
@@ -41,12 +41,12 @@ function createAnnotationItem(annotation: Annotation) {
   leftContent.className = 'flex items-center gap-2 min-w-0 flex-grow';
 
   const typeLabel = document.createElement('span');
-  typeLabel.className = `text-sm font-medium text-${color}-800`;
+  typeLabel.className = `text-sm font-medium text-${color}-800 dark:text-${color}-200`;
   typeLabel.textContent = label;
   leftContent.appendChild(typeLabel);
 
   const valueContent = document.createElement('span');
-  valueContent.className = 'text-sm text-gray-700 overflow-hidden text-ellipsis';
+  valueContent.className = 'text-sm text-gray-700 dark:text-gray-300 overflow-hidden text-ellipsis';
   valueContent.textContent = annotation.name || 'unknown';
   leftContent.appendChild(valueContent);
 
@@ -86,7 +86,7 @@ function createAnnotationItem(annotation: Annotation) {
   rightContent.appendChild(clientBadge);
 
   const timestamp = document.createElement('div');
-  timestamp.className = 'text-xs text-gray-500';
+  timestamp.className = 'text-xs text-gray-500 dark:text-gray-400';
   timestamp.textContent = formatTimestamp(annotation.timestamp);
   rightContent.appendChild(timestamp);
 
@@ -106,7 +106,7 @@ export function createAnnotationsListElement(messageSerial: string) {
   annotationsList.setAttribute('data-message-serial', messageSerial);
 
   const emptyState = document.createElement('div');
-  emptyState.className = 'text-center p-2 text-gray-500 text-sm';
+  emptyState.className = 'text-center p-2 text-gray-500 dark:text-gray-400 text-sm';
   emptyState.textContent = 'No annotations received yet.';
   emptyState.id = `annotations-empty-${messageSerial}`;
 
diff --git a/examples/pub-sub-message-annotations/javascript/src/components/details.ts b/examples/pub-sub-message-annotations/javascript/src/components/details.ts
index 104987c9b3..47ffc88597 100644
--- a/examples/pub-sub-message-annotations/javascript/src/components/details.ts
+++ b/examples/pub-sub-message-annotations/javascript/src/components/details.ts
@@ -6,17 +6,17 @@ import { createAnnotationsListElement } from './annotations';
 
 export function createPublishAnnotationElement(message: MessageWithSerial) {
   const publisher = document.createElement('div');
-  publisher.className = 'p-2 border-b border-gray-200 bg-gray-50';
+  publisher.className = 'p-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900';
   publisher.innerHTML = `
     <div class="flex items-center gap-1.5">
-      <select class="uk-select uk-form-sm w-24 flex-none bg-white border rounded-md">
+      <select class="uk-select uk-form-sm w-24 flex-none bg-white dark:bg-gray-900 border rounded-md">
         <option>total.v1</option>
         <option>distinct.v1</option>
         <option>unique.v1</option>
         <option>multiple.v1</option>
         <option>flag.v1</option>
       </select>
-      <input placeholder="Annotate message" class="uk-input uk-form-sm border rounded-md bg-white flex-grow" type="text">
+      <input placeholder="Annotate message" class="uk-input uk-form-sm border rounded-md bg-white dark:bg-gray-900 flex-grow" type="text">
       <button class="uk-btn uk-btn-primary uk-btn-sm rounded-md flex-none">Publish</button>
     </div>
   `;
@@ -116,7 +116,7 @@ export function createMessageDetailsElement(message: MessageWithSerial) {
 
 export function createDetailsPane(message: MessageWithSerial) {
   const detailsPane = document.createElement('div');
-  detailsPane.className = 'border-b border-l border-r border-gray-200 rounded-b-md overflow-hidden bg-white shadow-sm';
+  detailsPane.className = 'border-b border-l border-r border-gray-200 dark:border-gray-700 rounded-b-md overflow-hidden bg-white dark:bg-gray-900 shadow-sm';
   detailsPane.id = `details-${message.id}`;
 
   const messageDetails = createMessageDetailsElement(message);
diff --git a/examples/pub-sub-message-annotations/javascript/src/components/message.ts b/examples/pub-sub-message-annotations/javascript/src/components/message.ts
index cab5dd7af5..cc2f22b590 100644
--- a/examples/pub-sub-message-annotations/javascript/src/components/message.ts
+++ b/examples/pub-sub-message-annotations/javascript/src/components/message.ts
@@ -17,7 +17,7 @@ export function createMessageElement(message: MessageWithSerial) {
 
   // Main message element that can be clicked to expand
   const messageElement = document.createElement('div');
-  messageElement.className = `px-3 py-2 border-t border-l border-r border-gray-200 rounded-t-md bg-white shadow-sm cursor-pointer`;
+  messageElement.className = `px-3 py-2 border-t border-l border-r border-gray-200 dark:border-gray-700 rounded-t-md bg-white dark:bg-gray-900 shadow-sm cursor-pointer`;
   messageElement.id = `message-${message.id}`;
 
   // First row: message text (left aligned) and dropdown arrow (right aligned)
@@ -25,7 +25,7 @@ export function createMessageElement(message: MessageWithSerial) {
   firstRow.className = 'flex justify-between items-center w-full';
 
   const messageContent = document.createElement('div');
-  messageContent.className = 'flex-grow text-sm font-medium text-gray-700 overflow-hidden text-ellipsis';
+  messageContent.className = 'flex-grow text-sm font-medium text-gray-700 dark:text-gray-300 overflow-hidden text-ellipsis';
   messageContent.textContent = message.data;
   firstRow.appendChild(messageContent);
 
@@ -44,7 +44,7 @@ export function createMessageElement(message: MessageWithSerial) {
   clientBadge.classList.add('shrink-0');
 
   const timestamp = document.createElement('div');
-  timestamp.className = 'text-xs text-gray-500';
+  timestamp.className = 'text-xs text-gray-500 dark:text-gray-400';
   timestamp.textContent = formatTimestamp(message.timestamp || Date.now());
 
   secondRow.appendChild(clientBadge);
diff --git a/examples/pub-sub-message-annotations/javascript/src/components/summary.ts b/examples/pub-sub-message-annotations/javascript/src/components/summary.ts
index 00066e2cc8..513a4f3841 100644
--- a/examples/pub-sub-message-annotations/javascript/src/components/summary.ts
+++ b/examples/pub-sub-message-annotations/javascript/src/components/summary.ts
@@ -14,7 +14,7 @@ import { getAnnotationTypeKey } from './annotations';
 
 function createEmptyAnnotationSummaryContentElement() {
   const emptyState = document.createElement('div');
-  emptyState.className = 'text-center py-2 text-gray-500 text-sm';
+  emptyState.className = 'text-center py-2 text-gray-500 dark:text-gray-400 text-sm';
   emptyState.textContent = 'Publish an annotation to view summaries.';
   return emptyState;
 }
@@ -34,7 +34,7 @@ function createLabelContainer(label: string, color: string) {
   container.className = 'flex items-center';
 
   const labelSpan = document.createElement('span');
-  labelSpan.className = `text-sm font-medium text-${color}-800`;
+  labelSpan.className = `text-sm font-medium text-${color}-800 dark:text-${color}-200`;
   labelSpan.textContent = label;
 
   container.appendChild(labelSpan);
@@ -45,7 +45,7 @@ function createSectionHeader(key: string, entry: Ably.SummaryEntry) {
   const typeKey = getAnnotationTypeKey(key);
   const { color, label } = findAnnotationType(typeKey);
   const sectionHeader = document.createElement('div');
-  sectionHeader.className = `border-l-4 border-l-${color}-500 border-t border-r border-gray-200 bg-white shadow-sm px-3 py-1.5 ${typeKey === 'total.v1' ? '' : 'cursor-pointer'}`;
+  sectionHeader.className = `border-l-4 border-l-${color}-500 border-t border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm px-3 py-1.5 ${typeKey === 'total.v1' ? '' : 'cursor-pointer'}`;
 
   const wrapper = document.createElement('div');
   wrapper.className = 'flex justify-between items-center';
@@ -66,7 +66,7 @@ function createSectionHeader(key: string, entry: Ably.SummaryEntry) {
     labelContainer.appendChild(createCountBadge(count, color));
 
     const valueLabel = document.createElement('span');
-    valueLabel.className = `ml-1 text-xs text-gray-600`;
+    valueLabel.className = `ml-1 text-xs text-gray-600 dark:text-gray-300`;
     labelContainer.appendChild(valueLabel);
 
     wrapper.appendChild(labelContainer);
@@ -79,7 +79,7 @@ function createSectionHeader(key: string, entry: Ably.SummaryEntry) {
 
 function createFlagCard(entry: Ably.SummaryClientIdList, color: string) {
   const card = document.createElement('div');
-  card.className = 'p-3 bg-white flex items-center gap-2';
+  card.className = 'p-3 bg-white dark:bg-gray-900 flex items-center gap-2';
 
   // Add empty spacer for alignment
   const spacer = document.createElement('span');
@@ -101,11 +101,11 @@ function createFlagCard(entry: Ably.SummaryClientIdList, color: string) {
 
 function createDistinctUniqueCard(value: string, entry: Ably.SummaryClientIdList, color: string) {
   const card = document.createElement('div');
-  card.className = 'p-3 bg-white flex items-center gap-2';
+  card.className = 'p-3 bg-white dark:bg-gray-900 flex items-center gap-2';
 
   // Add value text
   const valueContent = document.createElement('span');
-  valueContent.className = 'text-sm text-gray-700 flex-shrink-0 mr-auto';
+  valueContent.className = 'text-sm text-gray-700 dark:text-gray-300 flex-shrink-0 mr-auto';
   valueContent.textContent = value;
   card.appendChild(valueContent);
 
@@ -124,11 +124,11 @@ function createDistinctUniqueCard(value: string, entry: Ably.SummaryClientIdList
 
 function createMultipleCard(value: string, entry: Ably.SummaryMultipleValues[string], color: string) {
   const card = document.createElement('div');
-  card.className = 'p-3 bg-white flex items-center gap-2';
+  card.className = 'p-3 bg-white dark:bg-gray-900 flex items-center gap-2';
 
   // Add value text
   const valueContent = document.createElement('span');
-  valueContent.className = 'text-sm text-gray-700 flex-shrink-0 mr-auto';
+  valueContent.className = 'text-sm text-gray-700 dark:text-gray-300 flex-shrink-0 mr-auto';
   valueContent.textContent = value;
   card.appendChild(valueContent);
 
@@ -156,7 +156,7 @@ function createSectionContent(fullTypeKey: string, entry: Ably.SummaryEntry) {
   const typeKey = getAnnotationTypeKey(fullTypeKey);
   const { color } = findAnnotationType(typeKey);
   const sectionContent = document.createElement('div');
-  sectionContent.className = `overflow-hidden border-l-4 border-l-${color}-500 border-b border-r border-gray-200`;
+  sectionContent.className = `overflow-hidden border-l-4 border-l-${color}-500 border-b border-r border-gray-200 dark:border-gray-700`;
 
   if (typeKey === 'flag.v1') {
     const card = createFlagCard(entry as Ably.SummaryClientIdList, color);
@@ -167,7 +167,7 @@ function createSectionContent(fullTypeKey: string, entry: Ably.SummaryEntry) {
       const [value, info] = entryData;
       const card = createDistinctUniqueCard(value, info, color);
       if (index < entries.length - 1) {
-        card.classList.add('border-b', 'border-gray-100');
+        card.classList.add('border-b', 'border-gray-100', 'dark:border-gray-700');
       }
       sectionContent.appendChild(card);
     });
@@ -177,7 +177,7 @@ function createSectionContent(fullTypeKey: string, entry: Ably.SummaryEntry) {
       const [value, info] = entryData;
       const card = createMultipleCard(value, info, color);
       if (index < entries.length - 1) {
-        card.classList.add('border-b', 'border-gray-100');
+        card.classList.add('border-b', 'border-gray-100', 'dark:border-gray-700');
       }
       sectionContent.appendChild(card);
     });
diff --git a/examples/pub-sub-message-annotations/javascript/src/styles.css b/examples/pub-sub-message-annotations/javascript/src/styles.css
index 562e9ac776..da6e6287c9 100644
--- a/examples/pub-sub-message-annotations/javascript/src/styles.css
+++ b/examples/pub-sub-message-annotations/javascript/src/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 .inner {
   width: 100%;
   max-width: 320px;
diff --git a/examples/pub-sub-message-encryption/javascript/index.html b/examples/pub-sub-message-encryption/javascript/index.html
index c99f196112..edb945158f 100644
--- a/examples/pub-sub-message-encryption/javascript/index.html
+++ b/examples/pub-sub-message-encryption/javascript/index.html
@@ -15,7 +15,7 @@ <h2 id="title" class="text-lg font-bold text-center mb-2">Client without an encr
           <input id="message-input" placeholder="Enter your message" class="uk-input uk-width-1-1 uk-border-rounded-left h-10" type="text" value="">
           <button id="publish-button" class="uk-btn uk-btn-sm uk-btn-primary mb-1 rounded-[1998px] hover:uk-btn-primary+1 active:uk-btn-primary+2 h-10">Publish</button>
         </div>
-        <div class="h-full border rounded-lg overflow-y-auto bg-white shadow-lg">
+        <div class="h-full border rounded-lg overflow-y-auto bg-white dark:bg-gray-900 shadow-lg">
           <div id="messages" class="p-4 space-y-2">
           </div>
         </div>
diff --git a/examples/pub-sub-message-encryption/react/src/App.tsx b/examples/pub-sub-message-encryption/react/src/App.tsx
index f82a97380c..a186bc3899 100644
--- a/examples/pub-sub-message-encryption/react/src/App.tsx
+++ b/examples/pub-sub-message-encryption/react/src/App.tsx
@@ -50,10 +50,10 @@ function EncodedMessages() {
           </button>
         </div>
 
-        <div className="h-full border rounded-lg overflow-y-auto bg-white shadow-lg">
+        <div className="h-full border rounded-lg overflow-y-auto bg-white dark:bg-gray-900 shadow-lg">
           <div className="p-4 space-y-2">
             {messages.map((msg, index) => (
-              <div key={index} className="p-3 bg-gray-50 rounded-lg flex items-center gap-2">
+              <div key={index} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg flex items-center gap-2">
                 <span>{msg}</span>
               </div>
             ))}
@@ -101,10 +101,10 @@ function DecodedMessages() {
           </button>
         </div>
 
-        <div className="h-full border rounded-lg overflow-y-auto bg-white shadow-lg">
+        <div className="h-full border rounded-lg overflow-y-auto bg-white dark:bg-gray-900 shadow-lg">
           <div className="p-4 space-y-2">
             {messages.map((msg, index) => (
-              <div key={index} className="p-3 bg-gray-50 rounded-lg flex items-center gap-2">
+              <div key={index} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg flex items-center gap-2">
                 <span>{msg.data}</span>
               </div>
             ))}
diff --git a/examples/pub-sub-occupancy/javascript/index.html b/examples/pub-sub-occupancy/javascript/index.html
index 1e2796d16e..fda901869b 100644
--- a/examples/pub-sub-occupancy/javascript/index.html
+++ b/examples/pub-sub-occupancy/javascript/index.html
@@ -11,7 +11,7 @@
 
 <body class="font-inter">
   <div class="flex justify-center items-center min-h-screen relative uk-text-primary">
-    <div class="h-[320px] bg-gray-200 flex items-center justify-center relative">
+    <div class="h-[320px] bg-gray-200 dark:bg-gray-700 flex items-center justify-center relative">
       <video src="https://cdn.ably.com/chat/basket_ball_international.mov" preload="auto" autoplay="" muted="" loop=""
         class="max-w-full max-h-full object-contain"></video>
       <div class="absolute bottom-4 right-4 flex items-center bg-black/50 text-white px-3 py-2 rounded-full">
diff --git a/examples/pub-sub-occupancy/javascript/src/styles.css b/examples/pub-sub-occupancy/javascript/src/styles.css
index 94b4f84544..32d359adfa 100644
--- a/examples/pub-sub-occupancy/javascript/src/styles.css
+++ b/examples/pub-sub-occupancy/javascript/src/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 .uk-text-primary {
   color: hsl(var(--primary));
 }
diff --git a/examples/pub-sub-occupancy/react/src/App.tsx b/examples/pub-sub-occupancy/react/src/App.tsx
index 8bacee4da9..cccba11f3d 100644
--- a/examples/pub-sub-occupancy/react/src/App.tsx
+++ b/examples/pub-sub-occupancy/react/src/App.tsx
@@ -23,7 +23,7 @@ function Stream() {
 
   return (
     <div className="flex justify-center items-center min-h-screen relative uk-text-primary">
-      <div className="h-[320px] bg-gray-200 flex items-center justify-center relative">
+      <div className="h-[320px] bg-gray-200 dark:bg-gray-700 flex items-center justify-center relative">
         <video
           src="https://cdn.ably.com/chat/basket_ball_international.mov"
           preload="auto"
diff --git a/examples/pub-sub-presence/javascript/index.html b/examples/pub-sub-presence/javascript/index.html
index 7a1bbbbb5e..5fb8d3fa80 100644
--- a/examples/pub-sub-presence/javascript/index.html
+++ b/examples/pub-sub-presence/javascript/index.html
@@ -8,7 +8,7 @@
   </head>
   <body class="font-inter">
     <div class="min-h-screen p-8 uk-text-primary">
-      <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+      <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
         <ul id="active-users" class="space-y-2"></ul>
         <div class="flex mt-8 space-x-2">
           <input
diff --git a/examples/pub-sub-presence/javascript/src/script.ts b/examples/pub-sub-presence/javascript/src/script.ts
index c1bd655b76..8a784764c6 100644
--- a/examples/pub-sub-presence/javascript/src/script.ts
+++ b/examples/pub-sub-presence/javascript/src/script.ts
@@ -49,7 +49,7 @@ async function addPresenceEntry(clientId: string, status: string) {
   const clientIdSpan = document.createElement('span');
   clientIdSpan.innerText = clientId + (clientId === client.auth.clientId ? ' (You)' : '');
   const statusSpan = document.createElement('span');
-  statusSpan.className = 'italic text-sm text-gray-500';
+  statusSpan.className = 'italic text-sm text-gray-500 dark:text-gray-400';
   statusSpan.innerText = status;
 
   statusDiv.appendChild(clientIdSpan);
diff --git a/examples/pub-sub-presence/react/src/App.tsx b/examples/pub-sub-presence/react/src/App.tsx
index 46b0916042..7193916aff 100644
--- a/examples/pub-sub-presence/react/src/App.tsx
+++ b/examples/pub-sub-presence/react/src/App.tsx
@@ -19,7 +19,7 @@ function PresenceList() {
 
   return (
     <div className="min-h-screen p-8 uk-text-primary">
-      <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+      <div className="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
         <div className="space-y-2">
           {presenceData.map((viewer) => (
             <li key={viewer.clientId} className="flex items-center justify-between p-2 border-b">
@@ -28,7 +28,7 @@ function PresenceList() {
                   {viewer.clientId}
                   {viewer.clientId === currentClientId ? ' (You)' : ''}{' '}
                 </span>
-                <span className="italic text-sm text-gray-500">{viewer.data}</span>
+                <span className="italic text-sm text-gray-500 dark:text-gray-400">{viewer.data}</span>
               </div>
             </li>
           ))}
diff --git a/examples/pub-sub-presence/react/src/styles/styles.css b/examples/pub-sub-presence/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/pub-sub-presence/react/src/styles/styles.css
+++ b/examples/pub-sub-presence/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/pub-sub-rewind/javascript/index.html b/examples/pub-sub-rewind/javascript/index.html
index fd836f768a..00edad565c 100644
--- a/examples/pub-sub-rewind/javascript/index.html
+++ b/examples/pub-sub-rewind/javascript/index.html
@@ -8,8 +8,8 @@
     <title>Pub/Sub rewind channel</title>
   </head>
   <body class="font-inter">
-    <div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100 uk-text-primary">
-      <div class="bg-white p-8 rounded-lg shadow-lg w-96">
+    <div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 uk-text-primary">
+      <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-96">
         <h2 class="text-2xl mb-6 text-center">Live odds</h2>
         <p class="text-sm text-center">Simulate 4 betting odds for a sports game before attaching.</p>
         <div class="flex flex-col gap-2 mt-4">
@@ -19,9 +19,9 @@ <h2 class="text-2xl mb-6 text-center">Live odds</h2>
         </div>
       </div>
     </div>
-    <div id="game" class="min-h-screen bg-gray-100 p-4 uk-text-primary" style="display: none;">
+    <div id="game" class="min-h-screen bg-gray-100 dark:bg-gray-800 p-4 uk-text-primary" style="display: none;">
       <div class="max-w-sm mx-auto">
-        <div class="bg-white rounded shadow p-3 mb-4">
+        <div class="bg-white dark:bg-gray-900 rounded shadow p-3 mb-4">
           <div class="flex justify-between items-center text-sm font-semibold">
             <span>
               <span class="hidden sm:inline">Royal Knights</span>
@@ -35,20 +35,20 @@ <h2 class="text-2xl mb-6 text-center">Live odds</h2>
           </div>
         </div>
         <div class="grid grid-cols-3 gap-2 mb-4">
-          <div class="bg-white rounded shadow p-2">
+          <div class="bg-white dark:bg-gray-900 rounded shadow p-2">
             <h3 class="text-xs font-medium mb-1">Home Win</h3>
             <p id="current-home" class="text-lg font-bold text-green-600">2.50</p>
           </div>
-          <div class="bg-white rounded shadow p-2">
+          <div class="bg-white dark:bg-gray-900 rounded shadow p-2">
             <h3 class="text-xs font-medium mb-1">Draw</h3>
             <p id="current-draw" class="text-lg font-bold text-blue-600">3.42</p>
           </div>
-          <div class="bg-white rounded shadow p-2">
+          <div class="bg-white dark:bg-gray-900 rounded shadow p-2">
             <h3 class="text-xs font-medium mb-1">Away Win</h3>
             <p id="current-away" class="text-lg font-bold text-red-600">2.87</p>
           </div>
         </div>
-        <div class="bg-white rounded shadow p-3">
+        <div class="bg-white dark:bg-gray-900 rounded shadow p-3">
           <h2 class="text-sm font-bold mb-2">Odds history</h2>
           <div id="history" class="space-y-2">
           </div>
diff --git a/examples/pub-sub-rewind/javascript/src/script.ts b/examples/pub-sub-rewind/javascript/src/script.ts
index 5d476bd9a1..c91ed73e15 100644
--- a/examples/pub-sub-rewind/javascript/src/script.ts
+++ b/examples/pub-sub-rewind/javascript/src/script.ts
@@ -119,7 +119,7 @@ async function addHistoryItem(message: Message, position = 'prepend') {
   historyItem.id = `history-item-${message.id}`;
   historyItem.className = 'border-b pb-2';
   const historyDiv = document.createElement('div');
-  historyDiv.className = 'flex justify-between text-sm text-gray-600';
+  historyDiv.className = 'flex justify-between text-sm text-gray-600 dark:text-gray-300';
   historyItem.appendChild(historyDiv);
 
   const homeWin = document.createElement('span');
diff --git a/examples/pub-sub-rewind/react/src/Home.tsx b/examples/pub-sub-rewind/react/src/Home.tsx
index 997408ddb1..32a58d8fed 100644
--- a/examples/pub-sub-rewind/react/src/Home.tsx
+++ b/examples/pub-sub-rewind/react/src/Home.tsx
@@ -67,8 +67,8 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100 uk-text-primary">
-      <div className="bg-white p-8 rounded-lg shadow-lg w-96">
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 uk-text-primary">
+      <div className="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg w-96">
         <h2 className="text-2xl mb-6 text-center">Live odds</h2>
         <p>Simulate 4 betting odds for a sports game before attaching.</p>
         <div className="flex flex-col gap-4">
diff --git a/examples/pub-sub-rewind/react/src/Odds.tsx b/examples/pub-sub-rewind/react/src/Odds.tsx
index 771cd5e7de..88ae2f8416 100644
--- a/examples/pub-sub-rewind/react/src/Odds.tsx
+++ b/examples/pub-sub-rewind/react/src/Odds.tsx
@@ -88,11 +88,11 @@ function LiveMatch({ channelName }: { channelName: string }) {
   }, [matchData, channel]);
 
   return (
-    <div className="min-h-screen bg-gray-100 p-4">
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
       <div className="max-w-sm mx-auto">
         {matchData && (
           <>
-            <div className="bg-white rounded shadow p-3 mb-4">
+            <div className="bg-white dark:bg-gray-900 rounded shadow p-3 mb-4">
               <div className="flex justify-between items-center text-sm font-semibold">
                 <span>
                   <span className="hidden sm:inline">{matchData.match.homeTeam}</span>
@@ -113,19 +113,19 @@ function LiveMatch({ channelName }: { channelName: string }) {
             </div>
 
             <div className="grid grid-cols-3 gap-2 mb-4">
-              <div className="bg-white rounded shadow p-2">
+              <div className="bg-white dark:bg-gray-900 rounded shadow p-2">
                 <h3 className="text-xs font-medium mb-1">Home win</h3>
                 <p className="text-lg font-bold text-green-600">
                   {matchData.match.matchOdds.homeWin}
                 </p>
               </div>
-              <div className="bg-white rounded shadow p-2">
+              <div className="bg-white dark:bg-gray-900 rounded shadow p-2">
                 <h3 className="text-xs font-medium mb-1">Draw</h3>
                 <p className="text-lg font-bold text-blue-600">
                   {matchData.match.matchOdds.draw}
                 </p>
               </div>
-              <div className="bg-white rounded shadow p-2">
+              <div className="bg-white dark:bg-gray-900 rounded shadow p-2">
                 <h3 className="text-xs font-medium mb-1">Away win</h3>
                 <p className="text-lg font-bold text-red-600">
                   {matchData.match.matchOdds.awayWin}
@@ -133,12 +133,12 @@ function LiveMatch({ channelName }: { channelName: string }) {
               </div>
             </div>
 
-            <div className="bg-white rounded shadow p-3">
+            <div className="bg-white dark:bg-gray-900 rounded shadow p-3">
               <h2 className="text-sm font-bold mb-2">Odds history</h2>
               <div className="space-y-2">
                 {oddsHistory.map((odds, index) => (
                   <div key={index} className="border-b pb-1">
-                    <div className="flex justify-between text-xs text-gray-600">
+                    <div className="flex justify-between text-xs text-gray-600 dark:text-gray-300">
                       <span>Home: {odds.match.matchOdds.homeWin}</span>
                       <span>Draw: {odds.match.matchOdds.draw}</span>
                       <span>Away: {odds.match.matchOdds.awayWin}</span>
diff --git a/examples/spaces-avatar-stack/javascript/src/script.ts b/examples/spaces-avatar-stack/javascript/src/script.ts
index 590d571f12..a4baf046e8 100644
--- a/examples/spaces-avatar-stack/javascript/src/script.ts
+++ b/examples/spaces-avatar-stack/javascript/src/script.ts
@@ -123,7 +123,7 @@ async function renderAvatar(member: Member, isSelf: boolean = false): Promise<vo
       'absolute left-0 bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-[200px]';
 
     const popupCard = document.createElement('div');
-    popupCard.className = 'uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white';
+    popupCard.className = 'uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white dark:bg-gray-800';
 
     const userInfo = buildUserInfo(member, isSelf);
 
diff --git a/examples/spaces-avatar-stack/react/src/components/Avatar.tsx b/examples/spaces-avatar-stack/react/src/components/Avatar.tsx
index 157a5d5f98..5fa1b13483 100644
--- a/examples/spaces-avatar-stack/react/src/components/Avatar.tsx
+++ b/examples/spaces-avatar-stack/react/src/components/Avatar.tsx
@@ -15,7 +15,7 @@ const UserInfo: FunctionComponent<{ user: Member; isSelf?: boolean }> = ({ user,
 
   return (
     <div className="absolute left-0 bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-[200px]">
-      <div className="uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white">
+      <div className="uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white dark:bg-gray-800">
         <div className="flex items-center space-x-2">
           <div
             style={{
@@ -59,7 +59,7 @@ export function Avatar({ user, isSelf }: { user: Member; isSelf: boolean }) {
 
       {/* Single popup container */}
       <div className="absolute left-0 bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-[200px]">
-        <div className="uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white">
+        <div className="uk-card uk-card-default uk-card-body p-2 rounded shadow-lg bg-white dark:bg-gray-800">
           <div className="flex items-center space-x-2">
             <div
               style={{
diff --git a/examples/spaces-avatar-stack/react/src/styles/styles.css b/examples/spaces-avatar-stack/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/spaces-avatar-stack/react/src/styles/styles.css
+++ b/examples/spaces-avatar-stack/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/spaces-component-locking/javascript/src/script.ts b/examples/spaces-component-locking/javascript/src/script.ts
index 920d663af2..862d22d12a 100644
--- a/examples/spaces-component-locking/javascript/src/script.ts
+++ b/examples/spaces-component-locking/javascript/src/script.ts
@@ -62,17 +62,17 @@ function buildForm() {
     inputCellContainer.className = 'flex flex-col space-y-2';
 
     const entryLabel = document.createElement('label');
-    entryLabel.className = 'text-sm font-medium text-gray-700';
+    entryLabel.className = 'text-sm font-medium text-gray-700 dark:text-gray-300';
     entryLabel.setAttribute('for', entry.name);
     entryLabel.textContent = entry.label;
 
     const inputContainer = document.createElement('div');
-    inputContainer.className = 'relative rounded-md border border-gray-300 shadow-sm';
+    inputContainer.className = 'relative rounded-md border border-gray-300 dark:border-gray-700 shadow-sm';
 
     const formInput = document.createElement('input');
     formInput.id = entry.name;
     formInput.className =
-      'uk-input w-full p-3 rounded-md transition-colors duration-200 bg-white hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+      'uk-input w-full p-3 rounded-md transition-colors duration-200 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
     formInput.placeholder = 'Click to lock and edit me';
     formInput.name = entry.name;
     formInput.onfocus = handleFocus;
@@ -149,7 +149,7 @@ async function updateComponent(componentUpdate: Lock) {
     lockedDiv.className = 'absolute top-2 right-2 flex items-center space-x-2';
     lockedDiv.innerHTML = `
       <span class="text-sm font-medium" style="color: ${memberColor}">${memberName}</span>
-      ${!lockedByYou ? createLockedFieldSvg('w-4 h-4 text-gray-500').outerHTML : ''}
+      ${!lockedByYou ? createLockedFieldSvg('w-4 h-4 text-gray-500 dark:text-gray-400').outerHTML : ''}
     `;
     inputContainer?.appendChild(lockedDiv);
 
@@ -157,7 +157,7 @@ async function updateComponent(componentUpdate: Lock) {
     inputElement.setAttribute('data-locked', 'true');
 
     if (readOnly) {
-      inputElement.classList.add('cursor-not-allowed', 'bg-gray-50');
+      inputElement.classList.add('cursor-not-allowed', 'bg-gray-50', 'dark:bg-gray-900');
       inputElement.disabled = true;
     }
   } else {
@@ -168,7 +168,7 @@ async function updateComponent(componentUpdate: Lock) {
 
     inputElement.removeAttribute('data-locked');
     inputElement.style.backgroundColor = '';
-    inputElement.classList.remove('cursor-not-allowed', 'bg-gray-50');
+    inputElement.classList.remove('cursor-not-allowed', 'bg-gray-50', 'dark:bg-gray-900');
     inputElement.disabled = false;
   }
 }
diff --git a/examples/spaces-component-locking/react/src/components/InputCell.tsx b/examples/spaces-component-locking/react/src/components/InputCell.tsx
index 2b63273a63..812e77b844 100644
--- a/examples/spaces-component-locking/react/src/components/InputCell.tsx
+++ b/examples/spaces-component-locking/react/src/components/InputCell.tsx
@@ -44,11 +44,11 @@ export function InputCell({
 
   return (
     <div ref={ref} className="flex flex-col space-y-2">
-      <label htmlFor={name} className="text-sm font-medium text-gray-700">
+      <label htmlFor={name} className="text-sm font-medium text-gray-700 dark:text-gray-300">
         {label}
       </label>
       <div
-        className="relative rounded-md border border-gray-300 shadow-sm"
+        className="relative rounded-md border border-gray-300 dark:border-gray-700 shadow-sm"
         style={{ backgroundColor: memberColor ? `${memberColor}10` : 'transparent' }}
       >
         {memberName && (
@@ -57,7 +57,7 @@ export function InputCell({
               {memberName}
             </span>
             {!lockedByYou && (
-              <LockedFieldSvg className="w-4 h-4 text-gray-500" />
+              <LockedFieldSvg className="w-4 h-4 text-gray-500 dark:text-gray-400" />
             )}
           </div>
         )}
@@ -71,12 +71,12 @@ export function InputCell({
           placeholder="Click to lock and edit me"
           className={`uk-input w-full p-3 rounded-md transition-colors duration-200 ${
             !lockHolder
-              ? 'bg-white hover:bg-gray-50'
+              ? 'bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-900'
               : 'bg-opacity-10'
           } ${
             !readOnly
               ? 'cursor-text focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
-              : 'cursor-not-allowed bg-gray-50'
+              : 'cursor-not-allowed bg-gray-50 dark:bg-gray-900'
           }`}
         />
       </div>
diff --git a/examples/spaces-component-locking/react/src/styles/styles.css b/examples/spaces-component-locking/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/spaces-component-locking/react/src/styles/styles.css
+++ b/examples/spaces-component-locking/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/spaces-live-cursors/javascript/index.html b/examples/spaces-live-cursors/javascript/index.html
index ff005910c7..12b9ee5d73 100644
--- a/examples/spaces-live-cursors/javascript/index.html
+++ b/examples/spaces-live-cursors/javascript/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <div id="app">
-    <div id="live-cursors" class="uk-container min-h-screen flex items-center justify-center bg-gray-50 relative uk-text-primary">
+    <div id="live-cursors" class="uk-container min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 relative uk-text-primary">
       <p class="uk-text-lead text-center absolute top-8 left-1/2 transform -translate-x-1/2">
         Move your cursor over the screen to see live cursors in action
       </p>
diff --git a/examples/spaces-live-cursors/react/src/App.tsx b/examples/spaces-live-cursors/react/src/App.tsx
index 0677c01b63..90a6ca4d29 100644
--- a/examples/spaces-live-cursors/react/src/App.tsx
+++ b/examples/spaces-live-cursors/react/src/App.tsx
@@ -41,7 +41,7 @@ function LiveCursorsDemo() {
     <div
       id="live-cursors"
       ref={liveCursors}
-      className="uk-container min-h-screen flex items-center justify-center bg-gray-50 relative uk-text-primary"
+      className="uk-container min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 relative uk-text-primary"
     >
       <p className="uk-text-lead text-center absolute top-8 left-1/2 transform -translate-x-1/2">
         Move your cursor over the screen to see live cursors in action
diff --git a/examples/spaces-live-cursors/react/src/styles/styles.css b/examples/spaces-live-cursors/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/spaces-live-cursors/react/src/styles/styles.css
+++ b/examples/spaces-live-cursors/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;
diff --git a/examples/spaces-member-location/javascript/index.html b/examples/spaces-member-location/javascript/index.html
index 3b6fd354f9..4dac473654 100644
--- a/examples/spaces-member-location/javascript/index.html
+++ b/examples/spaces-member-location/javascript/index.html
@@ -9,7 +9,7 @@
 <body>
   <div id="app">
     <div id="member-location" class="uk-container uk-padding uk-text-primary">
-      <table class="uk-table uk-table-bordered uk-table-divider uk-table-middle border-collapse border-2 border-gray-300">
+      <table class="uk-table uk-table-bordered uk-table-divider uk-table-middle border-collapse border-2 border-gray-300 dark:border-gray-700">
         <tbody id='sheet-body'></tbody>
       </table>
     </div>
diff --git a/examples/spaces-member-location/javascript/src/script.ts b/examples/spaces-member-location/javascript/src/script.ts
index 22a6d3bc5e..704f143f5d 100644
--- a/examples/spaces-member-location/javascript/src/script.ts
+++ b/examples/spaces-member-location/javascript/src/script.ts
@@ -92,10 +92,10 @@ function buildCell(value: string, rowIndex: number, colIndex: number, cellMember
   const cellTd = document.createElement('td');
   cellTd.setAttribute('key', `${rowIndex}-${colIndex}`);
 
-  cellTd.className = `uk-table-middle border border-gray-300 p-2 cursor-pointer transition-colors relative
-    ${selfInCell ? 'bg-white' : 'bg-gray-50'}
+  cellTd.className = `uk-table-middle border border-gray-300 dark:border-gray-700 p-2 cursor-pointer transition-colors relative
+    ${selfInCell ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-900'}
     ${cellMembers.length > 0 && !selfInCell ? 'uk-box-shadow-small' : ''}
-    hover:bg-gray-100`;
+    hover:bg-gray-100 dark:hover:bg-gray-800`;
 
   cellTd.addEventListener('click', () => handleClick(rowIndex, colIndex));
   cellTd.textContent = value;
@@ -118,7 +118,7 @@ async function buildSpreadsheet(otherMembers: Member[], self: Member) {
     sheetRow.className = 'uk-table-middle';
 
     const sheetTd = document.createElement('td');
-    sheetTd.className = 'uk-text-bold uk-text-center uk-background-muted border border-gray-300 p-2';
+    sheetTd.className = 'uk-text-bold uk-text-center uk-background-muted border border-gray-300 dark:border-gray-700 p-2';
     sheetTd.textContent = (rowIndex + 1).toString();
     sheetRow.appendChild(sheetTd);
 
diff --git a/examples/spaces-member-location/react/src/components/Cell.tsx b/examples/spaces-member-location/react/src/components/Cell.tsx
index 10f7a39f44..8e4f2412cb 100644
--- a/examples/spaces-member-location/react/src/components/Cell.tsx
+++ b/examples/spaces-member-location/react/src/components/Cell.tsx
@@ -53,10 +53,10 @@ function Cell({
         "--member-color": self?.profileData.memberColor,
         "--cell-member-color": cellMembers[0]?.profileData.memberColor,
       } as React.CSSProperties}
-      className={`uk-table-middle border border-gray-300 p-2 cursor-pointer transition-colors relative
-        ${selfInCell ? 'bg-white' : 'bg-gray-50'}
+      className={`uk-table-middle border border-gray-300 dark:border-gray-700 p-2 cursor-pointer transition-colors relative
+        ${selfInCell ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-900'}
         ${cellMembers.length > 0 && !selfInCell ? 'uk-box-shadow-small' : ''}
-        hover:bg-gray-100`}
+        hover:bg-gray-100 dark:hover:bg-gray-800`}
       onClick={() => handleClick(rowIndex, colIndex)}
       data-name-content={memberName ? cellLabel : ""}
     >
diff --git a/examples/spaces-member-location/react/src/components/Spreadsheet.tsx b/examples/spaces-member-location/react/src/components/Spreadsheet.tsx
index 713a510168..b5ef390d2b 100644
--- a/examples/spaces-member-location/react/src/components/Spreadsheet.tsx
+++ b/examples/spaces-member-location/react/src/components/Spreadsheet.tsx
@@ -32,11 +32,11 @@ const Spreadsheet = ({
   };
 
   return (
-    <table className="uk-table uk-table-bordered uk-table-divider uk-table-middle border-collapse border-2 border-gray-300 uk-text-primary">
+    <table className="uk-table uk-table-bordered uk-table-divider uk-table-middle border-collapse border-2 border-gray-300 dark:border-gray-700 uk-text-primary">
       <tbody>
         {cellData.map((row: string[], rowIndex: number) => (
           <tr key={rowIndex} className="uk-table-middle">
-            <td key={rowIndex} className="uk-text-bold uk-text-center uk-background-muted border border-gray-300 p-2">
+            <td key={rowIndex} className="uk-text-bold uk-text-center uk-background-muted border border-gray-300 dark:border-gray-700 p-2">
               {rowIndex + 1}
             </td>
             {row.map((col, colIndex) => {
diff --git a/examples/spaces-member-location/react/src/styles/styles.css b/examples/spaces-member-location/react/src/styles/styles.css
index 9dd5977c56..c59ac476cf 100644
--- a/examples/spaces-member-location/react/src/styles/styles.css
+++ b/examples/spaces-member-location/react/src/styles/styles.css
@@ -69,6 +69,10 @@
   height: 100vh;
 }
 
+.dark .container {
+  background-color: hsl(var(--background));
+}
+
 input {
   padding: 0.5rem;
   width: 100%;

From eeb928b38005e46b02de0d7a9cf2f5830f516cd2 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 17 Jul 2026 13:42:07 +0100
Subject: [PATCH 2/2] feat(examples): follow the docs theme in Sandpack example
 previews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the runnable /examples previews (Vite subprojects surfaced via Sandpack)
track the docs light/dark theme:
- Inject a hidden module into each example that bakes in the current theme
  (adds `.dark`, sets Tailwind darkMode:'class'); the files are regenerated per
  theme, so a theme change reloads the preview to match — no fragile
  cross-iframe messaging.
- Key the SandpackProvider on the resolved theme so a change fully reloads the
  preview on a fresh iframe, rather than a hot reload that stacks extra example
  instances.
- Paint the preview on the dark canvas from the first frame (head-injected
  background + color-scheme) and give the Sandpack preview container a dark
  background, so there's no white flash on load or language switch.
- Dark variants for the example-page README tables.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/CodeEditor/CodeEditor.css     |   7 ++
 src/components/Examples/ExamplesRenderer.tsx |  17 ++-
 src/components/Examples/sandpackThemeSync.ts | 116 +++++++++++++++++++
 src/templates/examples.tsx                   |  16 ++-
 4 files changed, 151 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Examples/sandpackThemeSync.ts

diff --git a/src/components/CodeEditor/CodeEditor.css b/src/components/CodeEditor/CodeEditor.css
index e4ebedd567..b6e80800be 100644
--- a/src/components/CodeEditor/CodeEditor.css
+++ b/src/components/CodeEditor/CodeEditor.css
@@ -5,4 +5,11 @@
 
 div.remove-border-radius {
   border-radius: 0;
+}
+
+/* Sandpack renders the preview on a fixed white "browser" surface. In dark mode
+   that shows as a white panel around/behind the themed example, so flip it to
+   the dark canvas (neutral-1300, the inverse of white). */
+.ui-theme-dark .sp-preview-container {
+  background-color: var(--color-neutral-1300);
 }
\ No newline at end of file
diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
index 33a4a2c135..586d670d35 100644
--- a/src/components/Examples/ExamplesRenderer.tsx
+++ b/src/components/Examples/ExamplesRenderer.tsx
@@ -10,6 +10,7 @@ import Icon from 'src/components/Icon';
 import { IconName } from 'src/components/Icon/types';
 import SegmentedControl from 'src/components/ui/SegmentedControl';
 import dotGrid from './images/dot-grid.svg';
+import { withThemeSync } from './sandpackThemeSync';
 import cn from 'src/utilities/cn';
 import { getRandomChannelName } from '../../utilities/get-random-channel-name';
 // Shared tsconfig for proper ES2020+ transpilation in Sandpack
@@ -97,6 +98,15 @@ const ExamplesRenderer = ({
   }, [files, apiKey]);
 
   const languageFiles = rewrittenFiles[activeLanguage];
+  // Bake the current theme into the example files. Combined with the keyed
+  // SandpackProvider below, a theme change fully reloads the preview into the
+  // matching theme — a full reload (not an in-place hot reload) so the example's
+  // side effects, e.g. its Ably connection, are torn down rather than stacking
+  // up a fresh instance on each toggle.
+  const themedFiles = useMemo(
+    () => withThemeSync(languageFiles, activeLanguage, resolvedTheme),
+    [languageFiles, activeLanguage, resolvedTheme],
+  );
 
   const isVerticalLayout = useMemo(() => layout === 'single-vertical' || layout === 'double-vertical', [layout]);
   const isDoubleLayout = useMemo(() => layout === 'double-horizontal' || layout === 'double-vertical', [layout]);
@@ -105,8 +115,13 @@ const ExamplesRenderer = ({
 
   return (
     <SandpackProvider
+      // Remount (a full preview reload) when the theme changes so the baked
+      // theme takes effect on a fresh iframe. Keyed on resolvedTheme (not the
+      // mount-gated editorTheme) so it's stable across mount and doesn't force
+      // an extra reload on first load for dark-mode readers.
+      key={resolvedTheme}
       files={{
-        ...languageFiles,
+        ...themedFiles,
         '/tsconfig.json': { code: SANDPACK_TSCONFIG, hidden: true },
       }}
       customSetup={{
diff --git a/src/components/Examples/sandpackThemeSync.ts b/src/components/Examples/sandpackThemeSync.ts
new file mode 100644
index 0000000000..eb3365b860
--- /dev/null
+++ b/src/components/Examples/sandpackThemeSync.ts
@@ -0,0 +1,116 @@
+import { LanguageKey } from 'src/data/languages/types';
+import { ExampleFiles } from 'src/data/examples/types';
+
+// Applies the docs host theme to a Sandpack example preview by baking the theme
+// into the example's files. When the docs theme changes, ExamplesRenderer
+// regenerates these files with the new value and Sandpack reloads the preview
+// so it renders in the matching theme.
+//
+// This is deliberately simpler and more robust than live cross-iframe
+// messaging: no postMessage, no handshake, no polling, no timing window — the
+// theme is fixed at file-generation time, at the cost of a short reload when the
+// theme changes.
+
+const THEME_SYNC_FILE = 'ably-theme-sync.js';
+
+// The side-effect module baked into each example; `isDark` is fixed when the
+// files are generated.
+const themeSyncModule = (
+  isDark: boolean,
+): string => `// Injected by the docs site — applies the docs theme to this preview.
+(function () {
+  if (typeof window === 'undefined') return;
+  // Class-based dark mode so Tailwind \`dark:\` utilities follow the class rather
+  // than the OS preference (the Play CDN defaults to media).
+  window.tailwind = window.tailwind || {};
+  window.tailwind.config = Object.assign({}, window.tailwind.config, { darkMode: 'class' });
+
+  document.documentElement.classList.toggle('dark', ${isDark});
+  document.documentElement.style.colorScheme = ${isDark ? "'dark'" : "'light'"};
+
+  // The examples' --primary token is identical in light and dark, so
+  // uk-text-primary (used for body text) would stay a low-contrast mid-slate on
+  // dark. Remap it to the foreground token in dark; scoped to .dark so light is
+  // untouched.
+  var fixes = document.createElement('style');
+  fixes.textContent = '.dark .uk-text-primary{color:hsl(var(--foreground))}';
+  (document.head || document.documentElement).appendChild(fixes);
+})();
+`;
+
+// Entry module per template (see data/createPages: react files are stripped of
+// their `src/` prefix, javascript files keep their project-relative path). Match
+// on a pattern so both `index.tsx` and `main.tsx` entries (and any `src/`-prefixed
+// variant) are found.
+const ENTRY_PATTERN_BY_LANGUAGE: Partial<Record<LanguageKey, RegExp>> = {
+  react: /(^|\/)(index|main)\.tsx$/,
+  javascript: /(^|\/)script\.ts$/,
+};
+
+// Sandpack accepts either a raw code string or a { code, hidden } object per
+// file (the renderer already relies on this for the injected tsconfig).
+type SandpackFilesMap = Record<string, string | { code: string; hidden?: boolean }>;
+
+const codeOf = (file: string | { code?: string }): string => (typeof file === 'string' ? file : (file.code ?? ''));
+
+/**
+ * Return a copy of an example's files with the theme baked in: a hidden module
+ * (imported from the entry) applies the current theme on load, and the HTML head
+ * gets the class-based dark-mode config ahead of the Tailwind CDN. Regenerated
+ * per theme, so the preview reloads to match when the docs theme changes.
+ */
+export const withThemeSync = (
+  files: ExampleFiles[LanguageKey],
+  language: LanguageKey,
+  resolvedTheme: 'light' | 'dark',
+): SandpackFilesMap | undefined => {
+  if (!files) {
+    return files;
+  }
+
+  const isDark = resolvedTheme === 'dark';
+  const result = { ...files } as SandpackFilesMap;
+
+  // Add the theme module in the entry's directory and import it, so a relative
+  // `./` import resolves in both templates (react's entry is at the root; the
+  // javascript entry lives under src/).
+  const entryPattern = ENTRY_PATTERN_BY_LANGUAGE[language];
+  const entryKey = entryPattern ? Object.keys(result).find((key) => entryPattern.test(key)) : undefined;
+  if (entryKey) {
+    const slash = entryKey.lastIndexOf('/');
+    const entryDir = slash >= 0 ? entryKey.slice(0, slash + 1) : '';
+    result[`${entryDir}${THEME_SYNC_FILE}`] = { code: themeSyncModule(isDark), hidden: true };
+
+    const importLine = `import './${THEME_SYNC_FILE}';\n`;
+    const original = result[entryKey];
+    const code = codeOf(original);
+    if (!code.includes(THEME_SYNC_FILE)) {
+      result[entryKey] =
+        typeof original === 'string' ? importLine + original : { ...(original as object), code: importLine + code };
+    }
+  }
+
+  // Set up the theme in the HTML <head>, ahead of the Tailwind Play CDN and the
+  // bundle, so `dark:` utilities key off the class and — crucially — the page
+  // paints on the dark canvas from the very first frame. Without this the iframe
+  // shows a white flash before the JS entry runs, which is visible on the slower
+  // re-bundle that a language switch triggers.
+  const htmlKey =
+    'index.html' in result ? 'index.html' : Object.keys(result).find((key) => key.replace(/^\//, '') === 'index.html');
+  if (htmlKey) {
+    const html = codeOf(result[htmlKey]);
+    if (!html.includes('darkMode')) {
+      const headTag =
+        `<script>window.tailwind=window.tailwind||{};window.tailwind.config=Object.assign({},window.tailwind.config,{darkMode:'class'});` +
+        `${isDark ? "document.documentElement.classList.add('dark');" : ''}</script>` +
+        `${isDark ? '<style>html{background-color:#03020d;color-scheme:dark}</style>' : ''}`;
+      const injected = html.includes('<head>')
+        ? html.replace('<head>', `<head>\n    ${headTag}`)
+        : `${headTag}\n${html}`;
+      const originalHtml = result[htmlKey];
+      result[htmlKey] = typeof originalHtml === 'string' ? injected : { ...(originalHtml as object), code: injected };
+    }
+  }
+
+  return result;
+};
diff --git a/src/templates/examples.tsx b/src/templates/examples.tsx
index bcb678c929..0900bd249c 100644
--- a/src/templates/examples.tsx
+++ b/src/templates/examples.tsx
@@ -61,19 +61,27 @@ const MarkdownOverrides = {
     ),
   },
   thead: {
-    component: ({ children }: PropsWithChildren) => <thead className="bg-gray-50 border-b">{children}</thead>,
+    component: ({ children }: PropsWithChildren) => (
+      <thead className="bg-gray-50 dark:bg-neutral-1200 border-b dark:border-neutral-1100">{children}</thead>
+    ),
   },
   tbody: {
-    component: ({ children }: PropsWithChildren) => <tbody className="border-b divide-neutral-300">{children}</tbody>,
+    component: ({ children }: PropsWithChildren) => (
+      <tbody className="border-b dark:border-neutral-1100 divide-neutral-300 dark:divide-neutral-1100">
+        {children}
+      </tbody>
+    ),
   },
   tr: {
     component: ({ children }: PropsWithChildren) => (
-      <tr className="hover:bg-gray-50 border-b divide-neutral-300">{children}</tr>
+      <tr className="hover:bg-gray-50 dark:hover:bg-neutral-1200 border-b dark:border-neutral-1100 divide-neutral-300 dark:divide-neutral-1100">
+        {children}
+      </tr>
     ),
   },
   th: {
     component: ({ children }: PropsWithChildren) => (
-      <th className="px-3 py-2 text-left ui-text-p1 font-bold text-neutral-1100 tracking-wider whitespace-nowrap">
+      <th className="px-3 py-2 text-left ui-text-p1 font-bold text-neutral-1100 dark:text-neutral-300 tracking-wider whitespace-nowrap">
         {children}
       </th>
     ),