Skip to content

docs: rework React theming — capture harness + tutorial example #3133

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

Merged
oliverlaz merged 3 commits into from
Apr 17, 2026
Merged

docs: rework React theming — capture harness + tutorial example #3133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7ecf787
docs(capture-harness): rework react theming screenshot pipeline
oliverlaz Apr 17, 2026
756ac6d
docs(examples/tutorial): sync with published v14 theming tokens
oliverlaz Apr 17, 2026
6d6988d
docs(examples/tutorial): fetch tokens from pronto.getstream.io
oliverlaz Apr 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
16 changes: 13 additions & 3 deletions examples/tutorial/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
# Required: your Stream app's public key.
VITE_API_KEY=REPLACE_WITH_API_KEY
VITE_USER_ID=REPLACE_WITH_USER_ID
VITE_USER_NAME=REPLACE_WITH_USER_NAME
VITE_USER_TOKEN=REPLACE_WITH_USER_TOKEN

# Optional. If unset, the app defaults to user_id "react-tutorial" and
# derives user_name from it. You can also override either value per-run
# via URL params: ?user_id=alice&user_name=Alice
# VITE_USER_ID=react-tutorial
# VITE_USER_NAME=React Tutorial

# Optional. Token endpoint used to mint a fresh JWT for the active
# user_id. Defaults to Stream's demo endpoint; override if you're
# pointing at a different Stream app / token service.
# VITE_TOKEN_ENDPOINT=https://pronto.getstream.io/api/auth/create-token
# VITE_TOKEN_ENVIRONMENT=demo
4 changes: 2 additions & 2 deletions examples/tutorial/src/1-client-setup/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Chat, useCreateChatClient } from 'stream-chat-react';
import { apiKey, userId, userName, userToken } from './credentials';
import { apiKey, userId, userName, tokenProvider } from './credentials';

const App = () => {
const client = useCreateChatClient({
apiKey,
tokenOrProvider: userToken,
tokenOrProvider: tokenProvider,
userData: { id: userId, name: userName },
});

Expand Down
48 changes: 44 additions & 4 deletions examples/tutorial/src/1-client-setup/credentials.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,45 @@
// your Stream app information
// Stream Chat credentials for the tutorial example.
//
// The example fetches a fresh JWT from pronto.getstream.io for whichever
// user_id is active, so the app stays runnable without pasting a token
// that expires, and you can switch users via URL params at runtime:
//
// ?user_id=alice // different user
// ?user_id=alice&user_name=Alice // + display name override
//
// Notes:
// - apiKey is the one thing you still need to set (via VITE_API_KEY).
// - The token endpoint and environment default to the values shared with
// the other example apps in this repo; override with VITE_TOKEN_ENDPOINT
// and VITE_TOKEN_ENVIRONMENT if you're pointing at a different Stream
// app.

const searchParams = new URLSearchParams(window.location.search);

export const apiKey = import.meta.env.VITE_API_KEY;
export const userId = import.meta.env.VITE_USER_ID;
export const userName = import.meta.env.VITE_USER_NAME;
export const userToken = import.meta.env.VITE_USER_TOKEN;

export const userId =
searchParams.get('user_id') || import.meta.env.VITE_USER_ID || 'react-tutorial';

export const userName =
searchParams.get('user_name') || import.meta.env.VITE_USER_NAME || userId;

const tokenEndpoint =
import.meta.env.VITE_TOKEN_ENDPOINT ||
'https://pronto.getstream.io/api/auth/create-token';
const tokenEnvironment = import.meta.env.VITE_TOKEN_ENVIRONMENT || 'demo';

// Stream's `useCreateChatClient` accepts either a token string or a provider
// function. A provider lets the SDK refresh the token on reconnect, which is
// what we want for a long-running example session.
export const tokenProvider = async (): Promise<string> => {
const url = `${tokenEndpoint}?environment=${encodeURIComponent(
tokenEnvironment,
)}&user_id=${encodeURIComponent(userId)}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to mint token from ${tokenEndpoint} (${response.status})`);
}
const data = (await response.json()) as { token: string };
return data.token;
};
4 changes: 2 additions & 2 deletions examples/tutorial/src/2-core-component-setup/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {

import 'stream-chat-react/dist/css/index.css';
import './layout.css';
import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';

const user: User = {
id: userId,
Expand All @@ -25,7 +25,7 @@ const App = () => {
const [channel, setChannel] = useState<StreamChannel>();
const client = useCreateChatClient({
apiKey,
tokenOrProvider: userToken,
tokenOrProvider: tokenProvider,
userData: user,
});

Expand Down
6 changes: 3 additions & 3 deletions examples/tutorial/src/3-channel-list/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from 'stream-chat-react';

import './layout.css';
import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';

const user: User = {
id: userId,
Expand All @@ -32,14 +32,14 @@ const options: ChannelOptions = {
const App = () => {
const client = useCreateChatClient({
apiKey,
tokenOrProvider: userToken,
tokenOrProvider: tokenProvider,
userData: user,
});

if (!client) return <div>Setting up client & connection...</div>;

return (
<Chat client={client} theme='str-chat__theme-custom'>
<Chat client={client} theme='custom-theme'>
<ChannelList filters={filters} sort={sort} options={options} />
<Channel>
<Window>
Expand Down
39 changes: 25 additions & 14 deletions examples/tutorial/src/3-channel-list/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,31 @@
@import 'stream-chat-react/dist/css/index.css' layer(stream);

@layer stream-overrides {
.str-chat__theme-custom {
--brand-50: #edf7f7;
--brand-100: #e0f2f1;
--brand-150: #b2dfdb;
--brand-200: #80cbc4;
--brand-300: #4db6ac;
--brand-400: #26a69a;
--brand-500: #009688;
--brand-600: #00897b;
--brand-700: #00796b;
--brand-800: #00695c;
--brand-900: #004d40;
--accent-primary: var(--brand-500);
--radius-full: 6px;
.custom-theme {
/* Accent */
--accent-primary: #0d47a1;

/* Message bubble colors */
--chat-bg-outgoing: #1e3a8a;
--chat-bg-attachment-outgoing: #0d47a1;
--chat-bg-incoming: #dbeafe;
--chat-text-outgoing: #ffffff;
--chat-reply-indicator-outgoing: #93c5fd;

/* Links */
--text-link: #1e40af;
--chat-text-link: #93c5fd;

/* Panel backgrounds */
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
--background-core-app: #c7dafc; /* message list background */

/* Focus ring */
--border-utility-focused: #1e40af;

/* Radii */
--radius-max: 8px;
--button-radius-full: 6px;
}
}

Expand Down
6 changes: 3 additions & 3 deletions examples/tutorial/src/4-custom-ui-components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
} from 'stream-chat-react';

import './layout.css';
import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';

const user: User = {
id: userId,
Expand Down Expand Up @@ -118,7 +118,7 @@ const App = () => {
const [isReady, setIsReady] = useState(false);
const client = useCreateChatClient({
apiKey,
tokenOrProvider: userToken,
tokenOrProvider: tokenProvider,
userData: user,
});

Expand Down Expand Up @@ -151,7 +151,7 @@ const App = () => {
Message: CustomMessage,
}}
>
<Chat client={client} theme='str-chat__theme-custom'>
<Chat client={client} theme='custom-theme'>
<ChannelList filters={filters} sort={sort} options={options} />
<Channel>
<Window>
Expand Down
39 changes: 25 additions & 14 deletions examples/tutorial/src/4-custom-ui-components/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,31 @@
@import 'stream-chat-react/dist/css/index.css' layer(stream);

@layer stream-overrides {
.str-chat__theme-custom {
--brand-50: #edf7f7;
--brand-100: #e0f2f1;
--brand-150: #b2dfdb;
--brand-200: #80cbc4;
--brand-300: #4db6ac;
--brand-400: #26a69a;
--brand-500: #009688;
--brand-600: #00897b;
--brand-700: #00796b;
--brand-800: #00695c;
--brand-900: #004d40;
--accent-primary: var(--brand-500);
--radius-full: 6px;
.custom-theme {
/* Accent */
--accent-primary: #0d47a1;

/* Message bubble colors */
--chat-bg-outgoing: #1e3a8a;
--chat-bg-attachment-outgoing: #0d47a1;
--chat-bg-incoming: #dbeafe;
--chat-text-outgoing: #ffffff;
--chat-reply-indicator-outgoing: #93c5fd;

/* Links */
--text-link: #1e40af;
--chat-text-link: #93c5fd;

/* Panel backgrounds */
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
--background-core-app: #c7dafc; /* message list background */

/* Focus ring */
--border-utility-focused: #1e40af;

/* Radii */
--radius-max: 8px;
--button-radius-full: 6px;
}
}

Expand Down
6 changes: 3 additions & 3 deletions examples/tutorial/src/5-custom-attachment-type/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from 'stream-chat-react';

import './layout.css';
import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';

const user: User = {
id: userId,
Expand Down Expand Up @@ -76,7 +76,7 @@ const App = () => {
const [channel, setChannel] = useState<StreamChannel>();
const client = useCreateChatClient({
apiKey,
tokenOrProvider: userToken,
tokenOrProvider: tokenProvider,
userData: user,
});

Expand Down Expand Up @@ -118,7 +118,7 @@ const App = () => {

return (
<WithComponents overrides={{ Attachment: CustomAttachment }}>
<Chat client={client} theme='str-chat__theme-custom'>
<Chat client={client} theme='custom-theme'>
<Channel channel={channel}>
<Window>
<ChannelHeader />
Expand Down
39 changes: 25 additions & 14 deletions examples/tutorial/src/5-custom-attachment-type/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,31 @@
@import 'stream-chat-react/dist/css/index.css' layer(stream);

@layer stream-overrides {
.str-chat__theme-custom {
--brand-50: #edf7f7;
--brand-100: #e0f2f1;
--brand-150: #b2dfdb;
--brand-200: #80cbc4;
--brand-300: #4db6ac;
--brand-400: #26a69a;
--brand-500: #009688;
--brand-600: #00897b;
--brand-700: #00796b;
--brand-800: #00695c;
--brand-900: #004d40;
--accent-primary: var(--brand-500);
--radius-full: 6px;
.custom-theme {
/* Accent */
--accent-primary: #0d47a1;

/* Message bubble colors */
--chat-bg-outgoing: #1e3a8a;
--chat-bg-attachment-outgoing: #0d47a1;
--chat-bg-incoming: #dbeafe;
--chat-text-outgoing: #ffffff;
--chat-reply-indicator-outgoing: #93c5fd;

/* Links */
--text-link: #1e40af;
--chat-text-link: #93c5fd;

/* Panel backgrounds */
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
--background-core-app: #c7dafc; /* message list background */

/* Focus ring */
--border-utility-focused: #1e40af;

/* Radii */
--radius-max: 8px;
--button-radius-full: 6px;
}
}

Expand Down
4 changes: 2 additions & 2 deletions examples/tutorial/src/6-emoji-picker/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { init, SearchIndex } from 'emoji-mart';
import data from '@emoji-mart/data';

import './layout.css';
import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';

const user: User = {
id: userId,
Expand All @@ -38,7 +38,7 @@ const App = () => {
const [isReady, setIsReady] = useState(false);
const client = useCreateChatClient({
apiKey,
tokenOrProvider: userToken,
tokenOrProvider: tokenProvider,
userData: user,
});

Expand Down
39 changes: 25 additions & 14 deletions examples/tutorial/src/6-emoji-picker/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,31 @@
@import 'stream-chat-react/dist/css/index.css' layer(stream);

@layer stream-overrides {
.str-chat__theme-custom {
--brand-50: #edf7f7;
--brand-100: #e0f2f1;
--brand-150: #b2dfdb;
--brand-200: #80cbc4;
--brand-300: #4db6ac;
--brand-400: #26a69a;
--brand-500: #009688;
--brand-600: #00897b;
--brand-700: #00796b;
--brand-800: #00695c;
--brand-900: #004d40;
--accent-primary: var(--brand-500);
--radius-full: 6px;
.custom-theme {
/* Accent */
--accent-primary: #0d47a1;

/* Message bubble colors */
--chat-bg-outgoing: #1e3a8a;
--chat-bg-attachment-outgoing: #0d47a1;
--chat-bg-incoming: #dbeafe;
--chat-text-outgoing: #ffffff;
--chat-reply-indicator-outgoing: #93c5fd;

/* Links */
--text-link: #1e40af;
--chat-text-link: #93c5fd;

/* Panel backgrounds */
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
--background-core-app: #c7dafc; /* message list background */

/* Focus ring */
--border-utility-focused: #1e40af;

/* Radii */
--radius-max: 8px;
--button-radius-full: 6px;
}
}

Expand Down
4 changes: 2 additions & 2 deletions examples/tutorial/src/7-livestream/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
} from 'stream-chat-react';

import './layout.css';
import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';

const user: User = {
id: userId,
Expand All @@ -23,7 +23,7 @@ const App = () => {
const [channel, setChannel] = useState<StreamChannel>();
const chatClient = useCreateChatClient({
apiKey,
tokenOrProvider: userToken,
tokenOrProvider: tokenProvider,
userData: user,
});

Expand Down
Loading
Loading