Logo SVG w trybie ciemnym: co steruje kolorami

Logo SVG w trybie ciemnym potrzebuje jednoznacznego źródła informacji o motywie. CSS strony może stylować ścieżki SVG osadzonego inline. Zewnętrzny SVG wczytany przez element obrazu ma własny kontekst stylów, ale jego wewnętrzne zapytanie prefers-color-scheme może reagować na schemat kolorów elementu osadzającego. Ręczna klasa motywu oraz preferencja jasnego lub ciemnego wyglądu użytkownika to osobne dane wejściowe; ustal, które mają sterować grafiką.

Zachowaj zatwierdzone warianty na jasne i ciemne tło, jeśli istnieją. Odwrócenie wszystkich kolorów może zmienić akcent, usunąć celowy kontur albo utworzyć niezatwierdzoną wersję logo. Obsługa motywu to decyzja dotycząca kolorowania i integracji podejmowana po poprawnym przygotowaniu samej grafiki.

Oddziel preferencję użytkownika od motywu strony

Funkcja medialna CSS prefers-color-scheme wykrywa preferencję jasnego lub ciemnego wyglądu przekazywaną przez przeglądarkę lub system operacyjny. MDN opisuje te źródła preferencji. Własny atrybut witryny data-theme="dark" jest jedynie stanem aplikacji, dopóki CSS lub kod nie nada mu działania.

To rozróżnienie wyjaśnia częstą rozbieżność: przeglądarka nadal zgłasza jasną preferencję, choć odwiedzający wybrał ciemne tło w jednej witrynie. Logo reagujące wyłącznie na preferencję może zachować kolory przeznaczone na jasne tło na tej ciemnej stronie.

Właściwość color-scheme to kolejne ustawienie. Informuje przeglądarkę, jakie schematy obsługuje element; nie przeprojektowuje automatycznie każdego wypełnienia zdefiniowanego przez autora. Dokumentacja właściwości w MDN rozróżnia rendering zarządzany przez przeglądarkę od stylów motywu, które nadal musi dostarczyć autor.

Nie dodawaj trzech niezależnych mechanizmów motywu z nadzieją, że będą zgodne. Przed diagnozowaniem widocznego koloru określ, kto ma nim sterować.

Użyj selektorów strony dla ręcznego motywu logo inline

SVG inline należy do dokumentu strony, więc odpowiednio dobrane selektory mogą dotrzeć do jego ścieżek. Nasze porównanie SVG inline z obrazem dokładniej wyjaśnia tę granicę dostępu.

Narysowaliśmy znak F z dwiema rolami kolorystycznymi: głównym kształtem i osobnym okrągłym akcentem. Te przykładowe kolory wybrano na potrzeby autorskiego przykładu; nie są standardem marki.

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

Stosuj te reguły do zamierzonej grafiki inline, a nie do każdej ścieżki w witrynie. Logo może zawierać kilka celowo dobranych kolorów, masek lub gradientów. Nasz poradnik zmiany kolorów SVG omawia sprawdzanie, co rzeczywiście maluje kształt, przed zmianą jego stylów.

currentColor przydaje się, gdy kształt ma współdzielić kolor tekstu swojego elementu. Nie jest wymagany w wielokolorowym logo. Zachowaj osobny akcent, gdy projekt wymaga innego koloru, i sprawdź cały znak na każdym docelowym tle.

Pozwól zewnętrznemu SVG zarządzać własnymi regułami medialnymi

Zewnętrzny obraz stanowi osobny kontekst stylów. Ustawienie color: rebeccapurple na jego elemencie obrazu HTML nie dociera do wnętrza i nie zmienia dowolnych ścieżek. Nawet currentColor wewnątrz pliku SVG nie staje się automatycznie kolorem tekstu strony gospodarza.

Plik może zamiast tego zawierać własne reguły motywu. Oto kompletny mały adaptacyjny SVG użyty w naszym autorskim teście:

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

W osadzonym obrazie SVG zapytanie o preferencję może odzwierciedlać używany schemat kolorów elementu osadzającego. Specyfikacja CSS Color Adjustment opisuje tę zależność. Jest to sygnał schematu, a nie zwykłe selektory CSS strony gospodarza przechodzące do wnętrza pliku.

W naszej próbce jeden gospodarz jawnie ustawia color-scheme: light, a drugi color-scheme: dark. Oba wczytują ten sam plik adaptacyjny. Ich kolory tła i tekstu również zdefiniowano celowo. Sama właściwość nie zapewniłaby tych kompletnych stylów.

Jeśli motywem zarządza aplikacja, przy tym podejściu skoordynuj schemat gospodarza z jej wyborem. Ciemne tło z gospodarzem nadal deklarującym jasny schemat może wysyłać inny sygnał, niż zamierzasz.

Porównaj trzy podejścia w rzeczywistej przeglądarce

Nasza autorska próbka HTML ma na górze dwa obszary osadzenia o stałych schematach. Pod nimi przycisk zmienia ręczny motyw strony dla znaku inline i zewnętrznego obrazu o stałych kolorach. Ten zewnętrzny plik kontrolny zawiera tę samą geometrię, ale nie ma reguły medialnej ciemnego motywu.

Przeglądarka zgłaszała jasną preferencję użytkownika. Kliknięcie przycisku ręcznego motywu zmieniło główne wypełnienie inline z rgb(24, 60, 53) na rgb(245, 240, 231), a akcent z rgb(197, 136, 104) na rgb(255, 195, 77). Odczyt preferencji pozostał jasny. Zmianę kolorów wywołały własne selektory strony.

Dwa górne obrazy pokazywały jasne i ciemne kolory wybrane przez schematy ich gospodarzy. Stały obraz zewnętrzny zachował zielono-miedzianą grafikę, mimo że jego otoczenie stało się ciemne, a obliczona wartość color elementu obrazu HTML była fioletowa.

Sprawdziliśmy obliczone style i rzeczywisty wynik renderowania. Wszystkie trzy obrazy zewnętrzne wczytały się z naturalnymi wymiarami 140 × 105 i wyświetlały w wymiarach 280 × 210. Test potwierdza zachowanie tych plików w tej sesji przeglądarki. Nie jest testem wielu przeglądarek, klientów poczty, eksportu PDF ani przełączania preferencji systemu operacyjnego.

Sprawdź końcowe użycie, nie tylko sam plik

Otwórz oryginalny SVG osobno, aby sprawdzić geometrię, a następnie obejrzyj go przez rzeczywiste osadzenie na stronie. Sprawdź oba motywy, akcent, przezroczyste otwory i bezpośrednie tło. Responsywne logo może też zmieniać kompozycję przy małej szerokości; nasz poradnik responsywnego układu logo omawia tę osobną decyzję.

Zewnętrzny obraz SVG ma ograniczenia: MDN podaje, że skrypty są wyłączone, a zasoby zewnętrzne ograniczone. W pokazanym podejściu umieść wymagane style wewnątrz pliku i przetestuj rzeczywisty kontekst dostarczania. Wynik w przeglądarce nie gwarantuje takiego samego zachowania w programie pocztowym ani importerze aplikacji projektowej.

Dla odpowiedniego logo dostępnego tylko jako PNG lub JPEG proces wektoryzacji logo w PerfectVector może odtworzyć ścieżki wstępnej wersji SVG. Przed przygotowaniem wariantów motywu porównaj sylwetkę, liternictwo i małe szczeliny ze źródłem. Wektoryzacja nie przypisuje semantycznych ról kolorom, nie dodaje logiki motywu aplikacji ani nie zatwierdza odwróconego wariantu marki. Nasz znak testowy narysowano bezpośrednio jako kształty wektorowe.

FAQ

Czy ciemna strona automatycznie zmieni kolory zewnętrznego logo SVG? Nie. Nadal znaczenie mają wewnętrzne reguły kolorowania obrazu. Adaptacyjny zewnętrzny SVG może korzystać z własnego zapytania o preferencję wraz ze schematem elementu osadzającego; SVG o stałych kolorach może zachować oryginalne barwy.

Czy ręczna klasa ciemnego motywu zmienia prefers-color-scheme? Nie sama z siebie. Klasa lub atrybut danych to stan aplikacji. W naszym teście ręczny motyw strony się zmieniał, a zapytanie przeglądarki o preferencję użytkownika nadal zgłaszało jasny wygląd.

Czy należy odwrócić wszystkie kolory logo SVG dla trybu ciemnego? Korzystaj z zatwierdzonych wariantów, jeśli są dostępne. Sprawdź główny kolor, akcent, kontury i otwory na docelowym tle, zamiast zakładać, że ogólne odwrócenie kolorów zachowa projekt.

Źródła

1. MDN: prefers-color-scheme — Źródła preferencji użytkownika i zachowanie osadzonego SVG.
2. MDN: color-scheme — Obsługa schematów i osobna odpowiedzialność autora za style.
3. CSS Color Adjustment: skutki używanego schematu kolorów — Sygnał schematu przekazywany osadzonej zawartości.
4. MDN: SVG jako obraz — Ograniczenia skryptów i zasobów w kontekście obrazu.

Potrzebujesz edytowalnych ścieżek z logo dostępnego tylko jako raster? Utwórz i sprawdź wstępną wersję SVG, zachowaj zaakceptowany wzorzec, a następnie zdefiniuj role kolorów i przetestuj rzeczywistą stronę z motywem.