Themes

You can change the color scheme of Catalyst to your tastes by using the theme prop. The theme prop accepts two arguments, a string named theme (of which there are several built-in options), or a CatalystTheme object in the following format:

xxxxxxxxxx

export interface CatalystTheme {

  primary?: string; // "theme" (logo, accent) color

  secondary?: string; // background color

  tertiary?: string; // button/element color

  quaternary?: string; // hover button/element color

  quinary?: string; // text color

}

By passing a theme in this format, you can easily customize the color scheme of Catalyst as much or as little as you like.

Built-in Themes

Catalyst has several built-in themes. These include the following:

• default
• light
• dark
• night
• sepia
• solarized

In the below example, the dark theme has been selected:

xxxxxxxxxx

    <CatalystChat

            room="ROOM_NAME"

            appId="YOUR_CATALYST_PROJECT_ID"

            name="MEMBER_NAME"

            theme="dark"

            onEndCall={() => console.log('Call ended!')}

        />

We also have built-in themes for one of our initial users, Hours:

• hoursLight
• hoursDark

If you would like us to create custom themes for your company or project, feel free to contact us.

Custom Themes

In the below example, a custom theme has been set:

xxxxxxxxxx

    <CatalystChat

            room="ROOM_NAME"

            appId="YOUR_CATALYST_PROJECT_ID"

            name="MEMBER_NAME"

            theme={{

                primary: '#11c1e8',

                secondary: '#374151',

                tertiary: '#4B5563',

                quaternary: '#6B7280',

                quinary: '#FFF',

            }}

            onEndCall={() => console.log('Call ended!')}

        />

AutoFade

Catalyst fades the navbar and toolbar in and out based on user inactivity after 600 milliseconds by default. You can change this with the fade prop by either setting your own custom period of inactivity, or disabling the auto-fading feature entirely by setting it to 0.

Setup View

You can set your own background color or gradient on the setup view with the cstmSetupBg prop. Simply pass a hexcode or gradient to it, as seen below:

xxxxxxxxxx

    <CatalystChat

            room="ROOM_NAME"

            appId="YOUR_CATALYST_PROJECT_ID"

            name="MEMBER_NAME"

            cstmSetupBg="linear-gradient(#e66465, #9198e5)" 

            onEndCall={() => console.log('Call ended!')}

        />

Further Custom CSS

While we plan to eventually create a js solution, for now, you can override any css found in the /src/styles directory by simply using the same selectors and either loading your file afterwards, or using !important;. Almost every element of note has an id you can easily target.