Karanlık Varyantları Uygulama
Renkleri, arka planları, kenarlıkları ve gölgeleri kapsayacak şekilde karanlık modda farklı bir stil uygulamak için herhangi bir yardımcı sınıfın önüne dark:* ekleyin.
Karanlık Varyantları Uygulama, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
The dark: Prefix in Action
Once your dark mode strategy is configured, you use the dark: prefix to apply alternative styles in dark mode. Think of it as a conditional: the utility after dark: only activates when dark mode is in effect. You place both the default and dark versions on the same element, and Tailwind generates the correct CSS for both states. This keeps all style logic in one place — the HTML.
<p class="text-gray-900 dark:text-gray-100">
This text is dark on light backgrounds and light on dark backgrounds.
</p>Dark Background Colors
Background color is the most fundamental dark mode concern. Switch from light surfaces like bg-white or bg-gray-50 to dark surfaces like bg-gray-900 or bg-slate-800. Tailwind's color palette provides shades from 50 (lightest) to 950 (darkest), giving you fine-grained control over the exact tone you want in each mode.
<div class="bg-white dark:bg-gray-900 min-h-screen">
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
Layered surfaces for depth in both modes
</div>
</div>
</div>Dark Text Colors
Text color must maintain readability in both modes. In light mode, dark text on a light background is standard. In dark mode, use lighter text shades — typically dark:text-gray-100 for primary text, dark:text-gray-300 for secondary text, and dark:text-gray-400 for muted text. This three-level hierarchy helps maintain visual hierarchy in dark mode just as it does in light mode.
<div class="bg-white dark:bg-gray-900 p-6">
<h1 class="text-gray-900 dark:text-gray-100 text-2xl font-bold">Primary Text</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Secondary description text.</p>
<span class="text-gray-400 dark:text-gray-500 text-sm">Muted metadata</span>
</div>Dark Border Colors
Borders often appear too prominent on dark backgrounds if left at their default color. Use dark:border-gray-700 or dark:border-gray-600 to keep borders subtle in dark mode. For decorative dividers, you might use even lighter borders like dark:border-gray-800 to create gentle separation without visual noise.
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<hr class="border-gray-100 dark:border-gray-800 my-4" />
<p class="text-gray-700 dark:text-gray-300">Content inside a bordered card</p>
</div>Dark Shadow Utilities
Shadows work differently in dark mode because dark backgrounds make traditional box shadows invisible. Use Tailwind's shadow-{color} utilities to add colored shadows, or simply reduce shadow intensity in dark mode. Alternatively, use subtle borders instead of shadows to create depth on dark surfaces — a common pattern in modern dark UIs.
<div class="
bg-white shadow-lg
dark:bg-gray-800 dark:shadow-none dark:border dark:border-gray-700
rounded-xl p-6
">
<p>Card with shadow in light, border in dark</p>
</div>Dark Variants on Interactive Elements
Buttons and links need dark mode variants for all their states: default, hover, focus, and active. Layer the dark: prefix with state variants to handle every interaction. Remember that contrast ratios must meet WCAG standards in both modes — a bright blue button that works in light mode may need a lighter shade like dark:bg-blue-400 to maintain sufficient contrast against a dark background.
<button class="
bg-blue-600 hover:bg-blue-700 text-white
dark:bg-blue-500 dark:hover:bg-blue-400
focus:outline-none focus:ring-2 focus:ring-blue-400
dark:focus:ring-blue-300
font-semibold px-5 py-2 rounded-lg transition-colors
">
Primary Button
</button>Dark Variants for SVG Icons
SVG icons styled with Tailwind's text-* utilities (which control the CSS currentColor) inherit dark variants naturally. Apply dark:text-gray-300 to an icon's wrapper or directly to the SVG element. For filled SVG icons that use fill-current or stroke-current, the same approach works because they both inherit the color property.
<svg class="w-6 h-6 text-gray-500 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>Dark Mode for Placeholder Text
Form input placeholders also need dark variants. Use the placeholder: variant together with dark: to style placeholder text in dark mode. Input backgrounds, borders, and text all need their own dark counterparts too. A consistent input style in dark mode typically uses a medium-dark background with lighter placeholder text and a subtle border.
<input
type="text"
placeholder="Search..."
class="
bg-white border-gray-300 text-gray-900
placeholder:text-gray-400
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100
dark:placeholder:text-gray-500
rounded-lg px-4 py-2 w-full
focus:outline-none focus:ring-2 focus:ring-blue-500
"
/>Dark Variants with Opacity Modifier
You can combine the dark: prefix with Tailwind's opacity modifier syntax. For example, dark:bg-white/10 applies a white background at 10% opacity in dark mode — a useful technique for creating subtle card surfaces with a glass-like effect. This composability is one of Tailwind's most powerful features for building sophisticated dark themes.
<div class="bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-6 backdrop-blur">
<p class="text-gray-800 dark:text-gray-200">Glassmorphism-style card</p>
</div>Avoiding Common Dark Mode Mistakes
A common mistake is applying only background dark variants without updating text and border colors — this results in dark-on-dark or light-on-light combinations. Always update all related properties together: background, text, border, and shadow. Another pitfall is using pure black (bg-black) as the dark surface — it creates harsh contrast. Prefer dark gray shades like bg-gray-900 or bg-slate-900 for a softer look.
<!-- BAD: Only background updated, text becomes invisible -->
<p class="text-gray-900 dark:bg-gray-900">Invisible text in dark mode!</p>
<!-- GOOD: Both background and text updated together -->
<p class="text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900">Readable in both modes</p>Testing Dark Mode During Development
When using the class strategy, you can test dark mode in development by manually adding the dark class to your <html> element. Browser DevTools also let you emulate prefers-color-scheme: dark regardless of your strategy. For automated testing, write tests that toggle the dark class and verify that the correct computed styles are applied to your key elements.
<!-- Quick test: add dark class to html -->
<html class="dark">
<!-- Remove to go back to light -->
<html>Quick Check
Test your understanding of applying dark variants in Tailwind CSS.
Lesson Recap
In this lesson you learned: the dark: prefix applies alternative styles when dark mode is active, backgrounds, text, borders, and shadows all need dark variants to maintain visual quality, and you can combine dark: with state variants and opacity modifiers for fine-grained control. Next up we build a JavaScript dark mode toggle that switches themes at runtime.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Karanlık Varyantları Uygulama” dersi ücretsiz mi?
Evet — “Karanlık Varyantları Uygulama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Karanlık Varyantları Uygulama” dersinde ne öğreneceğim?
Renkleri, arka planları, kenarlıkları ve gölgeleri kapsayacak şekilde karanlık modda farklı bir stil uygulamak için herhangi bir yardımcı sınıfın önüne dark:* ekleyin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Karanlık Varyantları Uygulama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Karanlık Mod Stratejileri
- Karanlık Varyantları Uygulama
- Karanlık Mod Geçişi Oluşturma
- Karmaşık Bileşenler için Karanlık Mod