Skip to content

[DX-1518] feat: dark mode for /examples (Sandpack previews) #3473

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jamiehenson wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[DX-1518] feat: dark mode for /examples (Sandpack previews) #3473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5168e7b
feat(examples): add dark-mode styling to the example subprojects
jamiehenson Jul 17, 2026
eeb928b
feat(examples): follow the docs theme in Sandpack example previews
jamiehenson Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions examples/ai-transport-message-per-response/javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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>
Expand All @@ -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"

@AndyTWF AndyTWF Jul 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example looks... wrong on the demo site compared to prod. I can't see any buttons and it appears to have lost its structure?

@jamiehenson jamiehenson Jul 17, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Believable, I haven't scrutinised this. Will tell the bot to do better.

>
What is Ably AI Transport?
</button>
Expand Down
10 changes: 5 additions & 5 deletions examples/ai-transport-message-per-response/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
Expand All @@ -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?
Expand Down
8 changes: 4 additions & 4 deletions examples/ai-transport-message-per-token/javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions examples/ai-transport-message-per-token/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
Expand All @@ -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?
Expand Down
4 changes: 2 additions & 2 deletions examples/auth-generate-jwt/javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions examples/auth-generate-jwt/javascript/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
8 changes: 4 additions & 4 deletions examples/auth-generate-jwt/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 9 additions & 0 deletions examples/auth-generate-jwt/react/src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
4 changes: 2 additions & 2 deletions examples/auth-request-token/javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions examples/auth-request-token/javascript/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
8 changes: 4 additions & 4 deletions examples/auth-request-token/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 9 additions & 0 deletions examples/auth-request-token/react/src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
2 changes: 1 addition & 1 deletion examples/chat-presence/javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/chat-presence/javascript/src/script.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions examples/chat-presence/javascript/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@
height: 100vh;
}

.dark .container {
background-color: hsl(var(--background));
}

.away-button {
margin-top: 1rem;
padding: 0.5rem 1rem;
Expand Down
4 changes: 2 additions & 2 deletions examples/chat-presence/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ${
Expand Down
4 changes: 4 additions & 0 deletions examples/chat-presence/react/src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@
height: 100vh;
}

.dark .container {
background-color: hsl(var(--background));
}

input {
padding: 0.5rem;
width: 100%;
Expand Down
10 changes: 5 additions & 5 deletions examples/chat-room-history/javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -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 />
Expand Down
6 changes: 3 additions & 3 deletions examples/chat-room-history/javascript/src/script.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
}

Expand Down Expand Up @@ -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';
}
};

Expand Down Expand Up @@ -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);
}
Expand Down
6 changes: 3 additions & 3 deletions examples/chat-room-history/react/src/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
});
};
Expand All @@ -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
Expand All @@ -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"
Expand Down
Loading