açık, koyu mod'u gösteren toggle buttonu görseli, siyah button içinde death satr ve star wars rebel ikonları

Açık, Koyu Mod Kullanıcı Seçimi 3. Versiyon

51

[ Okuma süresi yaklaşık 2 dakikadır ]

Açık/ koyu mod seçiminin üçüncü versiyonuna geçtik. Yapay zeka CoPilot ile oluşturduğum script kodunu yine yapay zeka ile tamamen kullanıcı odaklı yapmaya çalışmıştım. Ya ben anlatamadım, ya CoPilot ve ChatGBT, evet ikisi de, anlamadı yada onlar gayet net anlattı ben anlamadım ve yapamamıştım. Sonunda yaptım. Biraz onlar anlatamamış tam, biraz da ben kavrayamamışım. Sonunda sitenin tam işlevli bir açık/ koyu (dark/ light) mod’u oldu.

Tam işlevli derken bunu biraz açayım. Sitenin zaten bir koyu- dark modu vardı. Site Koyu Mod’u 2020 yılındaki postumda gayet kolay şekilde yapılabildiğini yazmıştım. Bu şekilde kullanıcı sisteminde koyu- dark mod seçtiğinde css dosyası koyu stillerini gösteriyordu.

Daha sonra ise siteye gelen ziyaretçilerin site üzerinde bir düğme ile koyu/ açık modu seçmesini sağlamak istedim. CoPilot sayesinde Site Açık Koyu Modu için Kullanıcı Seçimi yazımda belirttiğim gibi ilk versiyonu yaptık. Script kodu CoPilot yazdı, Css süslemelerini ben yaptım. Çeşitli iyileştirmeler, düzenleme ve düzeltmeler ile Açık, Koyu Mod Kullanıcı Seçimi 2. Versiyon yapıldı. Böylece kullanıcı hem site üzerindeki düğme ile mod seçebiliyor, hem de sistem üzerindeki seçimi ile de ayarlayabiliyordu. Ancak sistem seçimi site üzerindeki düğme üzerinde baskın kalmıştı.

Örnek vereyim; siz sistem seçiminizde koyu- dark mod seçtiniz. Tamam site koyu oluyor, düğme ile açık mod yapmak istediniz olmuyordu. Tam tersi ise oluyordu; Sistemde auto veya light seçseniz, sonra site düğmesinden dark- koyu mod yaparsanız oluyordu.

İşte üçüncü versiyonumuz ile birlikte tüm olasılıklar imkan dahilinde oldu. Yani tam işlevsel bir script yazmış aslında CoPilot ancak sitenin css dosyalarında benim eksiğim varmış. Bunu da bir light-mode css dosyası ile tamamlamak yetiyormuş. Yaptım ve yetti.

Buraya bir düzeltme gireyim. CoPilot artık nasıl bir script kodu yazdıysa, aslında bir light mode css dosyası eklemek gerekmiyormuş. Tam tersi asıl CSS dosyasındaki

@media (prefers-color-scheme:dark)

kodunu ve altındaki tüm dark mode, karanlık mod css kodlarını sildim. Bu da yetiyormuş.

İstediğiniz gibi test edin. Bir hata görürseniz, bildirirseniz seviniriz.

2 yorum var

Yazı altı elemanları

"Açık, Koyu Mod Kullanıcı Seçimi 3. Versiyon" için 2 yorum var

Yorumları

Yorum yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir