Wikipedia:Narzędzia/Ciemny Wektor

Ciemny Wektor – narzędzie, które przełącza Wikipedię w tryb ciemny. Współpracuje ze skórką Wektor oraz z wersją mobilną strony.

Po zainstalowaniu, w bocznym menu pojawia się dodatkowy link, umożliwiający przełączanie między motywami.

Instrukcja instalacji

Gadżet

Od czerwca 2021 narzędzie jest dostępne w preferencjach, w zakładce „Gadżety”, w sekcji „Wygląd” (opis: „Ciemny Wektor – tryb ciemny dla skórki Wektor (w wersji klasycznej i 2022) oraz skórki dla wersji mobilnej. Włączenie gadżetu powoduje wyświetlenie przełącznika „Tryb jasny”/„Tryb ciemny”, który jest dostępny w menu strony.”).

Skrypt użytkownika (instalacja ręczna)

Alternatywnie Ciemnego Wektora można włączyć, edytując pliki Specjalna:Moja strona/common.css oraz Specjalna:Moja strona/common.js w sposób przedstawiony poniżej. Możesz się pokusić również o włączenie motywu ciemnego również na innych wersjach językowych Wikipedii albo w projektach siostrzanych, jednak nadmienię, że nie wszędzie go testowałem.

Jeśli aktywujesz niniejsze narzędzie w innym projekcie niż polskojęzyczna Wikipedia, dołącz odpowiedni dodatek, który odpowiednio wystylizuje elementy takie jak strona główna.

W swoim pliku common.css dopisz następującą linijkę:

@import url(https://vector-dark.toolforge.org/getcss.php);

Ważne, aby znalazła się na początku pliku (przed nią mogą się znajdować jedynie inne dyrektywy @import).

Natomiast do pliku common.js wklej tę linijkę (tutaj nie ma wymogu, by było to na początku):

mw.loader.load("//pl.wiki.x.io/w/index.php?title=Wikipedysta:Msz2001/vector.dark.js&action=raw&ctype=text/javascript");

Powyższe polecenia tworzą odwołanie do odpowiednich plików z kodem i zapewniają, że w razie ich aktualizacji, od razu zobaczysz zmiany. Z przyczyn technicznych, jeśli nie korzystasz z gadżetu, arkusz CSS ładowany jest z zewnętrznego serwera (należącego do Fundacji Wikimedia). Nie wykorzystuję tego do śledzenia Ciebie ani odwiedzanych przez Ciebie stron. Nie zliczam również osób, które z ciemnej skórki korzystają.

Dodatki

Powstało również kilka dodatków do ciemnej odmiany Wektora. Są one domyślnie zainstalowane w przypadku korzystania z gadżetu Ciemny Wektor (#Gadżet). Odpowiadają one za stylizację niektórych gadżetów:

Popups (nazwa arkusza: popups)
Kolorowanie nazw użytkowników (nazwa arkusza: user_colors)
Alternatywny sposób kolorowania stron dyskusji (nazwa arkusza: talk_colors)
Wyszukiwanie i zamiana (nazwa arkusza: search_replace)

Poniższe dodatki poprawiają wygląd konkretnych projektów:

commons
plwikinews
wikidata

Jeżeli wybrano instalację ręczną narzędzia, dołącza się je bardzo podobnie jak główny arkusz stylów. Otwórz swój plik common.css i wklej do niego poniższą linię:

@import url(https://vector-dark.toolforge.org/getcss.php?f=);

A następnie za ?f=, ale przed nawiasem zamykającym wpisz nazwę arkusza, odpowiadającego dodatkowi (np. user_colors). Jeśli chcesz zainstalować więcej niż jeden dodatek, nazwy arkuszy możesz rozdzielić znakiem średnika ;. Pamiętaj, że wtedy musisz wprost wskazać również, że chcesz również pobrać główny arkusz, który nazywa się core, na przykład poniższy kod załaduje ciemną skórkę razem z dodatkami dla Popups i kolorowania nazw użytkowników:

@import url(https://vector-dark.toolforge.org/getcss.php?f=core;popups;user_colors);

Jak wyłączyć tryb ciemny?

Jeśli chcesz wyłączyć chwilowo – użyj linku „Tryb jasny” w bocznym menu (szósta pozycja od góry). Ustawienie jest zapisywane w preferencjach użytkownika i pamiętane na wszystkich urządzeniach, gdzie jesteś zalogowany(-a). W wersji mobilnej, przełącznik znajduje się w menu, wysuwanym z lewej strony.
Jeśli chcesz całkowicie odinstalować narzędzie – usuń linijki kodu, które wstawiłeś(-aś) przy okazji instalacji skórki.

Zgłaszanie błędów

Błędy i elementy interfejsu, które pozostają jasne, można zgłaszać autorowi (Msz2001) na jego stronie dyskusji.

Dziękuję wszystkim, którzy zgłaszając błędy w skórce, przyczynili się do poprawienia jej jakości. W szczególności podziękowania należą się XaxeLoled oraz AramilFeraxa. Dziękuję też Peter Bowman za dodanie tej skórki do gadżetów.

Technikalia, czyli jak to działa

Dołączany plik CSS jest zbiorem wielu reguł, z których każda rozpoczyna się od html:not(.disable-dark-skin). Obecność odpowiednich klas na elemencie <html> służy do przełączania motywów (zajmuje się tym skrypt JavaScript).

Ze względu na to, że Wikipedia nigdy nie była tworzona z myślą o trybie ciemnym, na niektórych stronach część elementów jest pokolorowana na sztywno. Dlatego też arkusz stylów wykorzystuje przeróżne hacki aby przynajmniej część z tych miejsc przyciemnić.

Narzędzie jest rozdzielone na dwa gadżety. Jeden z nich odpowiada za przełączanie trybów, a drugi zawiera właściwy CSS. Dzięki temu, nawet przed wykonaniem się kodu JavaScript, strona zostanie wyświetlona w odpowiednim motywie.

Kod źródłowy narzędzia (w postaci m.in. surowych plików SCSS) jest hostowany w repozytorium na GitLabie: https://gitlab.wikimedia.org/toolforge-repos/vector-dark.