Javascript ile karanlık mod yapımı
3 yıl önce#calismalarKaranlık mod, web sitesi tasarımının en önemli yönlerinden biridir. Son birkaç yıldır trend olan bu özellik ziyaretçiler için oldukça kullanışlı. Bu modun tercih edilmesinin en önemli sebeplerinden birisi özellikle aydınlatılmış alanların, yüksek parlaklık nedeniyle gözleri çok yoruyor olması.
Bugün bu yazıda temel seviye JavaScript kullanarak web sitemiz için karanlık mod diğer adıyla dark mode oluşturacağız. Sistemin işleyişinden bahsetmek gerekirse sitemiz üzerine bir buton ekleyeceğiz, kullanıcı bu buton sayesinde koyu tema ve açık tema arasında geçiş yapabilecek.
Birinci aşama
Öncelikle index.html adında bir dosya oluşturalım ve ihtiyacımız olan temel html kodlarını içerisine yazalım. HTML dosyasını oldukça sade tuttuk, çok az öğe barındırıyor. Geçiş butonunu koymak için ortala adında bir div oluşturduk ve butona gecis değerini atadık. Bütün işlemler bittiğinde değişimi görebilmeniz için rastgele bir lorem ipsum metni oluşturup HTML içerisine ekledim.
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Karanlık Mod</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stil.css">
</head>
<body>
<div class="ortala">
<input type="checkbox" id="gecis">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat odio id mi egestas, et blandit lacus egestas. Fusce viverra massa non metus placerat, id varius risus congue. Duis consequat, mauris et venenatis porta, ipsum lectus luctus neque, nec blandit mauris orci quis nunc. Praesent felis ex, bibendum ac turpis ac, dapibus hendrerit nunc. Proin pellentesque tempus blandit. Maecenas id vulputate libero, vel placerat purus. Proin bibendum erat id felis commodo, id consequat sem porttitor. Fusce vitae molestie purus. Curabitur nibh dolor, sagittis at massa non, suscipit semper augue.
</p>
<script src="script.js"></script>
</body>
</html>İkinci aşama
Şimdi ise stil dosyamızı oluşturalım. Yukarıda yer alan html kodlarında stil dosyamızı stil.css olarak çektiğimiz için aynı isimde bir css dosyası oluşturacağız. Aşağıda yer alan kodlar ile stil dosyamızı doduralım.
Bu stil dosyasında koyu renk tonunu #101217 olarak ayarladım. Karanlık modunuz için siyah ve gri tonları arasında istediğiniz bir renk tonu belirleyebilirsiniz.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
padding: 40px;
}
.ortala{
width: 100%;
height: 60px;
position: relative;
margin-bottom: 40px;
}
#gecis{
-webkit-appearance: none;
appearance: none;
height: 40px;
width: 75px;
background-color: #101217;
position: absolute;
right: 0;
border-radius: 20px;
outline: none;
cursor: pointer;
}
#gecis:after{
content: "";
position: absolute;
height: 30px;
width: 30px;
background-color: #ffffff;
top: 5px;
left: 7px;
border-radius: 50%;
}
p{
font-family: "Open Sans",sans-serif;
line-height: 30px;
text-align: justify;
}
.karanlik-mod{
background-color: #15181f;
color: #e5e5e5;
}
.karanlik-mod #gecis{
background-color: #ffffff;
}
.karanlik-mod #gecis:after{
background-color: transparent;
box-shadow: 10px 10px #101217;
top: -4px;
left: 30px;
}Üçüncü ve son aşama
Şimdi son ve en önemli aşamaya geldik. Bu hazırlamış olduğumuz temalar arası geçiş yapmamızı sağlayacak işlevselliği JavaScript kütüphanesinden yararlanarak sağlayacağız. Index.html dosyasında çağırdığımız JavaScript dosyasını script.js olarak çağırdığımız için aynı isimde bir JS dosyası oluşturalım ve içeriğini aşağıdaki şekilde yapalım.
Javascript'te kod yapısında yaptığımız tek şey gecis değerine 'click' tetikleyicisi eklemek oldu. Tetiklenme sağladığında kod içerisinde belirttiğimiz body bölgesi karanlık moda geçiş yapacaktır. Aktif haldeyken tekrar tetiklendiğinde ise karanlık mod geçişi devredışı kalır ve normal görünüme geri döner.
document.getElementById("gecis").addEventListener("click", function(){
document.getElementsByTagName('body')[0].classList.toggle("karanlik-mod");
});Koyu temamız yani karanlık modumuz artık hazır. Çalışma mantığını kavradıysak bunu web sitelerinize kendi yöntemlerinizle uygun şekilde ekleyebilirsiniz. Kodun sağlamış olduğu işlevselliği özelleştirmek tamamen size kalmış. İsterseniz belirlediğiniz tek bir div içeriğini de koyulaştırabilirsiniz ya da bütün web sayfasını koyu temaya da bürüyebilirsiniz.
Eğer karanlık mod yapımında lazım olan dosyaları tek tek oluşturmakla uğraşmak istemiyorsanız doğrudan derlenmiş halini buraya tıklayalayarak indirebilirsiniz.