img

Javascript İle Açık Koyu Tema Örneği

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;
}

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    14.1K
    300.00₺
  • Canlı Radyo Dark Scripti

    8.9K
    500.00₺
  • Canlı Radyo Light Scripti

    6K
    500.00₺
  • Rüzgar Radyo Scripti

    6.9K
    300.00₺
  • Radyo Minimal

    3K
    300.00₺
  • Ekitap Scripti

    4.9K
    1200.00₺
  • Aşk Sevgililer Günü Evlilik

    6.2K
    200.00₺
  • Sohbet Scripti

    6.5K
  • Dialog Whatsapp Benzeri Sohbet

    4K
  • Firebase Chat

    2.9K
    0.00₺
  • Kurumsal Veya Özel Site Hizmet

    1.7K
  • Web Ajans Scripti

    14.7K
    1500.00₺
  • Tekrar Kurulum Hizmeti

    1.8K
    25.00₺
  • Gümrük Ürün Yönetimi

    2.2K
    800.00₺
  • Ajans Scripti Kolay Kullanım

    2.1K
    500.00₺
  • Ajans Scripti V2

    2.4K
    500.00₺
  • Ajans Scripti V3

    2.1K
    500.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    1.7K
    500.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    1.8K
    700.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.5K
    500.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    1.9K
    700.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    1.7K
    500.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    22.2K
    700.00₺
  • İlaçlama Şirketi Web Tasarımı

    3.3K
    500.00₺
  • İlan Web Tasarımı

    1.8K
    1000.00₺
  • İlan Web Tasarımı V2

    1.7K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.5K
    500.00₺
  • İnşaat Firması Tasarımı V2

    1.6K
    700.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.1K
    500.00₺
  • Kombi Klima Servisi Web Tasarımı

    1.8K
    500.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    1.7K
    500.00₺
  • Kurumsal Firma Web Tasarımı V2

    2.4K
    500.00₺
  • Kurumsal Firma Web Tasarımı V3

    2.4K
    500.00₺
  • Ajans Web Tasarımı V4

    2K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2.3K
    500.00₺
  • Kurumsal Firma Web Tasarımı V5

    2.7K
    500.00₺
  • Kurumsal Firma Web Tasarımı V6

    2.5K
    700.00₺
  • Kurumsal Firma Web Tasarımı V7

    2.5K
    700.00₺
  • Kurumsal Firma Web Tasarımı V8

    2.6K
    700.00₺
  • Mobilya Dekorasyon Web Tasarımı

    1.9K
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    1.7K
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    1.7K
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    1.7K
    500.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    1.8K
    500.00₺
  • Otel Pansiyon Web Tasarımı

    1.9K
    700.00₺
  • Özel Oto Servis Web Tasarımı

    1.6K
    500.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    4.5K
    500.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    2.4K
    700.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    2.1K
    700.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    1.9K
    700.00₺
  • Teknik Servis Web Tasarımı

    1.9K
    500.00₺
  • Sigorta Acenta Web Tasarımı

    1.6K
    500.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    1.5K
    500.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    1.8K
    700.00₺
  • Sürücü Kursu Web Tasarımı

    2.1K
    500.00₺
  • Tek Ürün Satış Web Tasarımı

    2.1K
    500.00₺
  • Tek Ürün Satış Web Tasarımı V2

    1.8K
    700.00₺
  • Tek Ürün Yaprak Web Tasarımı

    1.8K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    1.9K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    2K
    700.00₺
  • Temizlik Şirketi Web Tasarımı

    2K
    500.00₺
  • Temizlik Şirketi Web Tasarımı V2

    2.1K
    700.00₺
  • Ajans Web Tasarımı V5

    2.3K
    900.00₺
  • Ajans Web Tasarımı V6

    3.4K
    900.00₺
  • Werock Radyo Web Tasarımı

    2.9K
    800.00₺
  • Werock Android Radyo Uygulaması

    1.5K
    1200.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    784
    500.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    627
    500.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    2.1K
    500.00₺
  • İnşaat Firması Web Tasarımı V3

    616
    500.00₺
  • Kurumsal Firma Web Tasarımı V9

    820
    500.00₺
  • Mimarlık Web Tasarımı

    690
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    732
    500.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    697
    500.00₺
  • Psikolog Web Tasarımı

    803
    500.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    1K
    600.00₺
  • Sürücü Kursu Web Tasarımı V2

    933
    500.00₺
  • Teknik Servis Web Tasarımı V3

    982
    500.00₺
  • Ajans Web Tasarımı V7

    530
    900.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img