> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Koyu mod SVG logosu: Rengi neyin yöneteceğini seçin > SVG logonun kullanıcı tercihini mi, sayfa temasını mı izleyeceğini seçin. Satır içi CSS'yi, uyarlanabilir dış dosyayı ve sabit çizimi tarayıcıda karşılaştırın. Source: https://perfectvector.com/tr/blog/dark-mode-svg-logo Language: tr Author: Irene Kim Published: 2026-10-22T08:00:00+09:00 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). 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ı](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme), tarayıcının yönettiği görüntülemeyle yazarın yine sağlaması gereken tema stillerini ayırır. | Hedef yönetici | Entegrasyon seçimi | Doğrulanacak | | ------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------ | | Uygulamanın elle seçilen teması | Sayfanın tema seçicileriyle biçimlenen satır içi yollar | Sayfa teması değiştiğinde iki logo rengi de değişir | | Gömen yüzeyin şeması | Kendi medya kuralları olan dış SVG ve uygun ana öğe renk şeması | Aynı dosya her ana öğede hedef renkleri seçer | | Verilen sabit marka sürümü | Uygulamada doğru onaylı varlığı seçme | Seçilen dosya yüzeye uyar ve doğru adlandırılmış kalı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](https://perfectvector.com/tr/blog/inline-svg-vs-img) 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. ```css .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](https://perfectvector.com/tr/blog/how-to-change-svg-color), 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: ```xml ``` 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ı](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) 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. ![Açık ve koyu ana öğelerde aynı uyarlanabilir dış SVG'yi, elle temalanan satır içi logoyu ve özgün renklerini koruyan sabit dış kontrolü karşılaştıran gerçek tarayıcı düzeneği](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp) *Codex uygulama içi tarayıcısında gerçek özgün HTML/CSS testi. Sayfanın elle seçilen teması koyuyken kullanıcı tercihi sorgusu açık bildirir. Üst sıra şemaları açıkça verilen test girdileridir; işletim sistemi tercihi değiştirilmedi.* 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](https://perfectvector.com/tr/blog/responsive-svg-logo-lockup) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). 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ışı](https://perfectvector.com/tr/vectorize-logo), 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Kullanıcı tercihi girdileri ve gömülü SVG davranışı. 2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Şema desteği ve yazarın ayrı stil sorumluluğu. 3. [CSS Color Adjustment: Kullanılan renk şemasının etkileri](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Gömülü içeriğe verilen şema sinyali. 4. [MDN: Görüntü olarak SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — 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](https://perfectvector.com/tr/vectorize-logo), kabul edilen ana dosyayı koruyun; ardından renk rollerini tanımlayıp gerçek temalı sayfayı test edin. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/dark-mode-svg-logo) - [SVG Logo Düzen Kaymasını Alan Ayırarak Önleyin](https://perfectvector.com/tr/blog/svg-logo-layout-reservation.md) - [Satır içi SVG altındaki boşluğu CSS düzeniyle giderin](https://perfectvector.com/tr/blog/inline-svg-baseline-gap.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)