Dark mode oraz odświeżone logo 4programmers 🎉

@4programmers.net Mnie się podoba. Pytanie tylko, czy da się automatycznie włączać dark mode po ustawieniach przeglądarki / urządzenia? (nie wiem czy było już gdzieś w wątku)

Do wszystkich autorów trybu ciemnego. Dziękuję!!!
Świetna robota. Wreszcie forum wkracza w 21 wiek :p

Wiadomo, że to rozwiązanie musi się dotrzeć... mam nadzieję, że już wkrótce, po feedbacku będzie jeszcze lepiej - funkcjonalnie i wizualnie.

Ps: Logo rzeczywiście budzi pewne skojarzenia, ni to czwórka ni to ktoś w samotni :)
-Pawel

dziękuję!

Hejka!

Jesteśmy pod wrażeniem ilości feedbacku jaki otrzymaliśmy - ogromne dzięki!

Wzięliśmy pod uwagę Wasze sugestie, od wczoraj działamy i już teraz mamy dla Was update i kilka informacji:

• Chcieliśmy jak najszybciej dostarczyć Wam wartość i otrzymać feedback, dlatego też zdecydowaliśmy się wdrożyć na początek najbardziej popularne części portalu, czyli forum i mikroblogi. Na ten moment jeszcze nie wszystkie ekrany są gotowe w wersji ciemnej, praca nadal wre m.in. nad profilem użytkownika i wiadomościami. Strony nad którymi praca nadal trwa mają wyłączony przycisk przełączenia motywu oraz oznaczenie niedostępności ikonką i info w tooltipie. Jest to zamierzone działanie, biorąc pod uwagę nasze doświadczenie z poprzednich wdrożeń Postanowiliśmy wdrażać zmiany małymi krokami, zbierając feedback na wcześniejszych etapach prac.
• Kolory w trybie ciemnym zostały wybrane i sprawdzone według wymogów accessibility: Kontrast pomiędzy tekstem a tłem powinien wynosić minimum 4.5:1 i w takim zakresie staramy się działać.
• Tryb ciemny dla części z Was włączył się automatycznie z powodu naszego niedopatrzenia - dawny przycisk włączenia ciemnego menu, teraz włącza cały dark mode, więc część z Was, która miała włączone ciemne menu z automatu dostała dark mode. Oczywiście możecie go szybko wyłączyć poprzez przycisk "Przełącz motyw". Dziękujemy za wyrozumiałość
• Jeśli chodzi o jasny tryb, to tutaj nie wprowadzaliśmy żadnych zmian oprócz dostosowania stopki na dole ekranu. Cała reszta na ten moment została "po staremu".
• Motyw systemowy o którym wiele z Was wspominało pojawi się, jeszcze nad nim działamy
• Części z Was po zmianie trybu zmienia się kolor tła awataru. Jest to związane z przeźroczystościami, które macie w swoich dodanych obrazkach. Osoby, które nie chcą tego efektu, wystarczy że dodadzą jako swój awatar obrazek z wypełnionym tłem

Dzięki Wam udało nam się od wczoraj wdrożyć już kilka najbardziej palących poprawek:

• @Georginho hover na powiadomieniach - done!
• @Xarviel poprawione podwójne logo (już po dzisiejszej odpowiedzi)
• @darkonepl (github: goldiepl) dzięki wielkie za kontrybucję i poprawienie tabelek
• @obscurity , @furious programming wyszukiwarka również poprawiona
• @furious programming Zeszliśmy z koloru #90ba1d na #789B17- mniejsza żarówa ale nadal kontrast zgodny z wymogami accessibility
  

Dzisiaj działamy m.in. nad poprawką autocomplete i rozkminiamy kolory podświetlenia linkowanego postu (jeśli macie propozycje to śmiało dajcie znać!). O wszystkich zmianach będziemy Was na bieżąco informować

Jeszcze raz wielkie dzięki za tak duży odzew, jesteście niesamowici!

My się zabieramy do roboty, a Wam życzymy miłego dnia!

Nowy zielony odcień zdecydowanie lepszy.

PS: ranking reputacji trochę nieczytelny:

Jakoś słabo się czyta tekst na tych zielonych paskach. Dałbym mniejszy padding zielonych części paska oraz wzmocnił cień pod białym tekstem, tak aby był lepiej widoczny.

Nie wiem dlaczego bez wiedzy użytkownika motyw został zmieniony. Tłumaczenie jakimś starym ustawieniem jest słabe - wiecie co to kompatybilność wsteczna? Wiecie dlaczego nie usuwa sie parametrów, czy nie zmienia ich zachowania a dodaje nowe? No małe przewinienie, bo już sobie odkliknąłem tą smołę ale ogólnie motyw jest słaby i nie chodzi o małe niedociągnięcia a o całe ekrany. Np. widok profilu jest zawsze jasny i nie wiem dlaczego nie można tam przełączyć widoku.

Niestety nie potrafię tego odtworzyć, ale właśnie niekontrolowanie motyw sam mi się zmienił. Chyba występują tutaj jakieś wyścigi.

4programmers.net napisał(a):

• Kolory w trybie ciemnym zostały wybrane i sprawdzone według wymogów accessibility: Kontrast pomiędzy tekstem a tłem powinien wynosić minimum 4.5:1 i w takim zakresie staramy się działać.

znaczy według kwitów jest dobrze, co z tego że userzy mówią że jest niedobrze

Klikalny obszar logo jest dość wąski.

Z zajęć na studiach (Interakcja Człowiek-Komputer) wyniosłem przykład Menu Start z Windowsa.
W starych wersjach Windowsa trzeba było dokładnie najechać myszką na Start, żeby go kliknąć.
A był on odsunięty o kilka pikseli od rogu ekranu.
Możecie sobie zobaczyć w emulowanym Windows 95 online: https://archive.org/details/win95_in_dosbox
Tylko testujcie na full screen :)

W obecnych wersjach Windowsa można zjechać myszką w sam róg ekranu, a i tak trafimy w przycisk Start.

Można by poszerzyć klikalny obszar logo 4programmers tak aby można było je kliknąć nawet w samym rogu strony.

To chyba nie jest zamierzone...
Favikonki z numerkami pokazują się po staremu.

https://github.com/pradoslaw/coyote/blob/master/public/img/xicon/favicon1.png
https://github.com/pradoslaw/coyote/blob/master/public/img/xicon/favicon2.png
...
https://github.com/pradoslaw/coyote/blob/master/public/img/xicon/favicon6.png

BTW. ponawiam opinię, że stara favikona lepiej wygląda.

Jakieś takie to to krzywe.

@Riddle @4programmers.net Wydaje mi się, że dość poważny problem, który przynajmniej mi utrudnia korzystanie w dark mode. Jeśli jest włączone, powiadomienia pod dzwonkiem, po kliknięciu weń, nieprzeczytane niczym się nie wyróżniają od przeczytanych. Jeśli było już o tym to sorry.

nie wiem czy to powiązane z nowym motywem ale wydaje mi się że wcześniej to działało w porządku
pozycja breadcrumbów nie aktualizuje się po zmianie rozmiaru okna i wygląda to na przykład tak:

4programmers.net napisał(a):

• Kolory w trybie ciemnym zostały wybrane i sprawdzone według wymogów accessibility: Kontrast pomiędzy tekstem a tłem powinien wynosić minimum 4.5:1 i w takim zakresie staramy się działać.

No tak średnio bym powiedział, tak średnio

Zamiast dodawać powiadomienia do miejsc w których motyw nie jest zmieniony mogliście wykonać zmianę motywu. Już pominę że ta zmiana powinna być zrobiona przed udostępnieniem funkcjonalności? Jak mówiłem o tym że niektóre rzeczy można podglądnąć i podkraść z facebooka nie mówiłem o ich bylejakości i braku standardów.

jak masz kilka kart przeglądarki odpalone to trudno znaleźć bo logo takie nienachalnej urody

Separator poziomy jest słabo niewidoczny:

W komentarzach na blogu nie widać go wcale (link do komentarza):

Poza tym ma gigantyczne marginesy, jeśli chodzi o komentarze na blogu, które koniecznie trzeba zmniejszyć. Zresztą te marginesy nie są spójne z tymi ustawionymi choćby dla zawartości posta. W poście margines jest tylko nad separatorem, na blogu nad i pod.

Jest w miarę dobrze, tylko skąd mam wiedzieć, które powiadomienia już kliknąłem? Nie ma żadnej różnicy między klikniętymi, a nie aktywnymi.

Szczerze? Nie podoba mi się dobór kolorów w dark-mode, jakoś tak wali ta czerń z postów za bardzo po oczach, najlepszy dark-mode z jakim pracowałem to był zdecydowanie ten z Grafany (polecam spojrzeć).

I mam od razu change request aby przywrócić możliwość ustawienia navbara jako ciemny w trybie light-mode. Z góry dziękuje.

W sumie to navbar mógłby być zawsze ciemny.

Hejka! :D

Szybki update - wiadomości prywatne w trybie ciemnym są już dostępne. Kontynuujemy pracę nad kolejnymi ekranami i zmianami wynikającymi z Waszego feedbacku.
Wielkie dzięki za odzew i miłego dnia!

Ciekawe czy dożyjemy czasów jakiś różowych/kolorowych trybów; można by to nazwać PRIDE. Nie wiem czy by to pomogło w czytaniu, ale fundamentalnie i tak idziemy w tą stronę, a 4programmers mogło by być w tym pionierem

Aby to było możliwe, trzeba mieć system akceptujący wybrane kolory, zamiast używania tych hardkodowanych.

Serwis taki jak ten wykorzystuje raptem kilka kolorów — tło, tekst, przyciski i ze dwa akcenty. Wystarczy dać możliwość ich wybrania, a generowaniem stylów niech się zajmie silnik. W wielu miejscach używane są np. różne odcienie szarego (dla tekstu i przycisków), a to nie problem, aby wziąć bazowy kolor (wybrany przez użytkownika) i go lekko przyciemnić lub rozjaśnić.

Coś takiego jest bardzo łatwe do stworzenia. Jedyne co wymaga więcej pracy to przerobienie silnika, aby generował CSS-y na podstawie danych z profilu użytkownika. Bardzo fajny, unikalny pomysł z tymi stylami.

furious programming napisał(a):

Aby to było możliwe, trzeba mieć system akceptujący wybrane kolory, zamiast używania tych hardkodowanych.

Serwis taki jak ten wykorzystuje raptem kilka kolorów — tło, tekst, przyciski i ze dwa akcenty. Wystarczy dać możliwość ich wybrania, a generowaniem stylów niech się zajmie silnik. W wielu miejscach używane są np. różne odcienie szarego (dla tekstu i przycisków), a to nie problem, aby wziąć bazowy kolor (wybrany przez użytkownika) i go lekko przyciemnić lub rozjaśnić.

W ogóle kiedyś były bardzo kolorowe czasy w IT. Nie wiem ile osób pamięta ale 4programmers w starej wersji (do 2006) miało kilka motywów zwanych wtedy popularniej skórkami lub skinami (co najmniej 6 - domyślna, simple, blue, motion, newage, submain) do wyboru i różniły się nie tylko kolorami ale też grafikami a nawet zestawem emotów i to był standard w niemal każdej aplikacji. Windows miał pełno motywów i łatwo można było doinstalować kolejne, nawet w windows 95 a może jeszcze wcześniej można było wybrać kolor każdego elementu interfejsu osobno a aplikacje miały dostęp do tych kolorów i mogły być spójne z systemem.
Teraz każda apka implementuje kolory po swojemu, są zazwyczaj tylko dwa motywy jasny i ciemny co najwyżej dając możliwość zmiany koloru przewodniego i akcentu.

obscurity napisał(a):

Teraz każda apka implementuje kolory po swojemu, są zazwyczaj tylko dwa motywy jasny i ciemny co najwyżej dając możliwość zmiany koloru przewodniego i akcentu.

Zazwyczaj tak, niektóre serwisy mają kilka schematów (np. GitHub), jednak wszystkie predefiniowane. Tak może być nadal, z tą różnicą, że oprócz zestawu gotowych palet kolorów, byłaby też możliwość zdefiniowania własnych. Nie widzę tutaj żadnego problemu, a wręcz przeciwnie — to więcej możliwości dla użytkowników, a więc wyższy poziom ich zadowolenia.

Ale czegoś takiego nie można implementować na pałę — jest wiele przypadków brzegowych, które trzeba wziąć pod uwagę.

Jeśli kwestia już była poruszona to wybaczcie, ale całości nie przeczytałem

Pytanie - czy gromadzimy statystyki odnośnie tego, jaki procent userów korzysta z jasnego/ciemnego motywu? Mi np. ten ciemny nie podpasował i póki co przełączyłem na jasny.
Rozumiem, że to trzeba dopracować, wygląd będzie ewoluował, ale na razie lepiej mi się siedzi (zwłaszcza w ciągu dnia) na jasnym. I pytanie - ogólnie była potrzeba ze strony użytkowników, żeby stworzyć ciemny motyw, ale zastanawiam się - jaki odsetek z nich będzie realnie z niego korzystać? Bo może, jeśli ta wartość będzie niska, to będzie oznaczało, żę coś jest niehalo i im (tak samo jak mi) coś nie pasuje.

Blady, słabo widoczny tekst w pomocy.

Obserwowanie i blokowanie innych użytkowników

Hejka!

Dajemy znać też tutaj:

Zapraszamy wszystkich chętnych do grupy doradczej 4programmers "Kadra", więcej w wątku: Grupa doradcza 4programmers

Trochę pisałem z @Riddle na priw i poprosił, żebym swoje wypociny wrzucił także do tego wątku - co niniejszym czynię.

1. Powiadomienia. O ile w jasnym trybie te nieprzeczytane są ładnie wyróżnione, to w dark praktycznie nie da się odróżnić nieprzeczytanych od starych. Wprawdzie dostałem informację, że teraz są nad tym prowadzone prace, ale dla formalności i tak tutaj to zgłoszę
   

2. Ogólnie mam wrażenie, że aktualnie tryb ciemny jest zbyt kontrastowy i krzykliwy, a np. akcent zielony jest bardzo oczojebny. Zdecydowanie wolałbym, żeby kolory były stonowane i przygaszone. Poza tym - tło strony jest ciemnoszare, a formularz w którym aktualnie piszę (a także np. samo tło wpisów w wątku) jest ciemniejszy, prawie czarny. Przez to zwiększa się kontrast pomiędzy tłem a napisami. Chyba powinno być odwrotnie - ciemne/czarne tło, na nim trochę jaśniejsze pola z treścią, a na nich mniej kontrastowe napisy.

Żeby pokazać o co mi chodzi - poniżej są 2 screeny.
Pierwszy to przykładowy zrzut z Android Studio w trybie ciemnym. Widać, ze jest tam dokładnie tak, jak pisałem - czyli jaśniejsze tło oraz mniej krzyczące/kontrastujące z tłem kolory.
Drugi to dla porównania - jak w AS wygląda zielony napis na ciemnym tle, oraz jak to ma miejsce na 4P. Zupełnie inne wrażenia są podczas patrzenia na te dwa screeny.

I tak w ogóle - popieram pomysł (o ile mnie pamięć nie myli - autorstwa @furious programming ) żeby można było sobie wybrać indywidualnie kolory w panelu z ustawieniami każdego usera. Tak naprawdę to kolorów mamy z 5-6 - tło, napis, wyróżnienie itp. I wtedy każdy będzie miał dokładnie tak, jak uzna za stosowne i każdy będzie miał możliwość bycia szczęśliwym. Bo to, co napisałem to są moje uwagi - ale nie każdy musi się z nimi zgadzać, ludzie mogą uważać inaczej, ktoś przecież ten schemat zaprojektował i uznał, że jest on OK

Moje oczy cierpią na nowym trybie ciemnym.

Biały vs. lekko szary jest bardzo czytelnym rozróżnieniem:

natomiast taka delikatna różnica w jasności nie sprawdza się w motywie ciemnym:

Ten efekt jest w wielu miejscach i skanowanie wzrokiem jest przez to utrudnione.

A pusty input tytułu w ciemnym motywie prawie nie istnieje:

Generalnie ciemny motyw to bardzo trudna rzecz, wbrew pozorom. Tak strzelając danymi z tyłka to powiem, że jakieś 70% stron mających ciemne motywy robi to źle. IMO zamiast czytać ten wątek i tweakować cssy tu i tam - zatrudniłbym designera, który zna się na robocie i przygotuje mockupy w odpowiednich kolorach - a potem je implementował.

Ekran logowania (i rejestracji) ma bardzo nieczytelne pola. Przydałby się jakiś border wkoło inputu, żeby było to lepiej widać. Domyślnie obramówka pokazuje się tylko i wyłącznie wtedy gdy jest focus. Dodatkowo przyciski logowania OAuth nie wyglądają dobrze na ciemnym tle. Na jasnym nawet w porządku, aczkolwiek fajnie jakby był osobny wariant dla ciemnego. A no i lub ma tło z jasnego motywu.

Latex w ciemnych kolorach jest nieczyleny.

Nie zgadzam się z Miang, ja lubię ciemny kolor, czasem oczy pieką jak się w jasny kolor wejdzie, a jak jest się w ciemnym to się unika tego.

Ale Miang już na wyższy level feminizmu wchodzi wszystko jej nie pasuje i ciernia z tyłka nie wyciąga.

Tak jak patrzę to myślę jakbym z botami na forum gadał, nikt się nie wydaje prawdziwy.