Napisałem ciemny motyw dla peppera

maj 13.

‌ Pepper.pl - Full Dark Theme 2019

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:

Tampermonkey*

Microsoft Edge:

Tampermonkey*

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

Podgląd strony głównej:

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.

PostUdostępnij Udostępnij przez WhatsApp Udostępnij przez Messenger

Różne

Skomentuj Zachowaj

28 Komentarzy

maj 13.

Nie skorzystam, ale bym z miłą chęcią dał plusa.

Bardzo dobrze to wygląda

maj 13.

Dzięki. Jedyne co chyba sobie poprawię to kolor pomarańczowy, bo jak dla mnie zbyt mocny

maj 13.

Wygląda ciekawie

maj 13.

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ć.

maj 14.

Dziękuję, używałem innego ale Twój jest sporo lepszy, tak trzymaj!

Edytowane przez: "phyrz" maj 14.

maj 14.

DMX13/05/2019 22:20
O, fajnie, że coś się rusza w tym temacie Zapowiada się dobrze. Moje u …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ć.

Nie sugerujcie się fotką podglądową strony głównej jest słabej jakości, po zainstalowaniu inaczej to trochę wygląda.
Co do koloru pomarańczowego, nie chciałem go zmieniać bo to taka wizytówka peppera, ale pomyślę czy da się coś z tym zrobić, co do tekstu wydaje mi się że jest ok i bardzo czytelny.

maj 14.

@Janusz Tamte uwagi pisałem po zainstalowaniu motywu i zobaczeniu na żywo jak to wygląda. Zresztą, zawsze możesz zrobić drugą wersję, i każdy sobie sam wybierze

maj 15.

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

Edytowane przez: "itsmeque" maj 15.

maj 15.

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

maj 19.

Skorzystałem, dzięki! +

maj 20.

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

Edytowane przez: "Janusz" maj 20.

maj 21.

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:

maj 21.

e-Rick21/05/2019 10:30
Wg mnie trochę słabo wyglądają te obrazki. W klasycznym widoku kafelki są b …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:[Obrazek]

Nie wiem czy dobrze rozumiem, czy chodzi Ci o coś takiego?

Pepper strasznie kompresuje obrazy więc poniżej.
Link do lepszej jakości

Edytowane przez: "Janusz" maj 21.

maj 21.

Janusz21/05/2019 21:24
Nie wiem czy dobrze rozumiem, czy chodzi Ci o coś takiego?[Obrazek] Pepper …Nie wiem czy dobrze rozumiem, czy chodzi Ci o coś takiego?[Obrazek] Pepper strasznie kompresuje obrazy więc poniżej.Link do lepszej jakości

Dokładnie o to i wg mnie wygląda to lepiej po zmianie. Z drugiej strony, jak wrzuciłeś cały rząd to zastanawiam się czy nie kłóci się to zbytnio z istotą powstania całego motywu,bo zwiększa jasność całości.
EDIT: zastanawiam się czy cały obszar ze zdjęciem nie mógłby być też trochę mniejszy np. żeby był w takiej samej odległości od ramki całej okazji co przycisk "Zobacz więcej"? Poniżej dla obszaru zmniejszonego o 5% (wg mnie można zmniejszyć o 7-8%).

Edytowane przez: "e-Rick" maj 21.

maj 21.

e-Rick21/05/2019 22:01
Dokładnie o to i wg mnie wygląda to lepiej po zmianie. Z drugiej strony, j …Dokładnie o to i wg mnie wygląda to lepiej po zmianie. Z drugiej strony, jak wrzuciłeś cały rząd to zastanawiam się czy nie kłóci się to zbytnio z istotą powstania całego motywu,bo zwiększa jasność całości.

Właśnie w tym rzecz, kolor biały mi tutaj nie za bardzo pasuje.
Większość użytkowników peppera korzysta z oryginalnej wersji desktopowej w jasnych barwach więc obrazy okazji są wgrywane w tym samym tonie. Zapisze do listy i pomyślę czy można to jakoś rozwiązać aby był wilk syty i owca cała

maj 21.

Janusz21/05/2019 22:12
Właśnie w tym rzecz, kolor biały mi tutaj nie za bardzo pasuje.Większość uż …Właśnie w tym rzecz, kolor biały mi tutaj nie za bardzo pasuje.Większość użytkowników peppera korzysta z oryginalnej wersji desktopowej w jasnych barwach więc obrazy okazji są wgrywane w tym samym tonie. Zapisze do listy i pomyślę czy można to jakoś rozwiązać aby był wilk syty i owca cała

Ja korzystam na telefonie też z jasnej. Co ciekawe w wersji mobilnej właśnie to rozwiązanie zastosowali (równanie białym obszarem pod obrazkiem).

Edytowane przez: "e-Rick" maj 21.

maj 21.

Janusz21/05/2019 22:12
Właśnie w tym rzecz, kolor biały mi tutaj nie za bardzo pasuje.Większość uż …Właśnie w tym rzecz, kolor biały mi tutaj nie za bardzo pasuje.Większość użytkowników peppera korzysta z oryginalnej wersji desktopowej w jasnych barwach więc obrazy okazji są wgrywane w tym samym tonie. Zapisze do listy i pomyślę czy można to jakoś rozwiązać aby był wilk syty i owca cała

To jeszcze jedna rzecz - ta górna belka. Wg mnie jest zbyt czarna.
Dzieląc ją poziomo na pół:
Górna - oryginalna wcale nie jest jasna, poza polem "Szukaj" (je można by dać np. jasne szare).
Dolna - może tu spróbuj właśnie całą czarną tak jak jest, ale przycisk "Filtruj" daj na szary (np. dla spójności - tak jak ma w oryginalnej belce kolor "Menu" bez hover).

Edytowane przez: "e-Rick" maj 21.

maj 22.

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.

maj 22.

AKU22/05/2019 18:34
Może chciałbyś zastosować na obrazkach parametr "filter: sepia(100%)" ?Do …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.

Dobry pomysł, chyba coś z tego będzie