Karanlık Mod İçin Logo ve İkon Nasıl Hazırlanır?
Açık arka plan için tasarlanmış bir logo, karanlık mod devreye girdiğinde iki şekilde sorun çıkarır: ya görünmez hale gelir — koyu renkli bir logonun siyah arka planda kaybolması gibi — ya da arka planla çarpışarak okunaksız bir görüntü oluşturur. Bu sorun sayfanın tüm içeriği için değil, yalnızca görsel dosyaları için geçerlidir; CSS ile yazılan metinler ve SVG ikonlar renk temasına çok daha kolay adapte edilebilir. Ama <img> etiketi aracılığıyla sunulan logo ve ikon dosyaları, dosya ikili (binary) olduğu için CSS renk değişkenlerinin dışında kalır — ve bu ayrım doğru çözümü belirler.
Karanlık mod için görsel hazırlamak, temanın renk değişkenlerini güncellemekten farklı bir iş gerektirir. İki yol vardır: ya görselin kendisi temayı algılayarak adapte olur — bu yalnızca SVG formatında mümkündür — ya da doğru görselin doğru temada sunulması HTML veya CSS katmanında yönetilir. Raster formatlarda, yani PNG ve WebP dosyalarında, bu ikinci yol kaçınılmazdır: aydınlık ve karanlık mod için ayrı dosyalar hazırlanır ve tarayıcıya hangisini göstereceği söylenir.
Her iki yaklaşımın da birden fazla uygulama biçimi vardır. Tercih, logo veya ikonun hangi formatta olduğuna, sayfada nasıl gömüldüğüne ve ne kadar esneklik istendiğine bağlı olarak değişir. Bu yüzden "karanlık mod için görsel hazırlama" sorusunun tek bir cevabı yoktur; ama hangi durumda hangi yöntemin daha temiz çalıştığı oldukça belirgindir.
SVG'de prefers-color-scheme ile dahili adaptasyon
SVG, prefers-color-scheme media query'yi doğrudan kendi içinde destekler. Bu, aynı SVG dosyasının kullanıcının sistem temasına göre farklı renkler gösterebileceği anlamına gelir — ek bir HTML ya da CSS müdahalesi gerekmez. Mantık CSS'teki media query mantığının aynısıdır; yalnızca dosyanın içine yazılır:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<style>
.logo-mark { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
.logo-mark { fill: #ffffff; }
}
</style>
<path class="logo-mark" d="M10 10 h180 v40 h-180 Z"/>
</svg>Bu yaklaşım birkaç koşulda düzgün çalışır. SVG'nin <img> etiketiyle değil, inline olarak ya da <object> etiketiyle sayfaya gömülmesi gerekir — çünkü <img src="logo.svg"> ile yüklenen SVG'ler güvenlik kısıtlamaları nedeniyle iç stil bloklarını çalıştırmaz. Inline SVG ise doğrudan DOM'un parçasıdır ve prefers-color-scheme media query'yi tam olarak destekler.
Inline SVG'nin dezavantajı HTML şişkinliğidir. Basit bir logo için birkaç satır sorun yaratmaz; ama karmaşık illüstrasyon veya çok katmanlı SVG dosyaları HTML'e inline gömüldüğünde hem kaynak kodu okunaksızlaşır hem de tarayıcı önbelleğinin görsel dosya için çalışma imkânı ortadan kalkar. Bu denge, küçük ve sade logolar için inline SVG'yi cazip kılar; büyük ve karmaşık SVG'ler için ise dışarıda bırakıp farklı bir yönteme geçmek daha mantıklıdır.
SVG'nin logo ve ikon kullanımındaki genel avantajları düşünüldüğünde, bu format zaten birçok projede tercih edilebilir konumdadır. Karanlık mod desteği bu tercihe ek bir güç katar: tek dosya, tema bağımsız, herhangi bir sayfa tarafında koordinasyon gerekmez.
Raster formatlar için çift dosya stratejisi
PNG veya WebP formatındaki logo ve ikonlarda SVG'nin dahili adaptasyon imkânı yoktur. Bu durumda çözüm, iki ayrı dosya hazırlamaktır: biri açık tema için, diğeri karanlık tema için. Koyu renkli bir logo için beyaz versiyonu, açık renkli bir logo için koyu ya da siyah versiyonu ayrı dosyalar olarak export edilir.
Dosya adlandırması bu işi ileriye taşımak için önemlidir. Yaygın bir yaklaşım şu şekildedir:
logo-light.webp — açık tema içinlogo-dark.webp — karanlık tema için
Alternatif olarak bazı ekipler tek bir "logo.webp" adı kullanır ve karanlık versiyonu ayrı bir klasöre koyar. Hangisi seçilirse seçilsin önemli olan tutarlılıktır; aynı projedeki tüm bileşenler aynı adlandırma kuralını izlemelidir.
Dosyaların boyutu ve formatı için standart logo boyutu kararları geçerlidir. Karanlık mod versiyonu ayrı bir dosya olduğu için tüm optimize adımları bu dosyaya da uygulanmalıdır: gereksiz metadata temizleme, uygun boyuta ölçekleme ve lossless WebP sıkıştırması. İki versiyonun dosya boyutları birbirine yakın olmamalıdır demek yanlış olur — renk dağılımına bağlı olarak bir versiyon diğerinden daha verimli sıkıştırılabilir; bu normaldir.
HTML picture etiketi ile tema bazlı görsel servisi
İki dosya hazırlandıktan sonra hangisinin gösterileceğini yönetmenin en temiz HTML yolu <picture> etiketidir. <picture>, <source> elemanlarıyla birden fazla kaynak tanımlamaya izin verir; tarayıcı media query'ye göre hangi kaynağı kullanacağına karar verir:
<picture>
<source
srcset="/img/logo-dark.webp"
media="(prefers-color-scheme: dark)">
<img
src="/img/logo-light.webp"
alt="Örnek logo"
width="200"
height="60">
</picture>Bu yapıda tarayıcı karanlık mod aktifse logo-dark.webp'yi, değilse logo-light.webp'yi yükler. <img> etiketi hem açık tema için varsayılan kaynağı hem de erişilebilirlik için zorunlu olan alt niteliğini taşır. <picture> etiketini desteklemeyen eski tarayıcılar doğrudan <img> kaynağına düşer — bu da güvenli bir fallback sağlar.
picture etiketinin birden fazla <source> kabul ettiği unutulmamalıdır. Hem format hem de tema koşullarını bir arada yönetmek istenirse şu yapı kurulabilir:
<picture>
<source
srcset="/img/logo-dark.avif"
media="(prefers-color-scheme: dark)"
type="image/avif">
<source
srcset="/img/logo-dark.webp"
media="(prefers-color-scheme: dark)">
<source
srcset="/img/logo-light.avif"
type="image/avif">
<img
src="/img/logo-light.webp"
alt="Örnek logo"
width="200"
height="60">
</picture>Bu yapı AVIF destekleyen tarayıcılara AVIF, desteklemeyenlere WebP sunar ve her iki format grubunda karanlık mod ayrımını korur. Kaynak sayısı arttıkça yönetim yükü de artar; küçük projeler için iki kaynaklı sade versiyon çoğu zaman yeterlidir.
CSS ile arka plan logolarında dark mode yönetimi
Logo CSS background-image olarak kullanılıyorsa — bazı header tasarımlarında veya dekoratif öğelerde bu durum karşılaşılabilir — prefers-color-scheme media query'yi doğrudan CSS içine yazmak mümkündür:
.site-logo {
background-image: url('/img/logo-light.webp');
}
@media (prefers-color-scheme: dark) {
.site-logo {
background-image: url('/img/logo-dark.webp');
}
}Bu yaklaşım HTML'i temiz tutar ama CSS background-image'ın preload scanner tarafından görülmemesi gibi performans kısıtlamalarını beraberinde getirir. Logo LCP kapsamındaysa — yani sayfanın ilk ekranında en büyük görsel öğeyse — CSS background olarak kullanmak bu görselin geç yüklenmesine neden olabilir. Logolar çoğunlukla LCP görseli değildir; ama bu durumun kontrol edilmesi önerilir.
CSS custom property'leriyle daha esnek bir yapı da kurulabilir: tema değişkenini JavaScript aracılığıyla güncellemek ve CSS'in bu değişkene göre görsel seçmesini sağlamak. Bu yöntem, sistem temasına bağımlı kalmak yerine kullanıcının site içinde manuel olarak tema değiştirebildiği durumlarda işe yarar. Sistem temasını prefers-color-scheme ile okuyup bir class veya data attribute ile sayfaya uygulamak ve CSS'i bu class'a göre yazmak bu iş akışının temelini oluşturur.
Favicon ve apple-touch-icon için karanlık mod
Favicon ekosistemi karanlık mod desteği açısından özel bir konumdadır. SVG favicon, tıpkı inline SVG gibi prefers-color-scheme media query'yi destekler — ve bu bugün için en temiz favicon karanlık mod çözümüdür:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">SVG favicon içine yazılan media query, tarayıcı sekmesinde ve yer imlerinde tema geçişlerini otomatik olarak yansıtır. Chrome, Firefox ve Safari'nin güncel sürümleri SVG favicon'ı destekler. Eski tarayıcılar için .ico formatında fallback sağlamak yeterlidir:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Apple Touch Icon ise farklı bir tablodur. apple-touch-icon.png dosyası iOS ana ekranına ekleme davranışını kontrol eder ve bu bağlamda prefers-color-scheme desteği yoktur — iOS bu dosyayı sabit renk schemasıyla işler. Pratik sonuç şudur: apple-touch-icon için tek bir dosya yeterlidir ve bu dosyanın her iki temada da okunabilir kalması için genellikle renkli arka plan üzerine yerleştirilmiş beyaz ikon tercih edilir. Böylece hem açık hem karanlık temada kimlik korunur.
Web manifest dosyasındaki ikonlar da benzer bir kısıtlama içindedir. Bazı tarayıcılar ve işletim sistemleri manifest ikonlarında prefers-color-scheme medya koşulunu desteklemeye başlamıştır; ama destek henüz evrensel değildir. Bu eksiklik için en yaygın geçici çözüm yine renkli arka planlı ikon tasarımıdır — arka plan rengi hem açık hem koyu temada ikonun ön plandan bağımsız tanınabilir kalmasını sağlar.
Karanlık mod logo ve ikon hazırlığının özü iki farklı karardan oluşur: hangi formatta çalışıyorsunuz ve görsel HTML'e nasıl gömülüyor? SVG inline veya <object> ile kullanılıyorsa prefers-color-scheme media query dosyanın içine yazılır ve tek dosyayla her iki tema karşılanır. Raster formatlarda iki ayrı dosya hazırlanır ve <picture> etiketiyle ya da CSS media query'siyle doğru dosya doğru temada sunulur.
Bu kararları erken vermek, özellikle yeni bir proje kurulurken, sonradan düzeltme maliyetini ortadan kaldırır. Logo tasarımı henüz tamamlanmamışken hem açık hem karanlık tema versiyonunu tasarımcıdan talep etmek; SVG kullanımının mümkün olduğu yerlerde bunu tercih etmek; favicon için SVG ve .ico fallback ikilisini standart olarak benimsemek — bu küçük alışkanlıklar karanlık mod desteğini operasyonel bir yük olmaktan çıkarır.