Dark Theme z localStorage i CSS variables! 🌓 Tutorial HTML CSS i Javascript dla początkujących!

[@Picassoo85]

kurka wodna, wlasnie robie cos takiego u siebie ale troszke inaczej, ale ale bardzo dziekuje za inne podejscie :) pozdrawia student full-stacka ( jak bardzo nie nawidzone stanowisko przez rekruterow haha - w sumie kocham kod ale rowniez kocham grac, czasami ciezko pogodzic obydwie rzeczy XD - studiuje w NL ) pozdrawiam i oczywiscie kawka zrobiona no i lapka leci w gore :)

[@adriangrzelak2087]

Super wytłumaczone. W końcu dużo lepiej rozumiem JS bo z tym miałem największy problem. Coś tam rozumiałem z JS ale bardziej na logikę a dzięki temu filmikowi bardziej zrozumiałem co i jak. Więcej takich filmików. Dzięki wielkie

[@buczej_]

Najlepszy kanał z programowaniem jak dotąd na yt! Dzięki za filmy, oby tak dalej :)

[@JZP]

Awww, dzięki! Mega nam miło

[@ferplej699]

Wado Vice

[@Tostero]

Jak zawsze TOP :D Wytłumaczone krok po kroku. Niesamowitą satysfakcję daje mi to jak już rozumiem podstawy i mogę czasami przewinąć film ;)

[@MichałTracichleb]

55:00 po wyczyszczeniu danych, przy pierwszym kliknięciu ustawiany jest kolor "dark" (jeżeli ma się dark mode na komputerze) i nie ma zmiany, trzeba nacisnąć drugi raz. Jest jakiś sposób żeby temu zaradzić? Czy JS może przeczytać "prefers-color-scheme" ?

[@RumunQa]

Siemka, jak zapobiec "flicker'owaniu" strony podczas odświeżania / zmiany podstrony. Za każdym razem przez ułamek sekundy widać biały przed załadowaniem na dark theme. Korzystam z trochę innego kodu jednak logika jest ta sama. Z tego co widzę u was ten problem się pojawia np. w: 43:40 zgaduje, że ten sam problem pojawi się w przypadku ładowania nowych podstron z waszym kodem.

[@jakubschulz4353]

Ooo, też nie wiedziałem, że można do css'em wykryć

[@michu-programmer]

Super odcinek, bardzo mi się osobiście przydał. Dowiedziałem się jak w JS działa LocalStorage. Mega!!! Teraz proszę Cię o odcinek jak działać z API. Czym jest API i jak je wykorzystywać. Również mega ważne dla mnie będzie jak działać z Reactem. Pozdrawiam ~ początkujący frontend developer

[@kuchcik3967]

Dzięki za aminononwwany button

[@TomaszOstroga]

Swietny tutorial! Mam pytanie odnośnie koncówki gdzie po wczytaniu strony "poraz pierwszy" po tym jak usunąłeś localStorage musialeś kliknać na switch dwukrotnie zeby przeskoczylo z ciemnego na jasne. Dzieje sie tak ponieważ przeglądarka ustawiając ciemne style nie "tworzy" zmiennej theme, więc po przyciśnięciu switcha nie mamy ani "dark" ani "light" dlatego przycisk musi być wcisnięty dwa razy w momencie kiedy nie mamy localStorage i korzystamy z prefers-color-scheme: dark. Jest jakiś prosty sposób aby to naprawić?

[@JZP]

Hej! Możesz podać dokładnie czas na filmie, w którym pojawia się ten problem?

[@TomaszOstroga]

@@JZP Hej! pojawia sie to na samym koncu czas: 55:05. Dzieki za szybka odpowiedz :)

[@TomaszOstroga]

@@JZP Hej. Chodzi o "blad" w logice, w momencie gdy mamy dark theme w windowsie odpala nam sie dark theme na naszej stronie, ale nie nadajemy klasy dark wtedy wiec kiedy klikamy button on toggluje nam dark, lecz klasy dark nie ma wiec musi ja dodac dlatego zeby wlaczyc light theme guzikiem po pierwszym wczytaniu strony musimy kliknac 2 razy na button zeby go wlaczyc. Czy jest jakis sposob zeby to poprawic? :)

[@joannaapa7047]

@@TomaszOstroga @Jak zacząć programować? Ja rozwiązałam ten problem dodając: else if (window.matchMedia('(prefers-color-scheme: dark)').matches === true && (body.classList.contains('light') !== true && body.classList.contains('dark') !== true )) { body.classList.add('light') body.classList.remove('dark') localStorage.setItem('theme', 'light') } Jestem początkująca w javascripcie, więc nie wiem czy jest to poprawny zapis, w każdym razie działa. Może Filip się wypowie :).

[@TomaszOstroga]

@@joannaapa7047 Dziekuje za podpowiedz mimo ze post ma 6mc, zobacze po pracy. Jak dlugo uczysz sie jsa?

[@diox_7.]

Pierwszy xd

[@M1000-j5k]

SUS

[@xb136]

siema mam takie pytanie czy da się zrobić napis rgb w html jeżeli tak czy moglibyście nagrać film na ten temat ?

[@grzegorzbanaszczyk7092]

w html i css tak

[@xb136]

mam pytanie jak działa wasz program zaczynamy programować podaje swój email i co dalej się dzieje

[@JZP]

Będą do Ciebie przychodziły co tydzień maile z nową dawką wiedzy :)

[@lukc4110]

spoko materiał, ale wydaje mi się że lepszym rozwiązaniem byłoby zrobienie tego w backendzie :)

[@JZP]

Serio? Jak?

[@lukc4110]

@@JZP Sory, nie sprecyzowałem dokładnie o co mi chodzi, ale zamiast dodawać klase za pomocą js zrobiłbym to np w php w widoku używając cookisa. Gdy bedzie więcej kodu istnieje szansa że przy wejściu na strone bedziesz miał widoczny 'błysk' - wszystko przez to ze pierwotnie zadziałają style dla theme light, zanim zostanie dodana klasa dark do body. reszta jest git :D

[@neelku]

41:54 co klikłeś by to zrobić

[@JZP]

Ctrl + / :)

[@JZP]

UWAGA NA FLASHBANG

[@Falwack]

Akurat zrobiłem sobie jedzonko

[@JZP]

Smacznego!

[@grzegorzbanaszczyk7092]

Film trwający 56 min vs ja siedzący cały dzień aby to włorzyć do mojego projektu

[@czer2483]

I jak udało się?