SUNIPEYK

[ Okuma süresi tahmini 3 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.

@media (prefers-color-scheme:dark)

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