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

# Color Settings

> Customize the colors of your LucentUI theme for both light and dark modes.

# 🎨 Color Scheme Settings

Personalize the theme's appearance with your own brand colors and adjust how elements appear in light and dark mode.

## 🌞 Light Mode Colors

<Expandable title="Light Mode Colors">
  | Setting                | Default              | Description                                                    |
  | ---------------------- | -------------------- | -------------------------------------------------------------- |
  | `primary`              | `hsl(340, 85%, 55%)` | Main brand color used across buttons and highlights            |
  | `secondary`            | `hsl(45, 90%, 60%)`  | Secondary accent color used for emphasis                       |
  | `neutral`              | `hsl(210, 20%, 80%)` | Neutral color for borders and UI elements                      |
  | `base`                 | `hsl(0, 0%, 10%)`    | Primary text color on light background                         |
  | `muted`                | `hsl(200, 25%, 35%)` | Subdued text, used for descriptions or less important elements |
  | `inverted`             | `hsl(0, 0%, 100%)`   | Text color on primary backgrounds (e.g., buttons)              |
  | `background`           | `hsl(0, 0%, 98%)`    | Default background color for the page                          |
  | `background-secondary` | `hsl(0, 0%, 95%)`    | Slightly darker secondary background (e.g., cards, sections)   |
</Expandable>

## 🌚 Dark Mode Colors

<Expandable title="Dark Mode Colors">
  | Setting                     | Default              | Description                                            |
  | --------------------------- | -------------------- | ------------------------------------------------------ |
  | `dark-primary`              | `hsl(340, 85%, 55%)` | Primary brand color for dark theme                     |
  | `dark-secondary`            | `hsl(45, 90%, 60%)`  | Secondary accent for dark mode                         |
  | `dark-neutral`              | `hsl(210, 20%, 25%)` | Neutral color for borders and accents                  |
  | `dark-base`                 | `hsl(0, 0%, 95%)`    | Base text color on dark backgrounds                    |
  | `dark-muted`                | `hsl(200, 25%, 40%)` | Less prominent text color on dark mode                 |
  | `dark-inverted`             | `hsl(0, 0%, 20%)`    | Inverted text color on bright buttons or elements      |
  | `dark-background`           | `hsl(220, 30%, 10%)` | Primary dark background color                          |
  | `dark-background-secondary` | `hsl(220, 25%, 15%)` | Secondary background shade for sections and containers |
</Expandable>

> 🎨 **Pro Tip:** Try to keep brand colors consistent across both light and dark themes for visual harmony.