Karanlık Mod Renk Sistemleri: Gece 2'de Çalışan Bir Palet Nasıl Kurulur

Karanlık mod bir paralel sistemdir ve aydınlık temaya bir şalter ekleyip geçen ürünler, ışıklar söndüğünde bozuk görünen ürünlerdir.

Bütün makale tek cümlede bu. Çoğu karanlık modun başarısız olmasının nedeni daha spesifik: tasarımcılar "aydınlık paleti ters çevir" yoluna sapıyor ve sonunda gri üstüne gri düzlüklerle ya da retinaları yakan elektrik mercanıyla karşılaşıyor. Çözüm kozmetik değil, mimari. Kendi yükseklik modeli, kendi doygunluk azaltma kuralları ve kendi vurgu kalibrasyonu olan paralel bir sistem kurun; sonuç bilinçli görünür, çünkü bilinçlidir.

---

Karanlık mod bir paralel sistemdir, tersine çevirme değil

Aydınlık paletinizde arka plan, yüzey, kenarlık, metin ve vurgu token'ları var. Karanlık paletinizin de tam olarak aynı token'lara ihtiyacı var ve değerler aydınlık değerlerin tersi değil. Chroma düşük lightness değerlerinde farklı davranır. Ton kaymaları algısal sınırda gerçekleşir. Aydınlık modda L 0.62'de temiz bir mercan gibi okunan renk, neredeyse siyah bir yüzeyin karşısında karanlık modda L 0.72'de titreşen bir neona dönüşür.

Temiz karanlık mod yayınlayan ekipler bir toggle'a dokunmaz. İkinci bir palet tasarlarlar, onu aynı semantik token katmanına eşlerler ve ikisini tema kökündeki bir mod anahtarıyla bağlarlar. Daha çok iş. Sizi utandırmayan tek yaklaşım da bu.

---

Yüzey yükseklik modeli

Arka plan. Yüzey. Yükseltilmiş yüzey. Overlay yüzey. Çalışan her karanlık mod tasarımı arayüzünde bu dört katman vardır ve üçüncü katmanı atlamak, karanlık arayüzlerin düz hissettirmesinin en yaygın nedenidir.

Aydınlık modda yükseklik bellidir: beyaz kartlar gri arka planların üstünde durur, gölgeler ucuzdur, derinlik bedavadır. Karanlık modda gölgeler koyu yüzeylerin içinde kaybolur. Yükseklik yüzeyin kendi lightness değerinde yaşamak zorundadır. Her katman lightness'ta küçük, bilinçli bir adımdır, sıçrama değil.

Dört katman estetik tercih değildir. Taşıyıcı yapıdır. Sisteminizdeki her bileşen bu katmanlardan birinde durur ve her metin-yüzey çiftinin okunabilirliği, onu yığının neresine koyduğunuza bağlıdır.

---

Arka plan tabanı belirler

Arka plan en derin katmandır. Kural: tam doygunlukta saf siyahı (oklch(0 0 0)) asla kullanmayın. Yüzde 8 ila 10 lightness civarında hafifçe renklendirilmiş, siyaha yakın bir ton kullanın. Bu renk tonu neredeyse her zaman sıcak olur, çünkü soğuk siyahlar ürünün hak ettiğinden daha ucuz ve daha soğuk okunur.

oklch(0.10 0.012 30) gibi bir değer size her ekranda "siyah" okunan ama saf siyahın ölü vakum hissinden kaçınan koyu, sıcak bir kömür rengi verir. 0.012 chroma ve 30 derecelik ton açısı (hafif sıcak bir eğilim) yeter. Fazlası çamurlaşır. Azı cansız görünür.

---

Yüzey içeriği taşır

Yüzey, içeriğin çoğunun durduğu, arka plandan hafifçe yükseltilmiş katmandır. Arka plandan yüzeye lightness adımı OKLCH içinde tipik olarak 3 ila 5 puandır. Bu fark, gözün okuduğu ilk sinyaldir: içerik burada yaşıyor, arka plan onun gerisinde.

oklch(0.14 0.010 30) değerinin oklch(0.10 0.012 30) karşısında durması, kenarlık ya da gölge olmadan yeterli görsel ayrımı sağlar. Chroma hafifçe düşer, çünkü koyu yüzeylerde lightness arttıkça chroma'nın arka plana çamurlu bir sızıntıyı önlemek için geri çekilmesi gerekir. Render anında bu ince bir ayrıntıdır; atladığınızda ise tamamen yanlış görünür.

---

Yükseltilmiş yüzey ve overlay yüzey

Yükseltilmiş yüzeyler kartları ve panelleri taşır. Overlay yüzeyler modal'ları ve sheet'leri taşır. Lightness ilerlemesi devam eder: yükseltilmiş yüzey kabaca oklch(0.18 0.008 30), overlay yüzey oklch(0.22 0.007 30). Her adımda chroma düşer, çünkü yığında yukarı çıkmak izleyiciye yaklaşmak demektir ve bu yüzeylerin temiz hissettirmesi gerekir.

Çoğu karanlık arayüzün düz gri yulaf lapasına dönmesinin nedeni, tasarımcıların iki katman kullanmasıdır: arka plan ve yüzey. Kartlar arka planda yaşar, metin yüzeyde yaşar ve her şey aynı derinlikte okunur. Üçüncü ve dördüncü katmanı ekleyin, arayüz tek bir drop shadow olmadan anında okunabilirlik kazanır.

---

Doygunluk azaltma kuralı

Aydınlıkta çalışan doygun renkler geceleri yakar. Kural: vurguların doygunluğunu yüzde 15 ila 25 azaltın, metin ve kenarlıklarda chroma'yı daha da düşürün. Bu markayı karartmakla ilgili değil. Gözün düşük ortam ışığında chroma'yı nasıl işlediğiyle ilgili.

Yüksek ortam ışığında (öğlen ofis), canlı chroma capcanlı okunur. Düşük ortam ışığında (gece yarısı masa başı), aynı chroma agresif, haleli ve fiziksel olarak rahatsız edici okunur. Çözüm renkten korkmak değil. Onu kalibre etmek. Marka tanınabilir kalır. Ürün acıtmayı bırakır.

---

Saf beyaz metin neden yanlış

Neredeyse siyah üzerinde saf beyaz yüksek kontrast değil, fazla kontrasttır. Parlak metnin koyu çevresine sızıyormuş gibi göründüğü halo etkisi, karanlık arayüzleri okumayı kolaylaştırmak yerine zorlaştıran, belgelenmiş bir optik olgudur.

Karanlık modda birincil metin için doğru değer, hafif sıcak bir tonla yüzde 90 ila 95 lightness civarıdır. oklch(0.93 0.005 60) "beyaz" okunur ama halo yapmaz. İkincil metin oklch(0.70 0.010 60) değerine düşer: gövde boyutunda hâlâ okunabilir, birincil metnin yanında görsel olarak geri çekilir. Kırık beyaz, tasarımcıların en sık yanlış yaptığı değerdir, çünkü bir uzlaşma gibi hissettirir ve aslında doğru değerdir.

---

Vurgu kalibrasyonu markayı tanınabilir tutar

Marka vurguları kimliklerini kaybetmeden karanlık modda okunabilmeli. Kalibrasyon bir lightness artışı ve bir chroma düşüşüdür, ton kayması değil. Aydınlık moddaki vurgu oklch(0.62 0.22 25) ise, karanlık moddaki vurgu oklch(0.72 0.17 25) olur. Aynı ton. Koyu yüzeylere karşı öne çıksın diye daha yüksek lightness. Halo yapmasın diye daha düşük chroma.

Hata, karanlık modu vurguların kısıldığı bir yer olarak görmektir. Kısmak marka tanınırlığını öldürür. Lightness'ı yükseltip chroma'yı düşürmek, görsel yanmayı önlerken marka renk paleti hissini korur. Kullanıcı ayarı fark etmez. Ürünün güzel göründüğünü fark eder.

---

WCAG'in kaçırdığı kontrast geçişi

WCAG 2.1 kontrast oranları bir sürü çirkin karanlık arayüzü geçirir. Koyu bir yüzey ile soluk gri metin arasındaki 4.5:1 oranı WCAG'den geçerken ortam koşullarında gerçekten okunması zor olabilir. İkinci geçiş, özellikle açık-koyu ayrımında lightness algısını daha doğru modelleyen APCA'dır.

APCA'dan sonra göz testini yapın. Shimmer, benzer lightness'ta ama farklı chroma'da iki rengin yan yana durduğunda gördüğünüz titreşimdir. Halo, parlak öğelerin koyu çevreye sızmasıdır. Bloom, doygun vurgularda algılanan parıltıdır. Bunlardan herhangi biri varsa, oran ne olursa olsun çift başarısızdır. Oranı değil, değerleri düzeltin. Erişilebilir renk kontrastı mekaniği üzerine daha derin bir geçiş için, tam metodoloji aydınlık mod denetiminin ortaya çıkarmadığı uç durumları kapsar.

---

Temiz karanlık paletler yayınlayan yedi marka

Linear, Notion, Vercel, Stripe, GitHub, Arc ve Raycast karanlık modu farklı şekillerde çözüyor. Ortak kalıpları çalmaya değer olanlar.

Linear referans uygulamadır. Yüzey adımları, arayüzün gerçek derinliğe sahip tek bir koyu alan gibi okunacağı kadar dar. Mor vurgu, hiç yakmadan Linear'ın moru olarak tanınıyor. Tipografik hiyerarşi yalnızca boyuta değil, metin token'larındaki lightness adımlarına dayanıyor.

Vercel, ikili modelin tam kararlılıkla çalışabileceğini kanıtlıyor. Üçüncü yüzey yok. Gri durumlar yok. Her şey ya derin arka plan ya da hafifçe yükseltilmiş yüzey ve monokrom bağlılık bunu bir sınırlama yerine bir tasarım kararı gibi hissettiriyor. Çoğu ekip bunu başaramaz, çünkü yükseklik gerektiren durum renkleri, illüstrasyonları ve marka anları vardır.

GitHub'ın "Dimmed" seçeneği, doğru içgörünün yanlış kapsama uygulanmış hali. Onu bir tema varyantı olarak kurdular, ama asıl ders, sıcak tonlu bir koyu yüzeyin uzun süreli okumada serin varsayılandan daha rahat olduğu. Her karanlık mod varsayılan olarak sıcak çalışmalı.

---

Öğlen ters çevrilmiş gibi değil, gece 2'de bilinçli görünen bir karanlık mod mu istiyorsunuz? Brainy, yükseklik modeli, vurgu kalibrasyonu ve Figma ile CSS'e bırakmaya hazır OKLCH token haritasıyla paralel karanlık renk sistemleri tasarlar. Brainy'yi tutun.

---

Çalışan karanlık mod token haritası

Aşağıdaki token haritası gerçek bir karanlık modu OKLCH renk koordinatlarında yayınlar. Primitive'ler ham değerlerdir. Semantikler rollerdir. Primitive'leri bir Figma variable koleksiyonuna ham değer olarak bırakın. Semantikleri primitive'lere alias olarak eşleyin. Bu iki katmanlı mimari token sisteminin tamamıdır.

Ton baştan sona 25 ila 30 derece arasında seyreder (sıcak mercan bölgesi). Sistem tutarlıdır, çünkü sıcaklık tabandan tavana aynıdır. Tonu 250 dereceye çevirirseniz Linear benzeri bir palet elde edersiniz. 200 dereceye çevirirseniz Vercel'e yakın bir palet. Yapı değişmez. Yalnızca ton değişir.

Uygulamada tablonun tamamı :root[data-theme="dark"] üzerindeki CSS custom property'lerine eşlenir. Figma'da her satır, "Dark" mod koleksiyonundaki bir variable'dır. Bir tasarım sistemini yüzeyler arasında ölçeklenebilir kılan şey, bu iki koleksiyonlu mimaridir.

---

Mod geçişi: titremeyen uygulama

Yanlış temanın bir anlık parlaması olmadan mod değiştirmek, hiçbir JavaScript çalışmadan önce html elemanında color scheme'i ayarlayarak çözülür. Başka her yaklaşım en az bir uç durumda yanlıştır.

Kalıp şöyle: <head> içindeki engelleyici (blocking) bir inline <script> etiketinde kayıtlı tercih için localStorage'ı okuyun. Özel property'lere başvuran CSS render edilmeden önce, html elemanına senkron olarak data-theme="dark" veya data-theme="light" uygulayın. React yok. useEffect yok. Flash yok.

<script> const saved = localStorage.getItem('theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; document.documentElement.dataset.theme = saved ?? (prefersDark ? 'dark' : 'light'); </script>

Bu script bilerek engelleyicidir. Render'dan önce çalışır. Stilsiz içerik parlaması, temanın ilk boyamadan sonra JavaScript'te uygulanmasından kaynaklanır ve bu tek engelleyici script onu tamamen ortadan kaldırır.

---

Sistem tercihi, varsayılan ve override

Varsayılan, işletim sistemi tercihini izlemeli. Kullanıcı override'ı localStorage'a kalıcı olarak yazılmalı. Toggle üç durum sunmalı: sistem, aydınlık ve karanlık.

İki durumlu toggle bir tasarım hatasıdır. İşletim sistemini karanlığa ayarlayan ve uygulamanın onu izlemesini isteyen kullanıcı ikinci bir anahtarı yönetmek istemez. Toggle'ın, saklanan override'ı temizleyen ve işletim sistemi tercihinin yön vermesine izin veren bir "sistem" durumuna ihtiyacı var. Çoğu uygulama iki durum kurar ve sonra biri işletim sistemi temasını değiştirip uygulamanın neden takip etmediğini merak ettiğinde bir destek talebi alır.

---

SSS

Karanlık modda vurgu renkleri kullanmak OLED pil ömrüne zarar verir mi?

Vurgu renkleri tipik bir arayüzde küçük bir yüzey alanı kaplar. OLED'de karanlık modun pil tasarrufu neredeyse tamamen koyu yüzey alanlarından gelir. Koyu bir arka plandaki mercan renkli bir CTA butonu pil tüketimini anlamlı biçimde değiştirmez. Saf siyah arka planlar önemlidir. Tam ekran doygun illüstrasyonlar önemlidir. Bir buton önemli değildir.

Aydınlık moddaki marka rengimi doğrudan karanlık mod vurgusu olarak kullanabilir miyim?

Kalibrasyon olmadan hayır. Aydınlık moddaki marka renginiz OKLCH'de L 0.55 ila 0.65 aralığındaysa, onu doğrudan koyu bir yüzeyde kullanmak ya yetersiz kalır (öne çıkamayacak kadar sönük) ya da halo yapar (koyu ortama karşı fazla canlı). Lightness'ı 8 ila 12 puan yükseltin. Chroma'yı yüzde 20 ila 30 düşürün. Tonu koruyun. Kalibre edilmiş karanlık mod vurgusu budur.

Henüz karanlık modu olmayan bir sistem için minimum geçerli karanlık mod nedir?

Arka plan, yüzey, yükseltilmiş yüzey, birincil metin, ikincil metin, vurgu. Altı token. Tam değil, ama bir sistem. Her bileşen bu altı değerden birine eşlenebilir, genişleme için yükseklik modeli yerinde ve bunu utanmadan yayınlayabilirsiniz. Yüz token ve sıfır yapıyla değil, buradan başlayın.

Otomatik üretilmiş karanlık mod hiç kabul edilebilir mi?

Prototipler, dahili araçlar ve tek aktif tasarımcısı olan ürünler için, doygunluk ayarlı otomatik bir ters çevirme başlangıç noktası olarak kabul edilebilir. Marka standartları ve gerçek kullanıcıları olan bir ürünün yayınlanmış karanlık modu olarak ise hayır. Otomatik karanlık modlar vurgu renklerinde başarısız olur, illüstrasyonda başarısız olur ve bileşen durumlarında başarısız olur. Bunlar bitmiş bir sistem değil, bir başlangıç eskizidir.

OKLCH karanlık modu kurmayı kolaylaştırır mı?

Çarpıcı biçimde. OKLCH'nin algısal olarak tekdüze lightness ekseni, yükseklik katmanları arasındaki lightness adımlarının tonlar boyunca beklendiği gibi davranması demektir. HSL'de turuncudaki 5 puanlık bir adım, mavideki 5 puanlık bir adımdan farklı görünür. OKLCH'de görünmez. Yükseklik modelini OKLCH'de kurmak, adımların vurgu tonundan bağımsız olarak tutarlı hissettirmesi demektir. OKLCH renk için tam gerekçe matematiği derinlemesine ele alır.

Semantik token'lar aydınlık ve karanlık arasında farklı mı olmalı, yoksa yalnızca primitive'ler mi?

Primitive'ler farklıdır. Semantikler aynı kalır. --color-surface her iki modda da "varsayılan içerik yüzeyi" anlamına gelir. İşaret ettiği primitive karanlık modda farklıdır. İki katmanlı mimarinin amacı budur. Bileşenler semantiklere başvurur. Semantikler primitive'lere başvurur. Mod anahtarı primitive'leri yeniden atar. Bileşenler otomatik ve doğru şekilde güncellenir.

---

Karanlık mod sistemlerinin gerçekte açtığı değişim

Gerçek bir karanlık mod, paralel bir tasarım yüzeyidir. Sonradan akla gelen bir şey değil. Bir ayarlar toggle'ı değil. Kendi yapısı, kendi kısıtları ve kendi zanaat kararları olan ikinci bir yüzey. Onu böyle ele alan ekipler gece 2'de bilinçli görünen ürünler yayınlar. Sadece şalteri çeviren ekipler ise biri bitirmeyi unutmuş gibi görünen ürünler yayınlar.

Yükseklik modeli temeldir. Doygunluk azaltma kuralı ve vurgu kalibrasyonu zanaat katmanıdır. OKLCH token haritası uygulamadır. Titremeyen mod geçişli üç durumlu toggle yayın koşuludur. Her parça birbirine bağlıdır. Sonucun iyi olmasını istiyorsanız hiçbiri isteğe bağlı değil.

Paralel sistemi kurun. Haritayı yayınlayın. Fark kendini gösterir.

---

Öğlen ters çevrilmiş gibi değil, gece 2'de bilinçli görünen bir karanlık mod mu istiyorsunuz? Brainy, yükseklik modeli, vurgu kalibrasyonu ve Figma ile CSS'e bırakmaya hazır OKLCH token haritasıyla paralel karanlık renk sistemleri tasarlar. Brainy'yi tutun.

---

Şimdi drafts/dark-mode-color-systems.md dosyasına kaydediliyor.