Logo SVG Mode Gelap: Tentukan Pengendali Warnanya

Logo SVG untuk mode gelap memerlukan sumber informasi tema yang jelas. CSS halaman dapat mengatur gaya jalur SVG inline. SVG eksternal yang dimuat melalui elemen gambar memiliki konteks gayanya sendiri, tetapi kueri prefers-color-scheme di dalamnya dapat merespons skema warna elemen yang menyematkannya. Kelas tema manual dan preferensi terang/gelap pengguna merupakan masukan terpisah; tentukan mana yang harus mengendalikan gambar.

Pertahankan varian yang telah disetujui untuk permukaan terang dan gelap jika tersedia. Membalik semua warna dapat mengubah aksen, menghilangkan kontur yang disengaja, atau menghasilkan logo yang belum disetujui. Dukungan tema merupakan keputusan pewarnaan dan integrasi setelah gambar itu sendiri benar.

Bedakan preferensi pengguna dari tema halaman

Fitur media CSS prefers-color-scheme mendeteksi preferensi terang/gelap yang disampaikan oleh browser atau sistem operasi. MDN menjelaskan masukan preferensi tersebut. Atribut data-theme="dark" milik situs hanyalah status aplikasi sampai CSS atau kode memberinya efek.

Perbedaan itu menjelaskan ketidakcocokan yang umum: preferensi browser tetap terang, sementara pengunjung memilih permukaan gelap di dalam satu situs. Logo yang hanya mengikuti preferensi dapat mempertahankan warnanya untuk permukaan terang pada halaman gelap itu.

Properti color-scheme merupakan kontrol lain. Properti ini memberi tahu browser skema mana yang didukung elemen; properti tersebut tidak otomatis mendesain ulang setiap fill yang ditentukan pembuat. Referensi properti MDN membedakan rendering yang dikelola browser dari pengaturan gaya tema yang tetap harus disediakan pembuat.

Jangan menambahkan tiga mekanisme tema independen lalu berharap semuanya selaras. Tentukan pengendali yang dimaksud sebelum menelusuri masalah warna yang terlihat.

Gunakan selector halaman untuk logo inline bertema manual

SVG inline merupakan bagian dari dokumen halaman, sehingga selector yang ditargetkan dapat menjangkau jalurnya. Perbandingan SVG inline dan gambar menjelaskan batas akses itu lebih terperinci.

Kami membuat tanda berbentuk F dengan dua peran warna: bentuk utama dan aksen lingkaran terpisah. Warna ilustratif ini merupakan pilihan contoh asli, bukan standar merek.

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

Terapkan aturan ini pada gambar inline yang dimaksud, bukan setiap jalur di situs. Logo dapat memiliki beberapa warna, mask, atau gradasi yang disengaja. Panduan mengubah warna SVG membahas cara memeriksa apa yang sebenarnya mewarnai bentuk sebelum mengubah gayanya.

Menggunakan currentColor berguna ketika bentuk harus memakai warna teks elemennya. Ini bukan keharusan untuk logo beraneka warna. Pisahkan aksen ketika desain memerlukan warna berbeda, dan periksa keseluruhan tanda pada setiap permukaan yang dituju.

Biarkan SVG eksternal mengatur aturan media internalnya

Gambar eksternal memiliki konteks gaya terpisah. Menetapkan color: rebeccapurple pada elemen gambar HTML-nya tidak menjangkau bagian dalam dan mewarnai ulang sembarang jalur. Bahkan currentColor di dalam berkas SVG tidak otomatis menjadi warna teks halaman host.

Sebagai gantinya, berkas dapat memuat aturan temanya sendiri. Berikut SVG adaptif kecil lengkap yang digunakan dalam pengujian asli kami:

<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>

Untuk gambar SVG yang disematkan, kueri preferensinya dapat mencerminkan skema warna yang digunakan oleh elemen penyemat. Spesifikasi CSS Color Adjustment menjelaskan hubungan itu. Ini merupakan sinyal skema, bukan selector CSS biasa milik halaman host yang menyeberang ke dalam berkas.

Dalam fixture kami, satu host secara eksplisit menetapkan color-scheme: light; host lain menetapkan color-scheme: dark. Keduanya memuat berkas adaptif yang sama. Warna latar dan teksnya juga sengaja ditentukan. Menetapkan properti itu saja tidak akan menyediakan seluruh gaya tersebut.

Jika aplikasi Anda mengendalikan tema, sesuaikan skema host dengan pilihan itu saat menggunakan pendekatan ini. Latar gelap dengan host yang tetap menyatakan terang dapat mengirim sinyal berbeda dari yang Anda maksud.

Bandingkan ketiga cara dalam browser sebenarnya

Fixture HTML asli kami memiliki dua host berskema tetap di bagian atas. Di bawahnya, sebuah tombol mengubah tema manual halaman untuk tanda inline dan gambar eksternal berwarna tetap. Berkas kontrol eksternal itu memuat geometri yang sama, tetapi tidak memiliki aturan media tema gelap.

Browser melaporkan preferensi pengguna terang. Mengeklik tombol tema manual mengubah fill utama inline dari rgb(24, 60, 53) menjadi rgb(245, 240, 231), dan aksennya dari rgb(197, 136, 104) menjadi rgb(255, 195, 77). Pembacaan preferensi tetap terang. Selector halaman sendiri yang menyebabkan perubahan warna itu.

Dua gambar atas menampilkan warna terang dan gelap yang dipilih oleh masing-masing skema host. Gambar eksternal tetap mempertahankan gambar hijau dan tembaganya meskipun permukaan di sekitarnya menjadi gelap dan nilai color terhitung pada elemen gambar HTML-nya berwarna ungu.

Kami memeriksa gaya terhitung dan hasil render sebenarnya. Ketiga gambar eksternal dimuat dengan ukuran alami 140 × 105 dan ditampilkan pada 280 × 210. Pengujian ini memastikan perilaku berkas tersebut dalam sesi browser ini. Ini bukan pengujian lintas browser, klien email, ekspor PDF, atau pergantian sistem operasi.

Uji penggunaan akhir, bukan hanya berkas tersendiri

Buka SVG asli secara terpisah untuk memeriksa geometrinya, lalu periksa melalui penyematan halaman yang sebenarnya. Periksa kedua status tema, aksen, bukaan transparan, dan latar tepat di sekelilingnya. Logo responsif juga dapat mengubah komposisi pada ukuran sempit; panduan susunan logo responsif membahas keputusan terpisah itu.

Gambar SVG eksternal memiliki pembatasan: MDN mencatat bahwa skrip dinonaktifkan dan sumber daya eksternal dibatasi. Simpan gaya yang diperlukan di dalam aset untuk pendekatan yang ditunjukkan di sini, dan uji konteks pengiriman sebenarnya. Hasil browser tidak menjamin perilaku yang sama pada perender email atau pengimpor desain.

Untuk logo yang sesuai tetapi hanya tersedia sebagai PNG atau JPEG, alur vektorisasi logo PerfectVector dapat merekonstruksi jalur sebagai kandidat SVG. Bandingkan siluet, huruf, dan celah kecilnya dengan sumber sebelum menyiapkan varian tema. Vektorisasi tidak menetapkan peran warna semantis, menambahkan logika tema aplikasi, atau menyetujui varian merek dengan warna terbalik. Tanda pengujian kami dibuat langsung sebagai bentuk vektor.

Tanya jawab

Apakah halaman gelap otomatis mewarnai ulang logo SVG eksternal? Tidak. Aturan warna di dalam gambar tetap penting. SVG eksternal adaptif dapat menggunakan kueri preferensinya sendiri dengan skema warna elemen penyemat; SVG berwarna tetap dapat mempertahankan warna aslinya.

Apakah kelas tema gelap manual mengubah prefers-color-scheme? Tidak dengan sendirinya. Kelas atau atribut data adalah status aplikasi. Dalam pengujian kami, tema manual halaman berubah sementara kueri preferensi pengguna browser tetap terang.

Haruskah saya membalik semua warna logo SVG untuk mode gelap? Gunakan varian yang telah disetujui jika tersedia. Periksa warna utama, aksen, kontur, dan bukaan pada permukaan yang dituju, alih-alih menganggap pembalikan menyeluruh mempertahankan desain.

Sumber

1. MDN: prefers-color-scheme — Masukan preferensi pengguna dan perilaku SVG yang disematkan.
2. MDN: color-scheme — Dukungan skema dan tanggung jawab terpisah pembuat untuk pengaturan gaya.
3. CSS Color Adjustment: efek skema warna yang digunakan — Sinyal skema yang diberikan kepada konten yang disematkan.
4. MDN: SVG sebagai gambar — Pembatasan skrip dan sumber daya dalam konteks gambar.

Memerlukan jalur yang dapat diedit dari logo yang hanya tersedia sebagai raster? Buat dan periksa kandidat SVG, simpan master yang diterima, lalu tentukan peran warna dan uji halaman bertema yang sebenarnya.