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 color to change using your editor’s search
Replace with your brand color

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

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

Dark Mode (Inline Styles)

Use the theme prop:

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

Components check theme and apply colors:

<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',    // Your brand color
        // Override blue palette
        blue: {
          600: '#9333EA',      // Now bg-blue-600 uses your color
        }
      }
    }
  }
}

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',  // Important!
  // ...
}

Add dark class to parent element:

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

All components automatically switch to dark mode.

Common Customizations

Change Primary Brand Color

Inline Styles:

# Find & replace in all component files
Find: #3B82F6
Replace: #9333EA

Tailwind:

# Find & replace in all component files
Find: blue-600
Replace: purple-600

Find: blue-700
Replace: purple-700

Customize Dark Mode Colors

Edit the dark color values in components:

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

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Migration

Legacy (Deprecated)

Colors & Theming

Colors & Theming

Inline Styles Variant

Color Palette Guides

Changing Colors

Dark Mode (Inline Styles)

Tailwind CSS Variant

Changing Colors

Option 1: Change Classes Directly

Option 2: Extend Tailwind Config

Dark Mode (Tailwind)

Common Customizations

Change Primary Brand Color

Customize Dark Mode Colors

Next Steps

Layout & Structure

Styling Variants

​Colors & Theming

​Inline Styles Variant

​Color Palette Guides

​Changing Colors

​Dark Mode (Inline Styles)

​Tailwind CSS Variant

​Changing Colors

​Option 1: Change Classes Directly

​Option 2: Extend Tailwind Config

​Dark Mode (Tailwind)

​Common Customizations

​Change Primary Brand Color

​Customize Dark Mode Colors

​Next Steps

Layout & Structure

Styling Variants

Colors & Theming

Inline Styles Variant

Color Palette Guides

Changing Colors

Dark Mode (Inline Styles)

Tailwind CSS Variant

Changing Colors

Option 1: Change Classes Directly

Option 2: Extend Tailwind Config

Dark Mode (Tailwind)

Common Customizations

Change Primary Brand Color

Customize Dark Mode Colors

Next Steps