Скачать с ютуб Dark Theme z localStorage i CSS variables! 🌓 Tutorial HTML CSS i Javascript dla początkujących! в хорошем качестве

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

👉 Newsletter: https://zaczynamyprogramowac.pl 👈 🎤 Discord:   / discord   🎤 🔥 Grupa na Fejsie:   / zaczynamy.programowac   🔥 Kod początkowy: https://github.com/FilipMam/dark-mode... Kod finalny: https://github.com/FilipMam/dark-mode Ciekawy artukuł o dostępnym przycisku typu switch: https://inclusive-components.design/a... [0:00] Intro [5:38] Click event na buttonie [12:58] Zmiana kolorów - metoda JS [17:20] Zmiana kolorów - metoda klas CSS [21:47] Zmiana kolorów - zmienne CSS [29:06] Stylowanie switcha [34:00] Zapisywanie motywu w localStorage [46:35] Ustawienia systemowe i prefers-color-scheme Cześć! Dnie są coraz krótsze, więc warto pomyśleć nad wprowadzeniem trybu nocnego na stronie. Nagrałem film dla początkujących, w którym krok po kroku pokazuje w HTML CSS i JS jak można go zaimplementować różnymi metodami, kończąc na użyciu CSS variables. Dodatkowo tłumaczę też, jak wykorzystać localStorage, żeby taki tryb nocny zapisał się po wizycie użytkownika. Jeśli jeszcze okazji bawić się z localStorage to naprawdę bardzo polecam ten mechanizm - zwłaszcza początkującym. Jest stosunkowo prosty, a jednocześnie oddaje naprawdę dużo! Na koniec pokazałem też jak odczytać ustawienia systemowe, żeby przystosować paletę kolorów na stronie do takiej jaką użytkownik ma ustawioną w systemie. Wykorzystamy do tego ‘prefers-color-scheme’. Z ciekawości, znaliście/używaliście już `prefers-color-scheme’? Ja dowiedziałem się o tym stosunkowo niedawno i jestem w szoku, że zadziałało zarówno na Macu jak i Windowsie :D Filip Mamcarczyk Kacper Sokołowski