Full Dark Theme - ciemny motyw dla peppera

maj 13. 2019
Pepper.pl - Full Dark Theme 2019/2023

Witam, po wielu pytaniach w dyskusjach oraz uzyskanych odpowiedziach że ciemny motyw oficjalnie się nie pojawi, stwierdziłem że trzeba wziąć sprawy w swoje ręce.

No to lecimy.

Potrzebujemy jeden z dodatków do przeglądarek, a mianowicie Stylus, Greasemonkey lub Tampermonkey.
Uwaga: Nie polecam dodatku Stylish ponieważ jest podejrzany o szpiegowanie użytkowników.


Mozilla Firefox:

Google Chrome:

Opera:

Apple Safari:

Microsoft Edge:


Po wybraniu i zainstalowaniu, pobieramy ciemny motyw z tego linku:
Pobierz
* - Greasemonkey i Tampermonkey instalujemy poprzez kliknięcie przycisku "Install style as userscript"


Galeria obrazów:
imgur.com/gallery/ds0207k

Założenie było aby wyeliminować biały kolor i jego pochodne w jak największym stopniu, co wydaje mi się raczej się udało. Jeśli będzie duże zainteresowanie to w miarę możliwości (czas) będę się starał aktualizować ciemny motyw, dajcie znać jeśli znajdziecie jakieś błędy (nie-ostylowane miejsca).

Wołam zainteresowanych:
@KiedysToByło@DMX@phyrz

Pozdrawiam

PS. Nie jestem Front-End Developerem / Designerem więc nie bijcie jak znajdziecie jakieś rażące byki.
Aktualizacje społecznościowe
Różne

76 Komentarzy

sortowanie:
Avatar
  1. Avatar
    @Janusz Hej Dzięki za Twoją robotę. Mam pytanie w sumie - dlaczego (w Chrome) potrzeba dwóch rozszerzeń - Tampermonkey i Stylus? Nie da się tego na jednym programie do stylów obsługiwać?
    Avatar
    Autor
    Masz opcję wyboru co do rozszerzenia przeglądarki.
  2. Avatar
    Autor
    v2.0 - 10.03.2020

    • Poprawiono czytelność tekstu (strona główna, okazje, dyskusje itd.)
    • Powrót do domyślego koloru pomarańczowego
    • Dostosowano motyw do ostatnio wprowadzonych zmian na stronie
    • Drobne poprawki

    Link do galerii: imgur.com/gal…07k (Edytowano)
  3. Avatar
    Nie skorzystam, ale bym z miłą chęcią dał plusa.

    Bardzo dobrze to wygląda
  4. Avatar
    Autor
    v2.4 - 03.05.2022
    • Drobne poprawki
  5. Avatar
    O, fajnie, że coś się rusza w tym temacie

    Zapowiada się dobrze. Moje uwagi:
    -pomarańcz faktycznie można by nieco stonować
    -tekst jest trochę za ciemny (za bardzo zlewa się z tłem), i można by go trochę rozjaśnić (ale też nie za bardzo)

    Jest taka strona ze śmiesznymi obrazkami Wykop.pl. Po zalogowaniu można ustawić tryb nocny, który jest (wg mnie) bardzo dobry, i jak najbardziej można się na nim wzorować.
  6. Avatar
    Wielkie dzięki za włożoną prace naprawdę dobra robota i super przydatna sprawa

    Ogromny PLUS dla Ciebie.
    Wielka szkoda, że nie ma o tym informacji na głównej stronie bo zapewne dużo więcej osób skorzystałoby z takiego rozwiązania.
  7. Avatar
    Autor
    Excellion23/02/2020 16:09

    Mi na Chrome i Violentmonkey nie działa



    3869901-Df64r.jpgDziała na Chrome + Violentmonkey (Edytowano)
  8. Avatar
    jak ktoś jest leniwy to może zainstalować np. rozszerzenie Dark Mode na Operę. Może nie jest tak ładna o dopracowana jak to co dałeś (ma trochę źle pozmienianych warstw, głównie gradientów), ale działa na wielu stronach4419835-nACIT.jpg4419835-PBcWa.jpg
    ale jak się pokombinuje w opcjach to wygląda nieco lepiej
    Dark invert #5 (zmodyfikowany negatyw):4419835-4oSDt.jpg4419835-SZr74.jpgtylko ten nagłówek trochę przeszkadza (Edytowano)
  9. Avatar
    Autor
    itsmeque15/05/2019 08:43

    Czym specjalnym różni się twój styl od obecnie niemalże takiego samego styl …Czym specjalnym różni się twój styl od obecnie niemalże takiego samego stylu FILIOSA? Jak dla mnie, jest on bardzo, ale to baaardzo podobny (jak nie taki sam) co "twój" styl z poprawkami przedstawionymi przez @DMX.Nie żebym był jakiś niemiły, dobrze ze chciałeś zrobić swój własny styl którego będziesz poprawiać z ewentualnymi kolejnymi zmianami na pepperze #edit:Znalazłem pare różnic między waszymi stylami, niektóre elementy fajniej rozwiązane są u Ciebie a niektóre u Filiosa. Teraz nie dam rady ich wymienić - uciekam do pracy :P


    W zasadzie jakby na to spojrzeć na userstyles.org są dostępne aktualnie 4 style do peppera, każdy podobny na pierwszy rzut oka z tego względu że każdy próbował stworzyć styl bez większej ingerencji w kolory które już na pepperze zostały wykorzystane.

    Kolejna sprawa proszę włącz sobie style filiosa i poprzełączaj się przez różne elementy na stronie takie jak ustawienia, avatary, sprzedawcy itd.
    Następnie wyłącz jego style i włącz moje, gwarantuje że zobaczysz dużą różnicę.

    Tak prywatnie to też chciałem poćwiczyć CSS'a ale to nie ważne

    Jak już porównujemy statystyki:
    Filios: 125 Lini kodu
    Janusz: 1022 lini kodu

    Pozdrawiam
  10. Avatar
    Skorzystałem, dzięki! +
  11. Avatar
    Autor
    Aktualizacja v1.1 20.05.2019

    • Poprawiono kontrast kolorów: pomarańczowy, czerwony, niebieski
    • Poprawiono ciemny motyw na karcie prywatnych wiadomości
    • Drobne poprawki, ulepszenia


    Informujcie jakby coś nie grało (Edytowano)
  12. Avatar
    Wg mnie trochę słabo wyglądają te obrazki. W klasycznym widoku kafelki są białe, co powoduje, że nie widać tego zróżnicowania wielkości obrazków, bo obrazek "zlewa się" z kafelkiem.
    Na ciemnym tle niestety mocno rzuca się to w oczy. Nie wiem jakie są możliwości tych narzędzi ale może da się zrobić, żeby pod każdym obrazkiem był jakiś <div> który byłby po prostu biały i miał zawsze stałą wielkość. Sam obrazek byłby wtedy wewnątrz tego elementu ustawiony centralnie. Efekt mógłby wyglądać tak:

    2345738-jokiE.jpg
  13. Avatar
    Może chciałbyś zastosować na obrazkach parametr "filter: sepia(100%)" ?
    Dodatkowo można by zrobić usuwanie pod ":hover" z powrotem na "filter: none", dla tych co chcieliby oglądnąć oryginał zdjęcia.
    Dla przyjemniejszego efektu "przejścia" dodać na obrazku "transition: all 1s".
    Oczywiście są w "filtrze" inne ciekawe parametry jak "brightnes()" czy "hue-rotate()" więc może coś Ci się spodoba i zaimplementujesz w swoim stylu.
  14. Avatar
    Dzięki. Działa super!
  15. Avatar
    Szkoda że się pod dyskusją nie da plusa dać autorowi.
  16. Avatar
    Autor
    v2.1 - 25.09.2020
    • Poprawiono sekcje O nas/Poznaj nasz zespół/FAQ
    • Drobne poprawki
  17. Avatar
    Autor
    v2.2 - 27.10.2020
  18. Avatar
    Dzięki. Jedyne co chyba sobie poprawię to kolor pomarańczowy, bo jak dla mnie zbyt mocny
Avatar