Theming

Variables List

• main colors for backgrounds, text, and borders across the UI.

   {
    --main: 210 14% 95%; /* slate-100 */
    --main-text: 0 0% 0%; /* black */
    --main-border: 0 0% 83%; /* neutral-300 */
  }

• surface colors For panels, cards, and other contained elements.

   {
    --surface: 0 0% 98%; /* neutral-50 */
    --surface-text: 0 0% 0%; /* black */
  }

• primary colors for buttons, links, and other primary actions.

   {
    --primary: 29 100% 52%; /* orange-500 */
    --primary-text: 0 0% 100%; /* white */
  }

• secondary colors for buttons, links, and other primary actions.

   {
    --secondary: 34 100% 82%; /* #FED7AA */
    --secondary-text: 29 93% 39%; /* orange-700 */
  }

• accent colors For interactive elements like hover effects.

   {
    --accent: 0 0% 90%; /* neutral-200 */
    --accent-text: 0 0% 0%; /* black */
  }

• muted colors for disabled or inactive elements.

   {
    --muted: 0 0% 83%; /* neutral-300 */
    --muted-text: 0 0% 25%; /* neutral-700 */
  }

• border and ring colors

   {
    --border: 0 0% 83%; /* neutral-300 */
    --ring: 0 0% 83%; /* neutral-300 */
  }

• input-border Color Used in form fields like Input, Select, and Textarea.

   {
    --input-border: 0 0% 0%; /* black */
  }

Status Colors

• info Color for background, text, and text color when the background is filled for informational elements.

   {
    --info: 216 76% 52%; /* blue-500 */
    --info-text: 219 64% 43%; /* blue-800 */
    --info-filled-text: 0 0% 100%; /* white */
  }

• warning Color for background, text, and text color when the background is filled for warning elements.

   {
    --warning: 45 92% 47%; /* yellow-500 */
    --warning-text: 28 73% 26%; /* yellow-900 */
    --warning-filled-text: 0 0% 0%; /* white */
  }

• danger Color for background, text, and text color when the background is filled for danger elements.

   {
    --danger: 0 72% 43%; /* red-500 */
    --danger-text: 0 82% 31%; /* red-800 */
    --danger-filled-text: 0 0% 100%; /* white */
  }

• success Color for background, text, and text color when the background is filled for success elements.

   {
    --success: 140 76% 38%; /* green-500 */
    --success-text: 140 49% 20%; /* green-800 */
    --success-filled-text: 0 0% 100%; /* white */
  }

Adding New Colors

To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.

:root {
  --card: 0 0% 98%; /* neutral-50 */
  --card-text: 0 0% 0%; /* black */
}
 
.dark {
--card: 0 0% 7%; /* neutral-925 */
--card-text: 0 0% 96%; /* neutral-100 */
}

You can now use the new colors in your components.

<div className="bg-card text-card-text">Hello</div>

Other Color Formats

You can also use other color formats if you prefer. Tailwind CSS supports various color formats including RGB, RGBA, and HSL.

For more information on using different color formats, refer to the Tailwind CSS documentation.