Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz.
Blog Yaz!Bazı temalarda mutlaka denk gelmişsinizdir. Bir butona tıklarsanız tema tamamen koyu renkli olur yazılar ise daha açık renkli veya tam tersine yazı arkaplanı açık renkli olur, yazılar koyu. Hatta sayfa yenilediğinizde dahi bu seçim değişmez. En basit haliyle saf javascript kullanarak bu işlemin nasıl yapıldığına iyi bir örnek olacağını düşünüyorum.
İlk olarak sayfamızın basit temelini hazırlayalım. Üst tarafa açık koyu işlemi için bir buton ekleyip biraz yazı yazalım.
<!DOCTYPE html>
<html>
<head>
<title>Açık Koyu Mod</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<label class="mode-control">
<input id="mode-btn" type="checkbox">
<span>Koyu Mod</span>
<span>Açık Mod</span>
</label>
<h1>Test Deneme</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script src="js.js"></script>
</body>
</html>Sayfamızın renk durumları için küçük bir css yazıyoruz. Yukarıda css.css dosyasını zaten dahil etmiştik.
body{
background-color: #eee;
color:#222;
transition: 300ms all;
}
body.dark{
background-color: #222;
color:#fff;
}
.mode-control input {
position: absolute;
opacity: 0;
}
.mode-control span:nth-of-type(2) {
display:none;
}
.mode-control input:checked + span {
display: none;
}
.mode-control input:checked + span + span {
display: inline-block;
}
.mode-control span {
display: inline-block;
padding:0 20px;
line-height: 30px;
border-radius: 30px;
background-color: #222;
color:#fff;
}
body.dark .mode-control span{
background-color: #fff;
color: #222;
}Yine html iskeletine dahil ettiğimiz javascript kodlarımızı görelim.
document.getElementById('mode-btn').addEventListener('click',() =>{
document.body.classList.toggle('dark');
localStorage.setItem('mode',document.body.classList);
});
if (localStorage.getItem('mode') != '') {
document.body.classList.add(localStorage.getItem('mode'));
document.getElementById('mode-btn').checked = true;
}Lisans Yönetim Scripti 2
Canlı Radyo Dark Scripti
Canlı Radyo Light Scripti
Rüzgar Radyo Scripti
Radyo Minimal
Ekitap Scripti
Aşk Sevgililer GünüEvlilik
Sohbet Scripti
Dialog Whatsapp Benzeri Sohbet
Firebase Chat
Web Ajans Scripti
Google Indexing Api
Milando Radyo Wordpress Teması
Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.
