Koyu mod SVG logosu: Rengi neyin yöneteceğini seçin

Koyu mod SVG logosunun açık bir tema bilgisi kaynağına ihtiyacı vardır. Sayfa CSS'si satır içi SVG yollarını biçimlendirebilir. Görüntü öğesiyle yüklenen dış SVG'nin kendi stil bağlamı vardır; ancak içindeki prefers-color-scheme sorgusu, gömen öğenin renk şemasına tepki verebilir. Elle seçilen tema sınıfı ve kullanıcının açık/koyu tercihi ayrı girdilerdir; çizimi hangisinin yöneteceğini belirleyin.

Onaylanmış açık ve koyu yüzey sürümleri varsa koruyun. Her rengi tersine çevirmek vurgu rengini değiştirebilir, bilinçli konturu kaybettirebilir veya onaylanmamış logo üretebilir. Tema desteği, çizim doğru olduktan sonra verilen renk ve entegrasyon kararıdır.

Kullanıcı tercihini sayfa temasından ayırın

CSS prefers-color-scheme medya özelliği, tarayıcının veya işletim sisteminin ilettiği açık/koyu tercihini algılar. MDN bu tercih girdilerini anlatır. Web sitesinin kendi data-theme="dark" niteliği, CSS veya kod ona etki verene kadar yalnızca uygulama durumudur.

Bu ayrım yaygın bir uyuşmazlığı açıklar: ziyaretçi bir web sitesinde koyu yüzey seçerken tarayıcı tercihi açık kalır. Yalnızca tercihi izleyen logo, koyu sayfada açık yüzey renklerini koruyabilir.

color-scheme özelliği başka kontroldür. Tarayıcıya öğenin hangi şemaları desteklediğini söyler; yazarın belirlediği her dolguyu otomatik yeniden tasarlamaz. MDN özellik referansı, tarayıcının yönettiği görüntülemeyle yazarın yine sağlaması gereken tema stillerini ayırır.

Üç bağımsız tema mekanizması ekleyip uyuşmalarını ummayın. Görünen rengi ayıklamadan önce hedef yöneticiyi adlandırın.

Elle temalanan satır içi logoda sayfa seçicileri kullanın

Satır içi SVG sayfa belgesine aittir; hedefli seçiciler yollarına ulaşabilir. Satır içi SVG ve görüntü karşılaştırmamız bu erişim sınırını daha ayrıntılı açıklar.

İki renk rolü olan F biçimli işaret çizdik: ana şekil ve ayrı dairesel vurgu. Bu örnek renkler özgün seçimlerdir; marka standardı değildir.

.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }

Kuralları sitedeki her yola değil, hedef satır içi çizime uygulayın. Logoda birden fazla bilinçli renk, maske veya degrade olabilir. SVG renklendirme rehberimiz, stilleri değiştirmeden şekli gerçekte neyin boyadığını incelemeyi anlatır.

Şeklin kendi öğesinin metin rengini paylaşması gerektiğinde currentColor yararlıdır. Çok renkli logo için zorunlu değildir. Tasarım başka renk istiyorsa vurguyu ayrı tutun ve her hedef yüzeyde bütün işareti kontrol edin.

Dış SVG kendi iç medya kurallarını yönetsin

Dış görüntü ayrı bir stil bağlamıdır. HTML görüntü öğesine color: rebeccapurple vermek içeri ulaşıp rastgele yolları yeniden renklendirmez. SVG dosyasının içindeki currentColor bile otomatik olarak ana sayfanın metin rengine dönüşmez.

Bunun yerine dosya kendi tema kurallarını içerebilir. Özgün testimizde kullanılan küçük uyarlanabilir SVG'nin tamamı şöyledir:

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
  viewBox="0 0 140 105">
  <style>
    .ink { fill: #183c35; }
    .accent { fill: #c58868; }
    @media (prefers-color-scheme: dark) {
      .ink { fill: #f5f0e7; }
      .accent { fill: #ffc34d; }
    }
  </style>
  <path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
  <circle class="accent" cx="102" cy="73" r="17"/>
</svg>

Gömülü SVG görüntüsünün tercih sorgusu, gömen öğenin kullanılan renk şemasını yansıtabilir. CSS Color Adjustment standardı bu ilişkiyi anlatır. Bu bir şema sinyalidir; ana sayfanın olağan CSS seçicilerinin dosyanın içine geçmesi değildir.

Test düzeneğimizde bir ana öğe açıkça color-scheme: light, diğeri color-scheme: dark ayarlar. İkisi de aynı uyarlanabilir dosyayı yükler. Arka plan ve metin renkleri de bilinçli tanımlanmıştır. Yalnızca özelliği ayarlamak bu tam stilleri sağlamaz.

Bu yaklaşımda temayı uygulamanız yönetiyorsa ana öğe şemasını o seçimle eşgüdümlü tutun. Koyu arka planda ana öğenin hâlâ açık bildirmesi, hedeflediğinizden farklı sinyal gönderebilir.

Üç yolu gerçek tarayıcıda karşılaştırın

Özgün HTML düzeneğimizin üstünde iki sabit şemalı ana öğe bulunur. Altlarında bir düğme, satır içi işaret ve sabit renkli dış görüntü için sayfanın elle seçilen temasını değiştirir. Dış kontrol dosyasında aynı geometri vardır, ancak koyu tema medya kuralı yoktur.

Tarayıcı açık kullanıcı tercihi bildirdi. Elle tema düğmesine tıklamak satır içi ana dolguyu rgb(24, 60, 53) değerinden rgb(245, 240, 231) değerine, vurgusunu rgb(197, 136, 104) değerinden rgb(255, 195, 77) değerine değiştirdi. Tercih göstergesi açık kaldı. Renk değişimini sayfanın kendi seçicileri sağladı.

Üstteki iki görüntü, kendi ana öğe şemalarının seçtiği açık ve koyu renkleri gösterdi. Sabit dış görüntü ise çevresindeki yüzey koyulaşıp HTML görüntü öğesinin hesaplanan color değeri mor olmasına rağmen yeşil ve bakır çizimini korudu.

Hesaplanan stilleri ve gerçek görüntüyü inceledik. Üç dış görüntü de 140 × 105 doğal ölçüleriyle yüklendi ve 280 × 210 boyutunda gösterildi. Test, bu dosyaların bu tarayıcı oturumundaki davranışını doğrular. Tarayıcılar arası, e-posta istemcisi, PDF dışa aktarma veya işletim sistemi değiştirme testi değildir.

Yalnızca dosyayı değil, son kullanımı test edin

Geometrisini kontrol etmek için özgün SVG'yi ayrı açın; sonra gerçek sayfa gömmesi içinde inceleyin. İki tema durumunu, vurguyu, saydam açıklıkları ve hemen arkasındaki zemini kontrol edin. Duyarlı logo dar boyutta kompozisyon da değiştirebilir; duyarlı logo düzeni rehberimiz bu ayrı kararı ele alır.

Dış SVG görüntüsünün kısıtları vardır: MDN betiklerin devre dışı olduğunu ve dış kaynakların sınırlandığını belirtir. Buradaki yaklaşım için gerekli stilleri varlığın içinde tutup gerçek teslim bağlamını test edin. Tarayıcı sonucu, e-posta görüntüleyicisinde veya tasarım içe aktarıcısında aynı davranışı vaat etmez.

Uygun logo yalnızca PNG veya JPEG olarak varsa PerfectVector'ın logo vektörleştirme iş akışı, aday SVG için yolları yeniden oluşturabilir. Tema sürümlerini hazırlamadan silueti, harfleri ve küçük aralıkları kaynakla karşılaştırın. Vektörleştirme anlamsal renk rolleri atamaz, uygulamanızın tema mantığını eklemez veya ters marka sürümünü onaylamaz. Test işaretimiz doğrudan vektör şekillerle çizildi.

Sık sorulan sorular

Koyu sayfa dış SVG logosunu otomatik renklendirir mi? Hayır. Görüntünün iç renk kuralları önemlidir. Uyarlanabilir dış SVG, gömen öğenin renk şemasıyla kendi tercih sorgusunu kullanabilir; sabit renkli SVG özgün renklerini koruyabilir.

Elle eklenen koyu tema sınıfı prefers-color-scheme'i değiştirir mi? Tek başına değiştirmez. Sınıf veya veri niteliği uygulama durumudur. Testimizde sayfanın elle teması değişirken tarayıcının kullanıcı tercihi sorgusu açık kaldı.

Koyu mod için SVG logosunun tüm renklerini ters çevirmeli miyim? Onaylı sürümler varsa kullanın. Genel ters çevirmenin tasarımı koruduğunu varsaymak yerine hedef yüzeyde ana rengi, vurguyu, konturları ve açıklıkları inceleyin.

Kaynaklar

1. MDN: prefers-color-scheme — Kullanıcı tercihi girdileri ve gömülü SVG davranışı.
2. MDN: color-scheme — Şema desteği ve yazarın ayrı stil sorumluluğu.
3. CSS Color Adjustment: Kullanılan renk şemasının etkileri — Gömülü içeriğe verilen şema sinyali.
4. MDN: Görüntü olarak SVG — Görüntü bağlamında betik ve kaynak kısıtları.

Yalnızca raster logodan düzenlenebilir yollar mı gerekiyor? Aday SVG oluşturup inceleyin, kabul edilen ana dosyayı koruyun; ardından renk rollerini tanımlayıp gerçek temalı sayfayı test edin.