Css gece modu tasarımı nasıl yapılır

Gece modu, dark mode, karanlık mod, karanlık tema... Bir sürü bilinen ismi var. Başkaları belki başka isim kullanıyorlardır bunun için. Ziyaretçilerin gözlerinin yorulmaması için kullanılan ekstra ayarlar. Bir website tasarlarken kullanıcı dostu olmasına dikkat etmek gerekli elbette. Herkesin gözü bir olmadığı gibi herkesin bakabildiği ışık miktarı da farklı olabiliyor. Sürekli kullandığımız için çok önemsemesek de aslında oldukça önemli bir detay. Ben bile artık youtube kullanırken karanlık modunu kullanıyorum ve aydınlık modunu kullanamıyorum. Bu yazımızda websitelerimize nasıl karanlık modunu uygulayacağımızı anlatacağım. Merak etmeyin çok zor birşey değil. Heleki Site geneli renk ayarlamalarını body etiketi ile yaptıysanız (örnek body a, body h1, body h2, body p) bir kaç tane ekstra css kod ile ve tek tıklama ile websitenizi karanlık moda alabilirsiniz. Şuan kullandığım temayı Dark mode hesabı yapmadan tasarlamıştım. Tasarım bitikten sonra da Dark modu özelliğini eklemiştim. Sonradan düşündüğüm bir özellik olduğu için biraz tutarsız diyebilirim. Daha doğrusu karanlık moddaki renkler çok iç açıcı görünmüyor. Öncelik amacım eklentilerden kurtulmaktı. Çok az sayıda eklenti kullanarak birçok özellik kullanıyorum şuanda. Neyse şimdi konumuza devam edelim. Öncesinde bir örnek hazırlamıştım ve o örnek üzerinden devam edeceğim.

İlk kullanacağımız kod Javascript:

İlk kullanacağımız kod dememin sebebi olduğu gibi websitenize yerleştirebileceğiniz bir kod. Bu javascript kod üzerinden herhangi bir dğeişiklik yapmanız gerekmiyor. Bu javascript kodu kulanıcılar gece moduna bastığında <body> yazan yeri değiştirip <body class="dark-mode"> yapmak ve kullanıcının seçtiği terciği saklayıp her ziyaret ettiğinde bu tercihe göre aydınlık yada karanlık moduna ait tasarımı kullanıcıya göstermeye yarıyor. Sadece body etiketleri arasına class="dark-mode" yazarak karanlık moduna alabilmek nasıl mümkün olabilir diye soranlar da olacaktır elbette. O konuyu da anlatayım. Normalde bir css çerçeve ve içeriğini düzenlemek istediğimizde stil koduna gereken değerleri gireriz. Örnek class="orta-alan" diye sayfanın ortasında bir çerçevemiz var ve bu çerçeveye ait olan linkleri de css ile .orta-alan a {color:black yada #000} olarak belirlediniz. Dark modunda geçişte bu rengi değiştirmek için body.dark-mode .orta-alan a {color:white yada #fff} yazarak müdahale edebiliriz. Site geneli bütün yazıların renklerini değiştirmek için de body.dark-mode p, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {css değerleri} şeklinde uzatarak bütün yazılardaki renkleri toplu halde değiştirebiliriz yada isterseniz tek tek herbiri için ayrı değer girersiniz. Tema tasarlarken en başta body p body a body h1 vs. ilişkilendirerek bütün yazılara renklendirmeler yapılır aslında. Bazen de her bölüm için ayrı renklendirmeler kullanırız. Ayrı renklendirmeler kullandığınızda dark modu için ayarladığınız reenkler çalışmayabilir. Bunun sebebi de direk çerçeve üzerinden yazı rengini belirlemiş olmanızdan kaynaklanır. Bu sorunu da !important kullanarak aşabilirsiniz. Daha önceden Bootstrap kullanma hakkında bilgi vermiştim. Buradan Bootstrap (yeni sekmede açılacak) ile alakalı yazdığım yazıyı da inceleyebilirsiniz. Bugünkü örneği de Bootstrap kullanarak hazırladım. İlla bootstrap kullanacağız diye bir zorunluluk yok. Bu örnekte sadece yukardaki javascript kod işinize yarayacaktır. Geri kalan kodlar da nasıl yapıldığını göstermek için ve biraz da kolay olsun diye bootstrap ile hazırladım aslında.

Css gece modu tasarımı nasıl yapılır

İlk kullanacağımız kod Javascript:

Html kodlar:

Css kodlar:

Ve sonuç sayfası da bu şekilde: