Karanlık Mod ve Temalar İçin Tasarım
Her bileşeni yeniden tasarlamadan uyum sağlayan anlamsal renk seçimleriyle görsel dilinizi açık ve koyu temaları zarifçe destekleyecek şekilde genişletin.
Karanlık Mod ve Temalar İçin Tasarım, CoddyKit'te ücretsiz bir Design Systems & Component Libraries dersidir. Bu, 4 dersinin 4. 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, Design Systems & Component Libraries öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Design Systems & Component Libraries kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Beyond a Single Theme
Users increasingly expect dark mode. A visual language built for one theme breaks the moment you flip the background.
This lesson shows how to design a palette that adapts across themes without duplicating your entire style guide.
Semantic Colors, Not Literal
Instead of using white for backgrounds, define semantic roles: surface, text-primary, border.
Each role maps to a different literal value per theme. The component references the role, so it adapts automatically when the theme changes.
Mapping Roles to Themes
A theme is just a lookup table from role to color. Light and dark themes share the same role names but different values.
The snippet shows the idea.
const themes = {
light: { surface: '#ffffff', text: '#1a1a1a' },
dark: { surface: '#121212', text: '#eaeaea' }
};
function color(theme, role) {
return themes[theme][role];
}
console.log('light surface', color('light', 'surface'));
console.log('dark text', color('dark', 'text'));Dark Mode Is Not Inversion
A common mistake is to simply invert colors. Pure black on pure white inverted becomes harsh and causes eye strain.
Good dark themes use dark grays (not #000000) and slightly dimmed text to reduce glare. Design each theme intentionally.
Elevation in Dark Mode
In light mode, shadows imply elevation. In dark mode, shadows are nearly invisible, so elevation is shown with lighter surface colors instead.
A raised card in dark mode is a slightly lighter gray than the page behind it. Plan surface tints for each elevation level.
Contrast Across Themes
Accessibility contrast ratios must hold in both themes. A text color that passes on white may fail on dark gray.
Check every semantic pairing (text on surface, text on primary) against WCAG AA in each theme before shipping.
Accent and Brand Colors
Your brand accent often needs adjusting per theme. A vivid blue that pops on white can feel oversaturated on dark backgrounds.
Define theme-specific accent values so the brand feels intentional, not accidentally neon, in dark mode.
Respecting System Preference
Most platforms expose a user preference via prefers-color-scheme. Default to the system setting, then let users override.
Respecting the OS choice means users land in their preferred theme automatically - a small detail that feels polished.
Images and Illustrations
Photos and illustrations designed for white backgrounds can clash in dark mode. Provide theme-aware assets or add subtle borders/overlays.
Logos especially may need a light variant. Plan asset variants as part of your visual language, not as an afterthought.
Testing Both Themes
Every new component must be reviewed in both themes before merging. A component that looks great in light mode can be unreadable in dark mode.
Build a theme toggle into your documentation so reviewers can switch instantly.
Themes as a Foundation
Designing semantic, theme-aware colors from the start makes adding future themes - high contrast, seasonal, white-label - far cheaper.
The visual language stays the same; only the value tables change.
Quick Check
Test your theming knowledge.
Recap
You learned to extend a visual language across themes:
- Use semantic color roles, not literal values.
- Design dark mode intentionally - it is not inversion.
- Show elevation with surface tints and verify contrast in every theme.
- Respect system preference and provide theme-aware assets.
A semantic palette makes multi-theme support a configuration, not a rewrite.
Sıkça Sorulan Sorular
“Karanlık Mod ve Temalar İçin Tasarım” dersi ücretsiz mi?
Evet — “Karanlık Mod ve Temalar İçin Tasarım” 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 Design Systems & Component Libraries kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Design Systems & Component Libraries kursu toplamda 4 dersten oluşur.
“Karanlık Mod ve Temalar İçin Tasarım” dersinde ne öğreneceğim?
Her bileşeni yeniden tasarlamadan uyum sağlayan anlamsal renk seçimleriyle görsel dilinizi açık ve koyu temaları zarifçe destekleyecek şekilde genişletin. Design Systems & Component Libraries 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.
Design Systems & Component Libraries öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Design Systems & Component Libraries, 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 4. dersidir.
“Karanlık Mod ve Temalar İçin Tasarım” 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 Design Systems & Component Libraries dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Design Systems & Component Libraries 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
- Renk Paletleri ve Tipografi
- Boşluk, Yerleşim ve İkonografi
- Görsel Stil Kılavuzu Oluşturma
- Karanlık Mod ve Temalar İçin Tasarım