Theming

MijnUI uses tailwind-variants under the hood for styling, a utility developed by the NextUI team and component theme implementations also take inspiration from their work.

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 */
  }

Overriding Colors

To override the default themes, you can easily redefine them in your CSS file. Use the provided list of variables as a reference to modify specific colors.

For example, to override the --main color:

  :root {
    --main: 0 0% 100%; /* white */
  }
 
  .dark {
    --main: 0 0% 7%; /* neutral-925 */
  }

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-foreground">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.