Theming Guide

CSS Architecture

QuikChat's CSS has two layers:

• Base styles — structural layout (flexbox, sizing, padding). These never change between themes.
• Theme styles — visual appearance (colors, backgrounds, borders, shadows, border-radius). Scoped under a theme class like .quikchat-theme-light.

This means a theme only needs to define colors and visual properties — the layout is handled for you.

Widget Structure

Every QuikChat widget renders this DOM structure. Each element has a CSS class you can target:

<div class="quikchat-base quikchat-theme-light">    /* outer container + theme class */
  <div class="quikchat-title-area">...</div>        /* title bar (hideable) */
  <div class="quikchat-messages-area">             /* scrollable message list */
    <div class="quikchat-message">                 /* one per message */
      <div class="quikchat-user-label">...</div>  /* sender name */
      <div>...</div>                              /* message content */
    </div>
  </div>
  <div class="quikchat-input-area">               /* input bar (hideable) */
    <textarea class="quikchat-input-textbox">...</textarea>
    <button class="quikchat-input-send-btn">Send</button>
  </div>
</div>

Alternating row colors use the additional class quikchat-messages-area-alt on the messages container, which you target with :nth-child(odd) and :nth-child(even) selectors.

Switching Themes

Set the theme in the constructor or change it at runtime:

// At construction
const chat = new quikchat("#container", onSend, {
  theme: "quikchat-theme-dark"
});

// At any time later
chat.changeTheme("quikchat-theme-light");

This swaps the theme class on the widget root element. All three built-in themes:

Creating a Custom Theme

A theme is just a set of CSS rules scoped under your theme class name. Here's a complete example:

/* quikchat-theme-ocean */
.quikchat-theme-ocean {
  border: 1px solid #1a6b7a;
  border-radius: 10px;
  background-color: #0d2b36;
  color: #d4edee;
}

.quikchat-theme-ocean .quikchat-title-area {
  background-color: #0d2b36;
  color: #5ec4d4;
  border-bottom: 1px solid #1a4a5a;
}

.quikchat-theme-ocean .quikchat-messages-area {
  background-color: #0a2530;
  color: #d4edee;
}

.quikchat-theme-ocean .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
  background-color: #0d3040;
  border-radius: 4px;
}

.quikchat-theme-ocean .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
  background-color: #11384a;
  border-radius: 4px;
}

.quikchat-theme-ocean .quikchat-input-area {
  background-color: #0d2b36;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.quikchat-theme-ocean .quikchat-input-textbox {
  background-color: #163a48;
  color: #d4edee;
  border: 1px solid #1a5a6a;
  border-radius: 4px;
}

.quikchat-theme-ocean .quikchat-input-send-btn {
  background-color: #1a8a6a;
  color: white;
  border: none;
  border-radius: 4px;
}

.quikchat-theme-ocean .quikchat-input-send-btn:hover {
  background-color: #1fa07a;
}

Include this CSS in your page (inline or in a stylesheet), then use it:

chat.changeTheme("quikchat-theme-ocean");

Click "Custom" above to see this ocean theme in action.

Theme Properties Reference

A theme typically sets these properties on each element. You don't need all of them — only set what you want to change from the defaults.

Tips

• Use the debug theme during development — each section has a distinct color so you can see exactly where each area starts and ends.
• Multiple widgets on the same page can each have a different theme.
• Themes can be switched at any time without losing messages or state.
• The full source for all built-in themes is in quikchat.css — copy one as a starting point.
• For RTL languages, call chat.setDirection('rtl') — the input area layout flips automatically. Target .quikchat-rtl in your theme CSS for RTL-specific adjustments.