maj 13. 2019
Pepper.pl - Full Dark Theme 2019/2020
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/gal…07k
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.
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/gal…07k
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.
Link do galerii: imgur.com/gal…07k
Bardzo dobrze to wygląda
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.
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
Informujcie jakby coś nie grało
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:
Nie wiem czy dobrze rozumiem, czy chodzi Ci o coś takiego?
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%).
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).
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).
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