Wikipedia:Narzędzia/Ciemny Wektor

Z Wikipedii, wolnej encyklopedii
Przejdź do nawigacji Przejdź do wyszukiwania
Strona główna Wikipedii w ciemnej szacie
Artykuł Wikipedia w ciemnej szacie
Artykuł Wikipedia w ciemnej szacie – dalsza część
Artykuł Wikipedia w ciemnej szacie – dół strony
Fragment zrzutu ekranu ukazujący boczne menu z linkiem do zmiany skórki

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

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

Instrukcja instalacji[edytuj | edytuj kod]

Gadżet[edytuj | edytuj kod]

Od czerwca 2021 narzędzie jest dostępne w preferencjach, w sekcji „Wygląd” (opis: „Ciemny Wektor – tryb ciemny dla klasycznej skórki Wektor (w wersji 2019) oraz skórki dla wersji mobilnej.”).

Skrypt użytkownika (instalacja ręczna)[edytuj | edytuj kod]

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 testowałem go tam.

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("/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, arkusz CSS hostowany jest na zewnętrznym serwerze (należącym 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[edytuj | edytuj kod]

Powstało również kilka dodatków do ciemnej odmiany Wektora. 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)
  • Przenieś do brudnopisu (nazwa arkusza: sandbox)

Powyższe dodatki są domyślnie zainstalowane w przypadku korzystania z gadżetu (#Gadżet). Jeżeli wybrano instalację ręczną, 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, musisz wkleić powyższą linijkę kodu wielokrotnie – po jednym razie dla arkusza.

Jak wyłączyć tryb ciemny?[edytuj | edytuj kod]

  • Jeśli chcesz wyłączyć chwilowo – użyj linku „Tryb jasny” w bocznym menu (szósta pozycja od góry). Ustawienie jest zapisywane w pliku cookie i zostanie zresetowane po zamknięciu przeglądarki. 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.

Konfiguracja[edytuj | edytuj kod]

Domyślnie narzędzie jest skonfigurowane tak, by łączyć się z serwerem ToolForge jedynie w celu pobrania arkusza stylów. To może powodować, że jeśli włączysz tryb jasny i odświeżysz stronę przez chwilę (sekundę lub krócej) Wikipedia załaduje się w ciemnym motywie, aby następnie automatycznie się przełączyć na jasny. Można to obejść dopisując do pliku common.js poniższą linijkę. Powoduje ona, że przy każdym naciśnięciu przycisku „Tryb jasny” lub „Tryb ciemny” informacja o tym trafi na serwer z plikami CSS w celu przygotowania odpowiedniego arkusza dla Ciebie (tj. domyślnie jasny lub domyślnie ciemny). Dla ścisłości podkreślę tylko, że poniższa linia nie jest w żaden sposób wymagana do działania narzędzia.

window.Msz2001_vectorDark_pingujCookie = true;

Zgłaszanie błędów[edytuj | edytuj kod]

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[edytuj | edytuj kod]

Dołączany plik CSS jest zbiorem wielu reguł, z których każda rozpoczyna się od html.enable-dark-skin lub 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ć.

Kod CSS jest ładowany dużo wcześniej niż skrypty. Z tego powodu, gdybym utrzymywał go również na Wikipedii, mogłyby zdarzać się sytuacje, w których po wczytaniu strony, czarne tło błysnęłoby przez około sekundę, zanim skrypt odczyta preferencje użytkownika co do motywu. Aby temu zapobiec, serwer, na którym przechowywany jest plik arkusza stylów decyduje, jaki wariant skórki przesłać do przeglądarki (domyślnie jasny lub domyślnie ciemny). Aby mógł on to zrobić, konieczne jest pamiętanie ustawień w plikach cookie. Za to odpowiadają żądania wykonywane do tego serwera w momencie przełączenia trybu jasny/ciemny.

Jak już wcześniej napisałem, nie wykorzystuję tego serwera w żadnym innym celu niż dostarczanie odpowiednich wersji arkusza stylów do Twojej przeglądarki.

Kod źródłowy narzędzia jest hostowany w repozytorium na Phabricatorze: https://phabricator.wikimedia.org/source/tool-vector-dark/repository/master/, natomiast JavaScript na Wikipedii: Wikipedysta:Msz2001/vector.dark.js.