Skip to main content

Dark Mode

Apex provides built-in dark mode support with automatic switching.

Automatic Dark Mode

Dark mode automatically switches based on the user's system preferences:

HTML
<html class="dark">
  <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    <!-- Content -->
  </body>
</html>

Dark Mode Classes

Use the dark: prefix to apply styles in dark mode:

HTML
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Dark mode aware content
</div>

Customizing Dark Mode

Override CSS variables for custom dark mode colors:

CSS
[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-secondary: #a78bfa;
  --color-background: #111827;
  --color-text: #f9fafb;
}