Theme

Overview

When using some of our SuperViz SDK components, modals, and user texts may appear, and while we intend to create a good design experience for the user, you may want to customize the color scheme to create your own theme according to your brand’s design system.

How to customize it

When initializing the room, you can pass a customColors object, of the type ColorsVariables, as a parameter. Here's an example of how to create a dark theme using the customColors object:

import SuperVizRoom from "@superviz/sdk";

const myTheme = {
  'sv-primary-900': '16 29 70',
  'sv-primary-200': '141 164 239',
  'sv-primary': '58 92 204',
  'sv-gray-800': '250 250 252',
  'sv-gray-700': '233 229 239',
  'sv-gray-600': '201 196 209',
  'sv-gray-500': '174 169 184',
  'sv-gray-400': '126 122 136',
  'sv-gray-300': '87 83 95',
  'sv-gray-200': '57 54 62',
  'sv-gray-100': '38 36 42',
}

const room = await SuperVizRoom(DEVELOPER_KEY, {
  customColors: myTheme 
});

room.addComponent(video);

ColorsVariables type definition

The object is based on the ColorsVariable type. It enables you to specify the color variable you wish to modify as the key, and its corresponding RGB color as the value (three numbers between 0 and 255, all separated by a space).

The SDK will then utilize these custom colors in place of the default ones. Here are the possible keys within the type, along with their default colors

Name	Type	Description
'sv-primary'	string	The primary color, represented with RGB value. Default value: rgb(98 16 204)
'sv-primary-900'	string	The RGB color code for this shade of the primary color. Default value: rgb(56 7 136)
'sv-primary-200'	string	The RGB color code for this shade of the primary color. Default value: rgb(193 161 234)
'sv-secondary'	string	The RGB color code for this shade of gray. Default value: rgb(193 251 223)
'sv-gray'	string	The RGB color code for this shade of gray. Default value: rgb(126 122 136)
'sv-success'	string	This color is used to indicate success. We recommend using shades from the green palette, represented with RGB value. Default value: rgb(12 185 71)
'sv-danger'	string	This color is used to indicate danger. We recommend using shades from the red palette, represented with RGB value. Default value: rgb(229 65 30)
'sv-black'	string	The RGB color code for this shade of gray. Default value: rgb(19 18 21)
'sv-white'	string	The RGB color code for this shade of gray. Default value: rgb(255 255 255)
'sv-gray-100'	string	The RGB color code for this shade of gray. We use this color as the background for the modals. Default value: rgb(250 250 252)
'sv-gray-200'	string	The RGB color code for this shade of gray. We use it as a secondary background color, overlaying the lighter gray background, creating visual depth and contrast in modals. Default value: rgb(233 229 239)
'sv-gray-300'	string	The RGB color code for this shade of gray. Default value: rgb(201 196 209)
'sv-gray-400'	string	The RGB color code for this shade of gray. Default value: rgb(174 169 184)
'sv-gray-500'	string	The RGB color code for this shade of gray. Default value: rgb(126 122 136)
'sv-gray-600'	string	The RGB color code for this shade of gray. We use this color for general texts on top of our background. Default value: rgb(87 83 95)
'sv-gray-700'	string	The RGB color code for this shade of gray. We use this color for titles. Default value: rgb(57 54 62)
'sv-gray-800'	string	The RGB color code for this shade of gray. Default value: rgb(38 36 42)

tip

Please note that modifying these color variables might affect the overall look and feel of the SDK components, so it's important to choose colors that complement each other well.