Dark Mode für komplexe Komponenten
Wenden Sie Dark-Varianten auf Karten, Navigationsleisten, Modalfenster und Formulareingaben an, um ausgearbeitete Komponenten für beide Themen zu erstellen.
Dark Mode für komplexe Komponenten ist eine kostenlose Tailwind CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Tailwind CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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>Dark Mode Navbar
A navbar needs its background, text links, and interactive elements to all adapt. In light mode, a white navbar with gray text is common. In dark mode, switch to a dark background like dark:bg-gray-900 with lighter link text. The active link color typically shifts to a lighter variant of the brand color to maintain visibility against the dark background.
<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-6 py-4">
<div class="flex items-center justify-between">
<a href="/" class="text-gray-900 dark:text-white font-bold text-xl">MyApp</a>
<div class="flex gap-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm font-medium">Features</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm font-medium">Pricing</a>
</div>
</div>
</nav>Dark Mode Modal
Modals have two distinct surfaces: the backdrop overlay and the modal content panel. The backdrop should darken in both modes — typically a semi-transparent black. The content panel uses the same card-style dark treatment: dark gray background, light text, subtle borders. The close button and action buttons also need their dark variants applied.
<div class="fixed inset-0 bg-black/50 dark:bg-black/70 z-40 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-gray-900 p-6 w-full max-w-md mx-4">
<h2 class="text-gray-900 dark:text-white text-lg font-semibold">Modal Title</h2>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">Modal description content.</p>
<div class="flex gap-3 mt-6 justify-end">
<button class="px-4 py-2 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg">Cancel</button>
<button class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg">Confirm</button>
</div>
</div>
</div>Dark Mode Form Inputs
Form inputs require particular attention in dark mode because the browser's default autofill and focus styles can clash with your dark background. Override the background and text color explicitly, and ensure the focus ring remains visible. Use a dark gray background for inputs, lighter placeholder text, and a bright focus ring color that contrasts well against the dark surface.
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
<input
type="email"
class="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600
text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
placeholder="you@example.com"
/>
</div>
</div>Dark Mode Sidebar
Sidebars often use a slightly different shade than the main content area to create visual separation. In dark mode, you might use dark:bg-gray-900 for the sidebar and dark:bg-gray-800 for the main content. Active sidebar links need a highlighted background — typically a dark variant of the brand color or a subtly lighter gray than the sidebar itself.
<aside class="w-64 h-screen bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 p-4">
<nav class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium">
Dashboard
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800">
Settings
</a>
</nav>
</aside>Dark Mode Alert and Badge Components
Informational alerts and status badges use color to communicate meaning — green for success, red for error, yellow for warning. In dark mode, saturated background colors become too harsh. Use muted dark variants: instead of bg-green-100, use dark:bg-green-900/30 with dark:text-green-300. This retains the semantic color meaning while looking polished on dark surfaces.
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
<p class="text-green-700 dark:text-green-300 text-sm font-medium">Success! Your changes have been saved.</p>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
Active
</span>Dark Mode Table
Tables need striped row colors that work in both modes, header backgrounds that distinguish them from data rows, and hover states that remain subtle. Replace light gray stripes with dark gray variants, keep borders very subtle, and ensure text in all cells meets contrast requirements. The table header typically gets a slightly darker background than the data rows.
<table class="w-full text-sm">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="px-4 py-3 text-left text-gray-500 dark:text-gray-400 font-medium">Name</th>
<th class="px-4 py-3 text-left text-gray-500 dark:text-gray-400 font-medium">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
<td class="px-4 py-3 text-gray-900 dark:text-gray-100">Alice</td>
<td class="px-4 py-3 text-green-600 dark:text-green-400">Active</td>
</tr>
</tbody>
</table>Dark Mode Code Blocks
Code blocks and syntax highlighted content often look better in dark mode because dark backgrounds mimic the terminal aesthetic that developers are familiar with. In light mode, use a very light gray background for code. In dark mode, the surface naturally darkens. Keep the font color slightly off-white like dark:text-gray-200 to avoid eye strain from pure white text on dark backgrounds.
<pre class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 overflow-x-auto">
<code class="text-gray-800 dark:text-gray-200 text-sm font-mono">
const greeting = 'Hello, Tailwind!';
</code>
</pre>Systematizing Dark Mode With a Palette
As your component count grows, manually choosing dark variants for every element becomes tedious and inconsistent. A better approach is to establish a semantic color palette in your config: define surface, on-surface, border, and muted as CSS variables that switch values under the dark class. Then every component uses these semantic tokens instead of raw color shades, making your dark mode consistent by design.
/* In your CSS */
:root {
--surface: theme('colors.white');
--on-surface: theme('colors.gray.900');
--border: theme('colors.gray.200');
}
.dark {
--surface: theme('colors.gray.800');
--on-surface: theme('colors.gray.100');
--border: theme('colors.gray.700');
}
/* In HTML */
<div class="bg-[var(--surface)] text-[var(--on-surface)] border-[var(--border)] border rounded-lg p-4">Testing Complex Component Dark Mode
Test complex components in dark mode by toggling the dark class in browser DevTools and visually inspecting every layer. Check: are all text elements readable? Are borders visible but not harsh? Do interactive states (hover, focus, active) work? Do semantic colors (success green, error red) retain their meaning? Automate this with screenshot comparison tests for critical components.
Quick Check
Test your understanding of applying dark mode to complex Tailwind components.
Lesson Recap
In this lesson you learned: complex components need dark variants at every layer — surface, text, border, and interactive states, semantic color utilities like alerts and badges work best with dark, muted opacity variants like dark:bg-green-900/30, and a CSS variable-based semantic palette keeps dark mode consistent across many components. Next up we explore Tailwind's configuration file in depth.
Häufig gestellte Fragen
Ist die Lektion „Dark Mode für komplexe Komponenten“ kostenlos?
Ja — der vollständige Text von „Dark Mode für komplexe Komponenten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Tailwind CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dark Mode für komplexe Komponenten“?
Wenden Sie Dark-Varianten auf Karten, Navigationsleisten, Modalfenster und Formulareingaben an, um ausgearbeitete Komponenten für beide Themen zu erstellen. Du übst Tailwind CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Tailwind CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. Tailwind CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Dark Mode für komplexe Komponenten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Tailwind CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede Tailwind CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Strategien für den Dark Mode
- Dark-Varianten anwenden
- Einen Dark-Mode-Schalter erstellen
- Dark Mode für komplexe Komponenten