> For the complete documentation index, see [llms.txt](https://newpanel.docs.emaillabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://newpanel.docs.emaillabs.io/poradniki/wyglad-i-zawartosc-e-maili/projektowanie-dla-trybu-ciemnego-dark-mode.md).

# Projektowanie dla Trybu Ciemnego (Dark Mode)

Coraz więcej użytkowników korzysta z trybu ciemnego w swoich systemach i aplikacjach pocztowych. Klient poczty automatycznie odwraca wtedy kolory (jasne tło staje się ciemne, a ciemny tekst staje się jasny), co może zepsuć wygląd Twojego e-maila, jeśli nie został on do tego przygotowany.

## Najczęstsze Problemy

* Ciemne logo lub ikony stają się niewidoczne na ciemnym tle.
* Jasne grafiki uzyskują nieestetyczne, ostre krawędzie.
* Odwrócone kolory marki wyglądają źle i tracą spójność wizualną.
* Separatory i tła zlewają się ze sobą.

## Jak Projektować pod Dark Mode

### Używaj Obrazów z Przezroczystym Tłem (PNG)&#x20;

Dotyczy to zwłaszcza logo i ikon. Dzięki przezroczystości (`.png`) grafiki te lepiej dopasują się do dynamicznie zmienionego tła, niezależnie od tego, czy będzie ono ciemnoszare, czy czarne.

### Dodaj Obrys Ciemnym Elementom Graficznym&#x20;

Jeśli musisz użyć ciemnego logo lub ważnych grafik bez przezroczystości, rozważ dodanie do nich bardzo cienkiego, jasnego obrysu (np. białego lub jasnoszarego). Dzięki temu pozostaną one widoczne, gdy tło e-maila zostanie odwrócone na ciemne.

### Dodaj Meta Tagi w `<head>` (Wskazówka Techniczna)&#x20;

Umieszczenie poniższych meta tagów w sekcji `<head>` szablonu informuje klienta poczty, że Twoja wiadomość wspiera oba tryby kolorystyczne. Może to pomóc w uzyskaniu bardziej przewidywalnego efektu.

```
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
```

### Użyj Dedykowanych Styli (Metoda Zaawansowana)&#x20;

Możesz użyć *media query* `@media (prefers-color-scheme: dark) { ... }`, aby zdefiniować inne style CSS specjalnie dla trybu ciemnego (np. zamienić logo na jaśniejszą wersję, dostosować kolory tła). Pamiętaj jednak, że wsparcie dla tej techniki jest nadal ograniczone. Niektórzy klienci (np. Apple Mail) uszanują te style, a inni (np. Gmail) i tak wymuszą własną inwersję kolorów.

### Testuj, Testuj, Testuj!&#x20;

Zawsze sprawdzaj wygląd swoich e-maili w popularnych klientach pocztowych z włączonym trybem ciemnym (np. Gmail na mobile, Apple Mail, Outlook). Profesjonalne narzędzia do testowania e-maili (np. Litmus from Validity, Sinch Email on Acid) oferują podglądy w dark mode, co znacznie ułatwia ten proces.

{% hint style="info" %}
**Pamiętaj:** Osiągnięcie idealnego wyglądu w każdym kliencie poczty w trybie ciemnym jest niezwykle trudne. Skup się przede wszystkim na zapewnieniu czytelności i użyteczności wiadomości, nawet jeśli jej wygląd nie będzie perfekcyjny.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://newpanel.docs.emaillabs.io/poradniki/wyglad-i-zawartosc-e-maili/projektowanie-dla-trybu-ciemnego-dark-mode.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
