Dark Mode for Complex Components
Apply dark variants to cards, navbars, modals, and form inputs to build polished components that support both themes.
Strategy for Complex Components
Complex UI components like cards, navbars, modals, and form inputs have many layered elements — each with its own background, text, border, and shadow that must change in dark mode. The key strategy is to handle dark variants at every layer systematically: surface color, content color, border and divider color, and interactive state colors. Missing any layer creates an inconsistent dark mode experience.
Dark Mode Card Component
A card typically has an outer container, an optional image, a content section with title and description, and an action footer. Each of these layers needs both light and dark variants. The outer container switches from white to a dark gray. Text goes from dark to light. Borders and dividers become lighter grays to remain visible without being harsh.
<div class="bg-white dark:bg-gray-800 rounded-xl shadow dark:shadow-none dark:border dark:border-gray-700 overflow-hidden">
<img src="/image.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg">Card Title</h3>
<p class="text-gray-500 dark:text-gray-400 mt-1 text-sm">Card description goes here.</p>
<div class="border-t border-gray-100 dark:border-gray-700 mt-4 pt-4">
<button class="text-blue-600 dark:text-blue-400 font-medium text-sm hover:underline">Read more</button>
</div>
</div>
</div>All lessons in this course
- Dark Mode Strategies
- Applying Dark Variants
- Building a Dark Mode Toggle
- Dark Mode for Complex Components