Pomoc:Tryb ciemny
Od lipca 2024 na Wikipedii dostępny jest tryb ciemny zapewniany przez MediaWiki. Większość elementów interfejsu automatycznie dostosowuje się do wybranego przez użytkownika motywu kolorystycznego. W szczególności dotyczy to interfejsu dookoła treści artykułu oraz często używanych szablonów. Należy mieć jednak na uwadze, że nie dzieje się to magicznie i niektóre zabiegi autorów artykułów mogą psuć komfort korzystania z treści w trybie ciemnym.
Przez ponad 20 lat Wikipedię czytało się wyłącznie w jasnym motywie kolorystycznym, a wszelkie narzędzia zmieniające ten stan rzeczy były jedynie nieoficjalnymi projektami członków społeczności, dostępnymi wyłącznie dla zalogowanych użytkowników Wikipedii (oraz w aplikacji mobilnej, z której mało kto korzysta), co ograniczało grupę osób dotkniętych problemami natury estetycznej oraz dostępności treści. Zmieniło się to, od kiedy Fundacja Wikimedia wprowadziła oficjalny, ciemny motyw kolorystyczny – dlatego też powinno się te kwestie traktować poważniej.
Co powoduje problemy?
edytujZmiana motywu kolorystycznego z jasnego na ciemny nie jest prostym odwróceniem kolorów. Niektóre elementy, jak np. obrazki albo legendy map i wykresów muszą pozostać niezmienione, podczas gdy inne (np. wyróżnienie drużyn piłkarskich awansujących do wyższej ligi) mogłyby mieć inny odcień koloru. Na poziomie wikikodu (i stylów w HTML) podaje się jednak konkretny kolor, a nie intencję autora strony. Powoduje to, że MediaWiki nie jest w stanie zaaplikować ogólnych poprawek do fragmentów treści, pokolorowanych na sztywno przez ich autora.
Można założyć, że we wszystkich miejscach, gdzie w treści strony jest określony kolor tła lub czcionki, potencjalnie mogą wystąpić problemy z czytelnością. W szczególności dotyczy to sytuacji, gdy ustawiony jest sam kolor tła lub sam kolor czcionki – nie można już zakładać, że tło jest domyślnie zawsze białe a czcionka czarna. Podanie koloru dla obu tych parametrów pozwoli upewnić się, że tekst będzie zawsze czytelny, ale może pogorszyć doznania estetyczne; białe plamy w trybie ciemnym nie są szczególnie pożądanym rozwiązaniem.
Problemy mogą również się pojawić w miejscach, gdzie osadzane są obrazki z przezroczystym tłem i czarnymi konturami, takie jak wzory chemiczne. MediaWiki nie jest w stanie automatycznie określić, że taki obrazek jest równie wartościowy, gdy odwróci się jego kolory i czarny zamieni na biały. W konsekwencji wyświetla się on oryginalnie, a więc z pewną częścią (lub całością) elementów niewidocznych.
Jak naprawić nieczytelne i brzydkie miejsca?
edytujW pierwszej kolejności warto się zająć w szczególności tymi fragmentami, które są słabo czytelne lub nieczytelne. Estetyka oczywiście jest ważna, ale jej brak przynajmniej nie przeciwdziała korzystaniu z treści. Większość stron z nieczytelnymi elementami znajduje się na liście generowanej przez linter. Problemy z szablonami warto zgłosić przy stoliku technicznym kawiarenki.
Ciemny tekst na ciemnym tle
edytujZdarzają się strony, gdzie kolor czcionki jest zmieniany na inny, na przykład „na rysunku etykietą 6 oznaczono skrzydła samolotu”. Na początku warto rozważyć, czy stosowanie koloru czcionki jest konieczne. Jeśli nie, najprostszym i najlepszym rozwiązaniem może być po prostu usunięcie kodu, który ten kolor wymusza. Jeśli kolor musi koniecznie zostać, zalecanym rozwiązaniem będzie dodanie do elementu białego tła, za pomocą reguły stylów background: white;, jak w przykładzie poniżej.
Ponieważ sugerowane tutaj podejście wpłynie na estetykę artykułu w trybie ciemnym, warto również rozważyć zastosowanie jednej ze zmiennych CSS do pokolorowania tekstu. Dzięki temu wykorzystany zostanie inny odcień koloru w obu motywach. Jest to podejście bardziej zaawansowane i wymaga nieco więcej znajomości CSS.
| Przed zmianą | Po zmianie Tryb ciemny | |
|---|---|---|
| Tryb jasny | Tryb ciemny | |
na rysunku etykietą '''<span style="color:blue;">6</span>''' oznaczono skrzydła samolotu
|
na rysunku etykietą '''<span style="color:blue; background:white;">6</span>''' oznaczono skrzydła samolotu
| |
| na rysunku etykietą 6 oznaczono skrzydła samolotu | na rysunku etykietą 6 oznaczono skrzydła samolotu | na rysunku etykietą 6 oznaczono skrzydła samolotu |
| Przed zmianą | Po zmianie Tryb ciemny | |
|---|---|---|
| Tryb jasny | Tryb ciemny | |
na rysunku etykietą '''<span style="color:blue;">6</span>''' oznaczono skrzydła samolotu
|
na rysunku etykietą '''<span style="color:var(--color-progressive, #36c);">6</span>''' oznaczono skrzydła samolotu
| |
| na rysunku etykietą 6 oznaczono skrzydła samolotu | na rysunku etykietą 6 oznaczono skrzydła samolotu | na rysunku etykietą 6 oznaczono skrzydła samolotu |
Grafiki „czarno na czarnym”
edytujGrafiki, takie jak np. wzory chemiczne czy schematy, korzystające z ciemnych linii na przezroczystym tle (czyli czarnym w trybie ciemnym), są niewątpliwie przydatne w artykułach i rozwiązaniem nie jest usunięcie ich. Nie ma również potrzeby przygotowywania alternatywnej wersji pliku graficznego. Do odwracania kolorów grafiki w trybie ciemnym służy klasa skin-invert-image, jak pokazano poniżej.
| Przed zmianą | Po zmianie Tryb ciemny | |
|---|---|---|
| Tryb jasny | Tryb ciemny | |
[[Plik:Aldehyde2.png|150px]]
|
[[Plik:Aldehyde2.png|150px|class=skin-invert-image]]
| |
|
|
|
Jasne tabelki
edytujMożna spotkać tabele, które zamiast korzystać ze standardowego stylu, definiują swój własny kolor tła i nagłówków. Wiele z tych wystąpień znajduje się w artykułach napisanych dawno i potem nieedytowanych. Jeśli nie ma przesłanki, by zachować niestandardowe formatowanie, należy przerobić tabelkę na typową stylistycznie, korzystającą z deklaracji class="wikitable".
| Przed zmianą | Po zmianie | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tryb jasny | Tryb ciemny | Tryb jasny | Tryb ciemny | ||||||||||||||||
{| border="1" cellspacing="0"
|- style="text-align:center; background:#eee; color:black"
| '''Tytuł 1'''
| '''Tytuł 2'''
|- style="background:#fafafa; color:black"
| Komórka 3
| Komórka 4
|}
|
{| class="wikitable"
! Tytuł 1
! Tytuł 2
|-
| Komórka 3
| Komórka 4
|}
| ||||||||||||||||||
|
|
|
| ||||||||||||||||
Komórki nagłówkowe w kolumnie „Po zmianie – tryb ciemny” mają inne tło niż zwykłe komórki. Dostrzeżenie tego na tej stronie może być utrudnione ze względu na sąsiedztwo dużych elementów z jasnym tłem.
Porady dla twórców szablonów
edytujW tej sekcji są zawarte bardziej zaawansowane porady. Stosowanie ich w artykułach może być niezalecane lub nieefektywne na szerszą skalę.
Istotne klasy CSS
edytujNastępujące klasy CSS mają znaczenie w kontekście dostosowania elementów interfejsu do trybu ciemnego:
notheme– wyłącza motyw kolorystyczny dla tego elementu i potomnych; będą wyświetlane tak jak w trybie jasnym;skin-invert– w trybie ciemnym odwraca kolory elementu;skin-invert-image– w trybie ciemnym odwraca kolory grafik (<img>) zawartych w elemencie;mw-no-invert– zapobiega odwróceniu kolorów w elemencie, który domyślnie ma takie zachowanie (przydatne raczej przy pisaniu gadżetów, korzystających z OOUI lub Codex).
Korzystanie ze zmiennych CSS
edytujWykorzystywana w MediaWiki biblioteka Codex zapewnia szereg zmiennych CSS, których wartości automatycznie zmieniają się w zależności od wybranego przez użytkownika motywu. Jest to preferowany sposób stylizowania elementów, ponieważ pozwala zredukować ilość kodu CSS oraz umożliwia nadanie semantyki poszczególnym kolorom.
Uwaga! Zmienne CSS dostępne są wyłącznie w skórkach Wektor 2022 i Minerva. Aby utrzymać zgodność z pozostałymi, należy stosować wartość domyślną (drugi argument konstrukcji var()). Warto również pamiętać, że obsługa zmiennych CSS wewnątrz TemplateStyles jest ograniczona – dozwolone jest jedynie odczytywanie wartości zmiennej, nie zaś ustawianie jej.
- Przykład wykorzystania zmiennej w wikikodzie
<span style="background-color: var(--background-color-error, #d73333); color: var(--color-inverted, #fff);"></span>
- Przykład zastosowania zmiennej w CSS
.error {
background-color: var(--background-color-error, #d73333);
color: var(--color-inverted, #fff);
}
| Zmienna | Motyw jasny | Motyw ciemny | ||
|---|---|---|---|---|
--color-base |
#202122 | #eaecf0 | ||
--color-base--hover |
#404244 | #f8f9fa | ||
--color-emphasized |
#000 | #f8f9fa | ||
--color-subtle |
#54595d | #a2a9b1 | ||
--color-inverted |
#fff | #101418 | ||
--color-progressive |
#36c | #6d8af2 | ||
--color-progressive--hover |
#447ff5 | #afb6e9 | ||
--color-progressive--active |
#2a4b8d | #c2d1f0 | ||
--color-destructive |
#d73333 | #ff4242 | ||
--color-destructive--hover |
#ff4242 | #ef8174 | ||
--color-destructive--active |
#b32424 | #f8a397 | ||
--color-visited |
#6b4ba1 | #977dbd | ||
--color-destructive--visited |
#a55858 | #b97876 | ||
--color-error |
#d73333 | #ff4242 | ||
--color-warning |
#edab00 | #fc3 | ||
--color-success |
#14866d | #00af89 | ||
--color-notice |
#202122 | #f8f9fa | ||
--color-content-added |
#006400 | #74c9ac | ||
--color-content-removed |
#8b0000 | #ef8174 | ||
--box-shadow-color-base |
#000 | #fff | ||
--box-shadow-color-inverted |
#fff | #000 | ||
--background-color-interactive |
#eaecf0 | #27292d | ||
--background-color-interactive-subtle |
#f8f9fa | #202122 | ||
--background-color-disabled |
#c8ccd1 | #54595d | ||
--background-color-disabled-subtle |
#eaecf0 | #404244 | ||
--background-color-progressive-subtle |
#eaf3ff | #1c2940 | ||
--background-color-destructive-subtle |
#fee7e6 | #421211 | ||
--background-color-error |
#d73333 | #ff4242 | ||
--background-color-error--hover |
#ff4242 | #ef8174 | ||
--background-color-error--active |
#b32424 | #f8a397 | ||
--background-color-error-subtle |
#fee7e6 | #421211 | ||
--background-color-warning-subtle |
#fef6e7 | #301d00 | ||
--background-color-success-subtle |
#d5fdf4 | #00261e | ||
--background-color-notice-subtle |
#eaecf0 | #202122 | ||
--background-color-content-added |
#a3d3ff | #2a4b8d | ||
--background-color-content-removed |
#ffe49c | #a66200 | ||
--background-color-backdrop-light |
rgba(255, 255, 255, 0.65) | rgba(0, 0, 0, 0.65) | ||
--background-color-backdrop-dark |
rgba(0, 0, 0, 0.65) | rgba(255, 255, 255, 0.65) | ||
--background-color-base |
#fff | #101418 | ||
--background-color-neutral |
#eaecf0 | #27292d | ||
--background-color-neutral-subtle |
#f8f9fa | #202122 | ||
--background-color-inverted |
#101418 | #f8f9fa | ||
--border-color-base |
#a2a9b1 | #72777d | ||
--border-color-interactive |
#72777d | #a2a9b1 | ||
--border-color-disabled |
#c8ccd1 | #54595d | ||
--border-color-subtle |
#c8ccd1 | #54595d | ||
--border-color-muted |
#eaecf0 | #404244 | ||
--border-color-inverted |
#fff | #101418 | ||
--border-color-error |
#b32424 | #ff4242 | ||
--border-color-error--hover |
#ff4242 | #ef8174 | ||
--border-color-warning |
#a66200 | #fc3 | ||
--border-color-success |
#096450 | #00af89 | ||
--border-color-notice |
#54595d | #c8ccd1 | ||
--border-color-content-added |
#a3d3ff | #2a4b8d | ||
--border-color-content-removed |
#ffe49c | #a66200 | ||
Czarne linki w tabelach
edytujW wielu artykułach występują tabelki, gdzie wybrane komórki lub całe wiersze są oznaczane kolorami tła. Rzadko kiedy kolory te były dobierane z myślą, że tryb kolorystyczny zostanie ustawiony na ciemny i czcionka będzie miała inny kolor. Z tego powodu, kolor czcionki linków w tabelach bywa wymuszany na czarny. Dzieje się to, gdy element tabeli (cała tabela, wiersz lub komórka) ma ustawiony kolor tła (background), ale w stylach nie pojawia się transparent (w domyśle w background:transparent) ani inherit (w domyśle w color:inherit). Oznacza to, że nawet jeśli kolor czcionki zostanie ustawiony na wartość zmiennej CSS, to linki będą cały czas czarne i nieczytelne. Aby to obejść, do styli elementu z tłem należy dodać jedno z dwóch wspomnianych słów, wyłączających ten efekt. Zalecana jest deklaracja color:inherit, ale jeśli efekt ma być inny, po niej można powtórzyć color z innym kolorem czcionki.
Dostosowywanie się do wybranego motywu
edytujJeśli zastosowanie zmiennych CSS jest niemożliwe lub niepraktyczne, na wybrany przez użytkownika motyw kolorystyczny można reagować z wewnątrz arkusza stylów CSS. Należy wówczas przygotować dodatkowe reguły, uzależnione od klas skin-theme-clientpref-night i skin-theme-clientpref-os w elemecie <html>. Pierwsza z nich jest obecna wtedy, gdy użytkownik wybrał tryb ciemny, a druga – automatyczne dostosowanie motywu do ustawień przeglądarki lub systemu.
Warto też pamiętać, by deklaracje styli w trybie ciemnym znajdowały się wewnątrz dyrektywy @media screen. Drukowanie strony z czarnym tłem nie ma uzasadnienia ekonomicznego i lepiej tego unikać. Dyrektywa @media nie jest konieczna, jeśli korzysta się ze zmiennych CSS, dostarczanych przez Codex.
Przykładowy arkusz CSS, jaki mógłby być wykorzystany dla szablonu:
/* Deklaracja domyślna - dla jasnego motywu */
.element { background-color: #ddd; color: #444; }
@media screen {
/* Deklaracja dla ciemnego motywu */
html.skin-theme-clientpref-night .element { background-color: #383838; color: #fff; }
}
@media screen and (prefers-color-scheme: dark) {
/* Deklaracja dla ustawionego automatycznego motywu */
html.skin-theme-clientpref-os .element { background-color: #383838; color: #fff; }
}
Tryb ciemny MediaWiki a Ciemny Wektor
edytujTryb ciemny wprowadzony do MediaWiki w 2024 był rozwijany niezależnie od dostępnego na polskiej Wikipedii od 2019 roku gadżetu Ciemny Wektor. Z tego powodu decyzje projektowe oraz wybór konkretnych kolorów różnią się między oboma rozwiązaniami. W różny sposób podchodzą również do szablonów i elementów ze stylami określonymi wprost w kodzie artykułu. Z tego powodu strona, która poprawnie wygląda w jednym z tych motywów, nie musi wyglądać poprawnie w drugim.
Powinno się preferować zgodność artykułów i szablonów z wbudowanym w MediaWiki trybem ciemnym, ponieważ mogą z niego korzystać również czytelnicy Wikipedii. Dla porównania, Ciemny Wektor jest dostępny jedynie dla zalogowanych (włączyło go jedynie ok. 1,5 tys. osób). Przykłady i zalecenia przedstawione powyżej powstały z myślą o systemowym trybie ciemnym. Ich zastosowanie przygotuje artykuły również pod potencjalne wprowadzenie innych motywów (takich jak np. sepia, dostępna w aplikacji mobilnej).