Dark Mode in CSS/JS
HTML-код
- Опубликовано: 8 май 2020
- I would like to show you how to implement dark/light mode in your projects simply.
It's very simple thing, all you need is to watch video from beginning of the end with passion :)
Also you can JOIN to channel or SUBSCRIBE if you like, happy coding!
tayfun hocam hem bu düzende dersleri çekin, yazı puntoları çok iyi olmuş kodlar rahat okunuyor
Çok iyi be bu videoyu bir kaç defa izlemek lazım o cssde yaptıklarını (nth-of-type, checked, +span+span fln) ilk defa görüyorum çok saol bu videolar için
Eline emeğine sağlık gözümün nuru. Bu dersinde pek çok kişinin kafasındaki tüm soru işaretlerini kaldırmıştır. Güzel ve faydalı bir paylaşım olmuş. Teşekkürler. Selamlar...
Reis çok güzel anlatıyorsun devamını getirmen dileği ile.
helal olsun emeğinin karşılığını kat kat alırsın umarım
Emeğine sağlık yine güzel bir eğitim videosu bu aralar popüler olan : )
kralsın reis 1 saattir arıyodum iyiki cıktın karşıma
Teşekkürler hocam youtube taki ilk açık tema, koyu tema videosu olabilir.
Anlatım çok başarılı 🙏
Saol kardeşim. Her Zaman Number One... Sensin...
hocam web ile bu aralar ilgilenmiyorum ama bu kadar seri çalışmanı izlemek çok zevkli, kahvaltı yaparken izleyebilirim bu videoları :D
İngilizce aksanına da ekstra bir like 👍
Güzel Anlatım teşekkürler.
ellerinize sağlık hocam
Hocam ellerinize saglik adamsiniz
Selamlar abi, eline sağlık :)
İlk baştaki localStorage ile yapalan bölümde, body içerisindeki tüm classları alıyorsun, orada dark dışında başka bir class olsa bile dark modmuş gibi bir bug oluşturabilir gibi geldi.
Çok güzel teşekkürler.
abe adamsın yaaaaa :) seni seviyoruz abe
Kral👍
Hocam pusuda bekliyoruz 😄
Biraz farklı bir istek olacak ama zamanın varsa hocam script lisanslama mantığını anlatabilir misin?
Bildiğim halde izledim, faydalı bir ders. Ben de koyu mod özelliğini yazarken farklı css dosyası olarka çağırmayı tercih ediyorum. Çünkü proje büyüdükçe css boyutu da artıyor. açık ve koyu modun aynı css dosyasında olması gereksiz yükleme yapıyor siteye. O yüzden class olarak kullanmaktan kaçıyorum. Teşekkürler hocam.
Javascript kullanmadan mı çözüyorsunuz.Sadece css le mi?
tarayıcının dark moduna göre dark modu true veya false nasıl yapabiliriz?
Reis haftada 1 video at
Abi, ikariam oyunundaki gibi bir harita yapimini gosterir misin muhtemelen css ilr yapiliyor ama ben nasil yapabilecegimi cozemedim mesela telefon ekranina gire olacak 100px 100px kaleler siadigi icin elle kaydircam haritayi.
boyle birsey yapabilirsen sevinirim hem sanada video konusu cikmis olur
Gayet güzel bir ders olmuş ağzına sağlık abi. Ek olarak eğer tasarımı CSS Değişkenleri kullanarak oluşturursanız (örneğin Facebook'un yaptığı gibi) dark mode özelliğini tek bir merkezden o CSS değişkenlerinin renk kodu karşılıklarını değiştirerek de daha kolay bir şekilde halledebilirsiniz. Tarayıcı desteği gayet iyi globalde %95. CSS değişkenleri hakkında daha fazla bilgi: medium.com/sorcial-dev/5-dakikada-css-de%C4%9Fi%C5%9Fkenleri-%C3%B6%C4%9Fren-75e13fb5c8c5
Facebook'un ilgili yazısı: engineering.fb.com/web/facebook-redesign/
Evet kesinlikle :) şu videomda o şekilde anlatım yapmıştım ruclips.net/video/sWrYl6lQpMA/видео.html
@@PROTOTURKCOM Şimdi izledim, gözümden kaçmış bu video, eline sağlık abi.
Kişi ana sayfada karanlık mod yaptıysa sorun yok ama eğer başka bir sayfadayken karanlık moda aldıysa temayı ana sayfaya döndüğünde oto açık moda geçiyor, o sayfaya geri dönünce tekrar karanlık oluyor. Bu hatayı nasıl çözebiliriz ? Body kodları header ve footer'da. Alt yapı wordpress.
javascript'te cookie oluştururken path=/ şeklinde tanımını yapman gerekiyor, localstorage ile kullanırsan sorunsuz çalışır onda ayırt etmiyor doğru şekilde yaptığım sürece
@@PROTOTURKCOM tamamdır çok teşekkür ederim. Deniyorum
Ya hocam kusura bakma ramazandayız falan ama heykelini yapsak beton yetmez 😂
Gene ben 😁
Reis Twitter a tarayıcıdan girdiğimiz zaman telefon karanlık moddaysa Twitter da karanlık modda açılıyor telefonu karanlık moddan çıkardığın an Twitter da ona göre değişiyor bunu nasıl yapıyorlar acaba
veritabanında kişiye özel tutuyorlardır mod değerini, ona göre de gösteriyorlardır :)
Benim en büyük sıkıntım bu karanlık/aydınlık mod kısmında birden fazla elementte uygulamak. Çok fazla birbirinden bağımsız arkaplan renklerine sahip alanlar mevcut ve hepsi için ayrı ayrı javascript kodu yazmak gerektiriyor bu da gereksiz yere javascript dosyasını büyütüyor. İnternette çok fazla araştırdım CSS'in theme scheme özelliği ile yapılıyor, birçok kaynak buldum ancak çoğu eksik ve güncel tarayıcılarda özellikle opera ve firefox'da çalışmıyor kodlar. Kodları yeniden revize etmek gerektiriyor. Bunun kısa bir yolu var mı? aynı kodları tekrar tekrar yazmak yerine sabit bir class, renk ve javascript kodu ile tüm html elemenetlerinin arkaplan renklerini seçilen moda göre nasıl ayarlanabilir?
Stil işlemi uygulacaksın senin JavaScript ile bir işin yok ki. Koyu mod kendine göre düzenlenir en basit ve etkili çözüm ise root sözde sınıfında değişkenler tanımlarsın belli renkler arkaplan renkleri vs her yerde onları kullanırsın. Koyu modda ise sadece bu değişkenleri değiştirmen yeterli olur. Uzun uzuna tekrar css kodu yazmamış olursun. Ayrıca şu videomu gördün mü?
ruclips.net/video/sWrYl6lQpMA/видео.html
@@PROTOTURKCOM Operada css'de ki tema şablonları çalışmıyor, sayfa yenileyince seçilen mod sıfırlanıyordu. İşin içine js katmadan tekrar deneyeceğim, teşekkür ederim. Olmaz ise php cookie kullanarak yapmayı deneyeceğim
Selam, mevzuyla alakasız bir sorum var da çok yerde yazdım cevap alamadım ... Yazılımda kullandımız teknolojiye, bizim kodlarımızda hata oluşturacak bir güncelleme gelirse ne olur? Benim başıma gelen olay react native ile fakat, soru teknolojiye özel deyil, şöyleki react navigation da stack dosyasının yeri deiştirildi belirli sebeplerde, doğal olarak import ettimiz kısım da hata almaya başladık ... Bu da ben app'ı ayaga kaldırırken hata almama neden oldu basit hataydı zaten ne oldugu yazyodu hall ettim fakat, şimdi bu uygulama marketlerde olsaydı, bilmem kaç kullanıcım olsaydı onlardamı hata alırdı? Böyle bir deneyiminiz oldumu ? Bir bilginiz varmı ? Teşekkürler ..
versiyona sen karar verebilirsin, yeni bir güncelleme geldi diye o versiyona geçmek zorunda değilsin otomatik olarak. Öyle canlı bir projede, önce development ortamında testler yapılır yeni versiyonu için, her şey doğru çalışıyorsa uygulama versiyonu güncellenir
🍪
Senin kadar hızlı yazamıyorum. Yavaş yazmak bir yerden sonra can sıkıyor. Ne yapmamı önerirsin? Yakında kendi sitemi oluşturup blog yazıları paylaşmayı düşünüyorum. Bir nevi bekli 10 parmak yazmayı öğrenirim diye.
Tamam mı diyerek video Çekmissin insan nasıl anlasın?
videoda kullandığım her şeyi daha önce tek tek anlattım, biraz merağı olan zaten araştırıp öğrenir, insan olan anlar yani tamam mı :)
böyle yaptığımızda daha kompleks sitelerde sıkıntı yaşamaz mıyız? instagram facebook benzeri ama koyu modu olmayan sitelerde