Polski frontend

Jak zacz─ů─ç programowa─ç? YouTube

Dark Theme z localStorage i CSS variables! ­čîô Tutorial HTML CSS i Javascript dla pocz─ůtkuj─ůcych!

­čĹë Newsletter: https://zaczynamyprogramowac.pl ­čĹł ­čÄĄ Discord: https://discord.gg/q88RUeTHbU ­čÄĄ ­čöą Grupa na Fejsie: https://www.facebook.com/groups/zaczynamy.programowac ­čöą Kod pocz─ůtkowy: https://github.com/FilipMam/dark-mode/tree/start Kod finalny: https://github.com/FilipMam/dark-mode Ciekawy artuku┼é o dost─Öpnym przycisku typu switch: https://inclusive-components.design/a-theme-switcher/ [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