> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Logo SVG w trybie ciemnym: co steruje kolorami

> Wybierz, czy logo SVG ma reagować na preferencję użytkownika, czy motyw strony. Porównaj CSS inline, adaptacyjny plik zewnętrzny i stałą grafikę w przeglądarce.

Source: https://perfectvector.com/pl/blog/dark-mode-svg-logo

Language: pl
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) rozróżnia rendering zarządzany przez przeglądarkę od stylów motywu, które nadal musi dostarczyć autor.

| Zamierzony podmiot sterujący    | Sposób integracji                                                                      | Co sprawdzić                                                      |
| ------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| Ręczny motyw aplikacji          | Ścieżki inline stylowane selektorami motywu strony                                     | Oba kolory logo zmieniają się wraz z motywem strony               |
| Schemat powierzchni osadzającej | Zewnętrzny SVG z własnymi regułami medialnymi oraz właściwy schemat kolorów gospodarza | Ten sam plik wybiera zamierzone kolory w każdym miejscu osadzenia |
| Dostarczony stały wariant marki | Wybór właściwego zatwierdzonego pliku w aplikacji                                      | Wybrany plik pasuje do tła i zachowuje poprawną nazwę             |

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](https://perfectvector.com/pl/blog/inline-svg-vs-img) 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.

```css
.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](https://perfectvector.com/pl/blog/how-to-change-svg-color) 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:

```xml
<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](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) 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.

![Rzeczywista próbka w przeglądarce porównująca ten sam adaptacyjny zewnętrzny SVG na jasnym i ciemnym tle, ręcznie przełączane logo inline oraz stały zewnętrzny obraz kontrolny zachowujący oryginalne kolory](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp)

*Rzeczywisty autorski test HTML/CSS w przeglądarce wbudowanej w Codex. Ręczny motyw strony jest ciemny, podczas gdy zapytanie o preferencję użytkownika zgłasza jasny. Schematy gospodarzy w górnym rzędzie są jawnymi danymi testu; preferencji systemu operacyjnego nie zmieniano.*

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](https://perfectvector.com/pl/blog/responsive-svg-logo-lockup) omawia tę osobną decyzję.

Zewnętrzny obraz SVG ma ograniczenia: [MDN podaje, że skrypty są wyłączone, a zasoby zewnętrzne ograniczone](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). 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](https://perfectvector.com/pl/vectorize-logo) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Źródła preferencji użytkownika i zachowanie osadzonego SVG.
2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Obsługa schematów i osobna odpowiedzialność autora za style.
3. [CSS Color Adjustment: skutki używanego schematu kolorów](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Sygnał schematu przekazywany osadzonej zawartości.
4. [MDN: SVG jako obraz](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — 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](https://perfectvector.com/pl/vectorize-logo), zachowaj zaakceptowany wzorzec, a następnie zdefiniuj role kolorów i przetestuj rzeczywistą stronę z motywem.

## Explore

- [Read the HTML article](https://perfectvector.com/pl/blog/dark-mode-svg-logo)
- [Zarezerwuj miejsce na logo SVG i zatrzymaj przesunięcia](https://perfectvector.com/pl/blog/svg-logo-layout-reservation.md)
- [Usuń odstęp pod SVG inline za pomocą układu CSS](https://perfectvector.com/pl/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)