Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.replyke.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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

  1. Find the hex code in your editor’s search
  2. 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:
  1. Configure Tailwind for class-based dark mode:
// tailwind.config.js
module.exports = {
  darkMode: 'class',
}
  1. 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