Theming

APEX Design System uses CSS variables for theming, making it easy to customize colors and create dark mode support.

Dark mode

Enable dark mode by adding the dark class to your HTML element:

html

<html class="dark">
  <!-- Your app -->
</html>

CSS Variables

All components use semantic CSS variables defined in your global CSS:

css

:root {
  --color-bg-primary: #ffffff;
  --color-fg-primary: #0f172a;
  --color-border-default: #e2e8f0;
  --color-action-primary: #2563eb;
  /* ... */
}

.dark {
  --color-bg-primary: #0f172a;
  --color-fg-primary: #f8fafc;
  --color-border-default: #334155;
  --color-action-primary: #3b82f6;
  /* ... */
}

Customization

Override CSS variables to customize the design system to match your brand:

css

:root {
  --color-action-primary: #7c3aed; /* Purple */
  --color-action-primary-hover: #6d28d9;
}