How Dark Mode Works
Dark mode in Nova is token-driven. All colors used in the system—whether for background, text, borders, or components—are defined through semantic tokens (e.g., bg-level-*, text-high).
Each token has light and dark mode values, managed internally by the design system. When dark mode is enabled in the application, these values are automatically applied.
Do Not Use Tailwind’s dark: Utility
Tailwind provides a dark: prefix for manually toggling dark styles:
<!-- ❌ Don't do this -->
<div class="bg-level-10 dark:bg-level-50">
This is not necessary in Nova and should be avoided. Instead:
- Use Nova’s semantic utility classes
- Let the system handle the mode switching automatically
This ensures consistency and future maintainability.
Example: Automatic Dark Mode Support
<div class="bg-level-10 text-high p-6 rounded-md">
<h2 class="text-2xl">Welcome</h2>
<p class="text-md text-low">This content adapts to dark mode automatically.</p>
</div>
No dark-specific logic is required. If dark mode is enabled at the app level, this block will use dark values defined in the tokens.
Tips for Working with Dark Mode in Nova
- ✅ Always use token-based utility classes
- ❌ Avoid setting raw color values (#fff, bg-white)
- ❌ Avoid using Tailwind’s dark: prefix
- ✅ Use consistent semantic naming to ensure automatic adaptation
- 🧪 Test your components in both light and dark themes
Additional Notes
Nova respects dark mode changes at runtime as long as the semantic classes are used.
To set-up dark mode support in your app, head to the Framework section of our docs.