> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sublay.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors & Theming

> Customize colors and implement dark mode

# 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:

```tsx theme={null}
/**
 * ====================
 * 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

```tsx theme={null}
// Before
<button style={{ backgroundColor: '#3B82F6' }}>

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

### Dark Mode (Inline Styles)

Use the `theme` prop on comment components:

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

Components check the theme and apply colors conditionally:

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

***

## Tailwind CSS Variant

### Changing Colors

**Option 1: Change classes directly**

```tsx theme={null}
// 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**

```js theme={null}
// 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:

```tsx theme={null}
<div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50">
```

**Setup:**

1. Configure Tailwind for class-based dark mode:

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

2. Add `dark` class to parent element:

```tsx theme={null}
<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:`:

```tsx theme={null}
// 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

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

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Layout & Structure" icon="table-columns" href="/v8/components/customization/layout-structure">
    Modify component layout
  </Card>

  <Card title="Styling Variants" icon="wand-magic-sparkles" href="/v8/components/customization/styling-variants">
    Inline styles vs Tailwind
  </Card>

  <Card title="Adding Features" icon="plus" href="/v8/components/customization/adding-features">
    Add custom functionality
  </Card>

  <Card title="Advanced" icon="star" href="/v8/components/customization/advanced">
    Advanced customization techniques
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.