TalkJS themes allow you to tweak the look and feel of a user interface with little effort.

For example, this is the Chatbox view in the default TalkJS style on the left, and an alternative theme on the right:

Themes let you change core design aspects of the UI with simple CSS properties. You can change the theme from inside the TalkJS dashboard. Go to the Config page, scroll down, and you should see all the user configurations, if you've set any up. Select one, scroll down to the bottom, and select "Custom theme". You will see a big text area with CSS and a little explanation on top. Scroll down inside the text area to get to the meat of the matter.

For detailed documentation on how to set up theming, please head to the dashboard. It's all documented inline as CSS comments.

Limitations

Unfortunately you cannot actually add CSS properties or CSS classes in a theme - you can only modify the ones already given. This is because then TalkJS can use the settings from your theme to consistently apply styles to your chat, even when we make internal changes. For instance, when a new browser or browser version comes out with new bugs (this happens particularly frequently on iOS) then we may need to change the internals of the TalkJS UI to work around it. Similarly, when we add new optional features that involve a UI aspect, TalkJS can use your existing theme settings to automatically style that nicely.

The downside of this approach is that we cannot expose the full freedom of CSS to you to style the UI. We're constantly improving the themes feature to add the kinds of flexibility that our customers need. If you're missing a particular thing to perfect your design, let us know and we'll use your feedback to make the themes more flexible.

(Note: theming is only available in production on TalkJS Standard plans and up.)