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
  entityId="post_123"
  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.

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)

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)

​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)

Common Customizations

Change Primary Brand Color

Customize Dark Mode Colors

Next Steps