How To Customize Colors and Fonts in the QuickBlox React UI Kit

To customize the QuickBlox React UI Kit, update the color variables in _theme_colors_scheme.scss and the typography variables in _variables.scss, then restart or rebuild your React application. This lets you match the chat interface to your brand without rewriting the UI Kit components.

In this tutorial, you’ll use a purple color palette and Garamond typography as an example. You can replace these values with your own brand colors and fonts.

Prerequisites

Before you begin, you’ll need:

• A QuickBlox account and application
• A working React application using the QuickBlox React UI Kit
• Node.js and npm
• A code editor
• Basic familiarity with React and SCSS

This tutorial assumes that you have already installed and configured the React UI Kit. For instructions on creating the initial application, see How to Create a React Chat App with the QuickBlox UI Kit.

What Can You Customize?

The QuickBlox React UI Kit provides prebuilt chat components that can be styled to match your application.

The theme settings apply across UI elements such as:

• The dialog list
• Message history
• Dialog information
• Participant lists
• Private and group dialog forms
• Buttons, labels and other interface controls
• Light and dark themes

The theme files used in this tutorial are located in the src/styles directory of the React UI Kit Demo App:

src/styles/_theme_colors_scheme.scss

src/styles/_theme_light.scss

src/styles/_theme_dark.scss

src/styles/_variables.scss
 

Use _theme_colors_scheme.scss to customize the color palette. The _theme_light.scss and _theme_dark.scss files define how these colors are applied to the light and dark themes, while _variables.scss includes both theme definitions.

These files are part of the Demo App source code, not node_modules, and are not generated during setup — you can modify them directly, and your changes won’t be overwritten when package dependencies are reinstalled.

Open the React UI Kit Sample Application

You can follow this tutorial using an existing application built with the QuickBlox React UI Kit or the official QuickBlox React UI Kit Demo App.

The current Demo App is available in the QuickBlox JavaScript SDK repository:

https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/react-chat-ui-kit-demo-app

To run the Demo App locally, first clone the QuickBlox JavaScript SDK repository:

git clone https://github.com/QuickBlox/quickblox-javascript-sdk.git

The Demo App is maintained in the gh-pages branch, so switch to this branch:

cd quickblox-javascript-sdk

git checkout gh-pages 

Then navigate to the React UI Kit Demo App directory:

cd samples/react-chat-ui-kit-demo-app

Install the required dependencies:

npm install

Before starting the application, add your QuickBlox application credentials to:

samples/react-chat-ui-kit-demo-app/src/QBconfig.ts

Configure the required QuickBlox credentials in this file for your application.

After the configuration is complete, start the development server:

npm start

The current React UI Kit Demo App uses npm start to launch the Webpack development server.

Open the local URL displayed in your terminal and make sure the chat application is running correctly before proceeding with the theme customization.

Locate the Theme Files

Open the React UI Kit Demo App in your code editor and navigate to:

samples/react-chat-ui-kit-demo-app/src/styles/

The Demo App includes the following theme files:

• _theme_colors_scheme.scss
• _variables.scss
• _theme_light.scss
• _theme_dark.scss

For this tutorial, we will primarily work with:

• _theme_colors_scheme.scss — contains the color tokens used by the Demo App.
• _variables.scss — contains typography variables that control font families, sizes, weights and line heights.

These files are part of the React UI Kit Demo App source code. They are not located inside node_modules, so you can modify them directly without your changes being overwritten when package dependencies are reinstalled.

Customize the React UI Kit Color Scheme

Open:

_theme_colors_scheme.scss

The color scheme file contains variables for:

• Primary colors
• Secondary colors
• Light and dark themes
• Backgrounds and dividers
• Text colors
• Overlays
• Success states
• Error states
• Information and highlight colors

For this example, replace the existing palette with the following purple theme:

// Purple Light Theme

$qb-light-primary: #9B5DE5;

$qb-light-color-background: #FDF2FF;

$qb-light-color-divider: #EAD6FF;

$qb-light-color-font: #3E155A;

 

// Purple Dark Theme

$qb-dark-primary: #5F259F;

$qb-dark-color-background: #432C6E;

$qb-dark-color-divider: #FDF2FF;

$qb-dark-color-font: #9B5DE5;

 

// Background Overlays

$background-overlay-light: rgba(155, 93, 229, 0.80);

$background-overlay-dark: rgba(95, 37, 159, 0.80);

 

// Primary Palette

$primary-50: #F2E6FF;

$primary-100: #E0CCFF;

$primary-200: #CEB3FF;

$primary-300: #BB99FF;

$primary-400: #A87FFF;

$primary-500: #9B5DE5;

$primary-600: #8B4CC7;

$primary-700: #7B3BA9;

$primary-800: #6B2A8B;

$primary-900: #5B196D;

$primary-a-100: #FDF2FF;

$primary-a-200: #F4E6FF;

$primary-a-400: #EAD6FF;

$primary-a-700: #E0CCFF;

 

// Secondary Palette

$secondary-50: #ECE2F0;

$secondary-100: #D9C4E1;

$secondary-200: #C5A5D2;

$secondary-300: #B187C3;

$secondary-400: #9E68B4;

$secondary-500: #8B4CC7;

$secondary-600: #7F44B0;

$secondary-700: #733C99;

$secondary-800: #673482;

$secondary-900: #53286B;

$secondary-a-100: #BB99FF;

$secondary-a-200: #9B5DE5;

$secondary-a-400: #6B2A8B;

$secondary-a-700: #5F259F;

 

// Success Colors

$system-green-100: #C8F1D6;

$system-green-200: #A4E7BB;

$system-green-300: #80DDA0;

$system-green-400: #64D68B;

$system-green-500: #49CF77;

 

// Error Colors

$error-100: #FFC4C1;

$error-200: #FF9D98;

$error-300: #FF766E;

$error-400: #FF584F;

$error-500: #FF3B30;

 

// Information and Highlight Colors

$information: #C17AFF;

$highlight: #F4E1FF;

 

Save the file after making your changes.

You don’t have to use the example palette exactly. Replace the values with colors from your own design system while retaining the existing variable names.

The numbered values, such as $primary-50 through $primary-900, represent different shades of the same color family. The a-100 through a-700 values provide additional palette variations. The light and dark themes use different subsets of these values — not every token is referenced by the current UI Kit — but we recommend keeping the complete set of variables when creating your custom palette to preserve the existing palette structure.

Customize the React UI Kit Font Family

To change the font used by the React UI Kit, create a custom theme based on DefaultTheme and override the fontFamily() method.

For example, to use Garamond:

import { DefaultTheme } from 'quickblox-react-ui-kit';

 

class CustomTheme extends DefaultTheme {

  fontFamily = (): string => 'Garamond, serif';

}
 

Apply the custom theme to the UI Kit components where you want to use the new font.

Replace Garamond with the font used by your application. If you use a custom web font, make sure it is loaded before applying the theme.

Preview Your Theme Changes

After saving your theme changes, restart the development server if the updates do not appear automatically:

npm start

Open the application and review the main areas of the interface, including:

• Dialog list
• Message list
• Message composer
• Buttons and icons
• Dialog information
• User and participant lists
• Private and group dialog forms

The Demo App includes styles for both light and dark themes in _theme_light.scss and _theme_dark.scss. However, it does not provide a built-in UI switch for changing between these themes at runtime.

To preview both themes, apply the corresponding theme configuration in the application and verify the interface separately with each theme.

Check that text remains readable and that interactive elements are easy to identify in both themes.

Preview Components in Storybook

The QuickBlox React UI Kit provides a Storybook where you can view and interact with individual UI components and their different states.

You can access the current React UI Kit Storybook here:

https://quickblox.github.io/react-ui-kit/?path=/docs/%F0%9F%93%95-documentation-introduction–docs

Storybook provides an interactive environment for reviewing UI Kit components without navigating through the complete application. You can use it to inspect components, compare their states and see how individual interface elements behave.

Keep Your Theme Maintainable

Keep your custom theme consistent with the existing React UI Kit theme structure. When updating colors or typography:

• Keep the existing variable names and theme structure.
• Test your changes in both light and dark themes.
• Check that text, buttons and other UI elements have sufficient contrast.
• Keep your theme files in your application source code and under source control.
• Do not customize the UI Kit by modifying files inside node_modules.

In the React UI Kit Demo App used in this tutorial, the theme files are already located in src/styles and can be modified directly — no separate override import is required.

_theme_light.scss and _theme_dark.scss use the color variables from _theme_colors_scheme.scss:

@use 'theme_colors_scheme' as *;

Both theme files are then included in _variables.scss:

@use "theme_light";

@use "theme_dark";

When following this tutorial, developers can update the existing theme files directly without changing the current import order.

Next Steps

You’ve successfully customized your React chat interface with a branded theme. Use these resources to continue working with the React UI Kit:

• QuickBlox React UI Kit documentation — installation, configuration and customization guidance
• QuickBlox React UI Kit on GitHub — source code and sample application
• QuickBlox JavaScript SDK quick start — implementation guides and API reference
• QuickBlox Developer Discord Community — ask questions and connect with other developers
• QuickBlox Support — get help with technical configuration