Colors & Theming

Change colors to match your brand and implement dark mode.

Inline Styles Variant

Color Palette Guides

Component files have color palette documentation in their headers:

/**
 * ====================
 * THEME COLOR PALETTE
 * ====================
 *
 * BACKGROUNDS:
 * - #FFFFFF → #1F2937 (main background)
 * - #F3F4F6 → #374151 (secondary background, hover)
 *
 * TEXT:
 * - #111827 → #F9FAFB (primary text)
 * - #6B7280 → #9CA3AF (secondary text)
 *
 * BLUES (links, actions, upvotes):
 * - #3B82F6 → #60A5FA (primary blue)
 *
 * REDS (downvotes, delete):
 * - #EF4444 → #F87171 (primary red)
 */

Format: Light Color → Dark Color

Changing Colors

Find the hex code in your editor’s search
Replace with your brand color

// Before
<button style={{ backgroundColor: '#3B82F6' }}>

// After
<button style={{ backgroundColor: '#9333EA' }}>  // Purple

Dark Mode (Inline Styles)

Use the theme prop on comment components:

<ThreadedCommentSection
  foreignId="post_123"
  createIfNotFound
  theme={isDarkMode ? 'dark' : 'light'}
/>

Components check the theme and apply colors conditionally:

<div style={{
  backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
  color: theme === 'dark' ? '#F9FAFB' : '#111827'
}}>

Tailwind CSS Variant

Changing Colors

Option 1: Change classes directly

// Before
<button className="bg-blue-600 hover:bg-blue-700">

// After
<button className="bg-purple-600 hover:bg-purple-700">

Option 2: Extend Tailwind config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#9333EA',
      }
    }
  }
}

Then use bg-primary, text-primary, etc.

Dark Mode (Tailwind)

Components use dark: prefix for dark mode:

<div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50">

Setup:

Configure Tailwind for class-based dark mode:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

Add dark class to parent element:

<html className={isDarkMode ? 'dark' : ''}>
  <App />
</html>

All components automatically switch to dark colors.

Shared Pieces

The GIF picker, loading skeletons, mention text and (in social comments) the emoji bar divider are drawn by the files in the component’s shared/ folder. Their light and dark colors are in shared/theme.ts.

Inline styles variant, and every React Native / Expo variant: the component passes its theme to these pieces. Edit the colors in shared/theme.ts.
Tailwind variant on web: the pieces read CSS custom properties, and the root element of the comment section sets them under dark::

// components/threaded-comment-section.tsx (or social-comment-section.tsx)
const sharedDarkColors = [
  "dark:[--sublay-ui-surface:#262626]",   // GIF picker background
  "dark:[--sublay-ui-control:#404040]",   // GIF picker back button and search field
  "dark:[--sublay-ui-muted:#a3a3a3]",     // GIF picker icons
  "dark:[--sublay-ui-text:#fafafa]",      // GIF picker search text
  "dark:[--sublay-ui-divider:#525252]",   // Emoji bar divider
  "dark:[--sublay-ui-skeleton:#404040]",  // Loading skeletons
  "dark:[--sublay-ui-mention:#60a5fa]",   // Mention text
].join(" ");

Change a value there to change the dark color. Light colors are the fallbacks in shared/theme.ts. To override a light color from CSS, set the same property without the dark: prefix.

Common Customizations

Change Primary Brand Color

Inline Styles — find & replace across the component directory:

Find:    #3B82F6
Replace: #9333EA
Scope:   src/components/comments-threaded/

Tailwind:

Find:    blue-600
Replace: purple-600

Find:    blue-700
Replace: purple-700

Customize Dark Mode Colors

// Make dark mode deeper
backgroundColor: theme === 'dark' ? '#0F172A' : '#FFFFFF'  // Slate-900 instead of gray-800

Next Steps

Layout & Structure

Modify component layout

Styling Variants

Inline styles vs Tailwind

Adding Features

Add custom functionality

Advanced

Advanced customization techniques

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Colors & Theming

Colors & Theming

Inline Styles Variant

Color Palette Guides

Changing Colors

Dark Mode (Inline Styles)

Tailwind CSS Variant

Changing Colors

Dark Mode (Tailwind)

Shared Pieces

Common Customizations

Change Primary Brand Color

Customize Dark Mode Colors

Next Steps

Layout & Structure

Styling Variants

Adding Features

Advanced

​Colors & Theming

​Inline Styles Variant

​Color Palette Guides

​Changing Colors

​Dark Mode (Inline Styles)

​Tailwind CSS Variant

​Changing Colors

​Dark Mode (Tailwind)

​Shared Pieces

​Common Customizations

​Change Primary Brand Color

​Customize Dark Mode Colors

​Next Steps

Layout & Structure

Styling Variants

Adding Features

Advanced

Colors & Theming

Inline Styles Variant

Color Palette Guides

Changing Colors

Dark Mode (Inline Styles)

Tailwind CSS Variant

Changing Colors

Dark Mode (Tailwind)

Shared Pieces

Common Customizations

Change Primary Brand Color

Customize Dark Mode Colors

Next Steps