Customising the Look & Feel of Your SCS Chatroom

Bronze Member

yesterday

SCS Chat is designed to be easy to style so it can match your website without editing any JavaScript files.

All styling is controlled using CSS variables, which means:
Updates to SCS Chat won’t break your design
You can theme the chat to match your brand colours

How styling works
SCS Chat reads its colours and layout settings from CSS variables defined on the
.scs-chatroom container.
By overriding these variables, you can instantly change:
Background colours
Text colours
Accent / brand colour
Input fields
Buttons and hover states

Example: Adding your own chat style
Add the following anywhere on your page (usually in the <head> or just before the embed code):

<style>
/* ======================================================
   SCS CHAT – CUSTOM THEME
====================================================== */

.scs-chatroom {

  /* =========================
     Layout / Size
  ========================= */
  --scs-height: 600px;      /* Overall height of the chat widget */

  /* =========================
     Backgrounds & Panels
  ========================= */
  --scs-bg: #ffffff;        /* Main chat background */
  --scs-panel: #f9fafb;     /* Side panels (users list, input bar) */
  --scs-border: #e5e7eb;    /* Borders around chat areas */

  /* =========================
     Text Colours
  ========================= */
  --scs-text: #111827;      /* Normal message text */
  --scs-muted: #6b7280;     /* Muted / secondary text */
  --scs-system: #a8c3ff;    /* System messages */

  /* =========================
     Accent / Brand Colour
  ========================= */
  --scs-accent: #a8c3ff;        /* Primary brand colour */
  --scs-accent-text: #ffffff;  /* Text on accent backgrounds */

  /* =========================
     Messages
  ========================= */
  --scs-msg-text: #111827;  /* Message content */
  --scs-msg-user: #2563eb;  /* Username colour */

  /* =========================
     Input Field
  ========================= */
  --scs-input-bg: #ffffff;
  --scs-input-text: #111827;
  --scs-input-border: #d1d5db;

  /* =========================
     Buttons
  ========================= */
  --scs-btn-bg: #a8c3ff;
  --scs-btn-text: #ffffff;
  --scs-btn-hover: #1d4ed8;
}
</style>

What you can safely change
You can tweak any of these values without breaking chat functionality:
Light / dark themes
Match your website colours
High-contrast accessibility themes
Seasonal or event-based styling

Best practices
Keep contrast high for readability
Test on mobile and desktop
Avoid removing borders completely on light themes
Don’t override layout styles unless you know CSS well

Important notes
Styling applies per page, not globally
You can use different styles for different rooms or pages
No JavaScript changes required
Safe to use with future SCS Chat updates

You must be logged in to post a reply.

Support StreamCode Studio

Popular Topics

Leave a Comment