Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!

Jquery Dark Mode

mcv_js

xFanatik
SMS onaylı
Kullanıcı
Katılım
22 Nis 2017
Mesajlar
1,249
Çözümler
7
Merhabalar arkadaşlar.Size bu konumda nasıl kolayca sitemize dark mode ekleriz onu göstereceğim.Sitenizde en son sürüm jquery olduğundan emin olun.
Aşağıda verdiğim kodu script tagi içinde veya js dosyası içerisinde dahil edin;
JavaScript:
//Değişkenimize localStorage atayalım
var darkMode = localStorage.getItem('darkModeStorage');
Değişken varsa
if (darkMode) {
//Html etiketine dark-mode classı ekle
    $(document.documentElement).addClass('dark-mode');
}
$(function () {
//active-dark idli nesneye tıklayınca
    $('#active-dark').on('click', function (e) {
      //href devre dışı bırak sadece script
        e.preventDefault();
        //Htmlde dark-mode classı varsa yok et yoksa ekle
        $(document.documentElement).toggleClass('dark-mode');
        //Eğer htmlde dark-mode classı varsa
        if ($(document.documentElement).hasClass('dark-mode')) {
            //localStorage ile darkModeStorage itemi oluştur
            localStorage.setItem('darkModeStorage', true);
            //Yoksa
        } else {
           //darkModeStorage itemini sil
            localStorage.removeItem('darkModeStorage');
        }
    });
});
Şimdi bir attribute oluşturalım.Id si active-dark olacak.
HTML:
<a id="active-dark">Dark/Light</a>
Bu nesneye tıklayınca geçiş yapacak.Peki css de nasıl işlem uygulayacağız?
CSS:
body {
background:#fff;
}
.dark-mode body {
background:#000;
}
 
Moderatör tarafında düzenlendi:
BENİM Ki Dark Theme Zaten Bunu Nasıl Beyaz Yaparım :)
aynı olayı ters şekilde kullanabilirsin.Eklediği classın ismini kendince değiştirirsin.Localstorage itemin ismini de kendine özel bir şey yaparsın.O şekilde kodu revize edersin.
Sonra css de dark-mode yerine .kendi-classin body { xxx } yaparsın mesela
 
aynı olayı ters şekilde kullanabilirsin.Eklediği classın ismini kendince değiştirirsin.Localstorage itemin ismini de kendine özel bir şey yaparsın.O şekilde kodu revize edersin.
Sonra css de dark-mode yerine .kendi-classin body { xxx } yaparsın mesela
Ben Bu Konularda Yeniyim Bana ULAŞIP Yardım Eedebilirmisin Yiğit Can Kara
 
how to show buttom for change to night mod ?

I have added these codes

helper_js_global:
Screenshot_195.png Screenshot_196.png

<script type="javascript">
document.addEventListener('DOMContentLoaded',function() {
'use strict';
// Feature test
if (!(navigator.cookieEnabled)) return;
var nightMode = document.querySelector('#night-mode');
if (!nightMode) return;
// When clicked, toggle night mode on or off
nightMode.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('night-mode');
if ( document.documentElement.classList.contains('night-mode') ) {
Cookies.set('nightMode', true, { expires: 365 });
return;
}
Cookies.remove('nightMode');
}, false);
});
</script>

ــــــــــــــــــ
PAGE_CONTAINER:
Screenshot_194.png

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script type="javascript">
(function(document, undefined) {
'use strict';
if (!(navigator.cookieEnabled)) return;
var nightMode = Cookies.get('nightMode');
if (nightMode) {
document.documentElement.className += ' night-mode';
}
})(document);
</script>

_________________
extra.less:

.night-mod {
.p-pagewrapper {
background:#1d1d1d;
}
}


According to this tutorial
 
how to show buttom for change to night mod ?

I have added these codes

helper_js_global:
Ekli dosyayı görüntüle 13070 Ekli dosyayı görüntüle 13071

<script type="javascript">
document.addEventListener('DOMContentLoaded',function() {
'use strict';
// Feature test
if (!(navigator.cookieEnabled)) return;
var nightMode = document.querySelector('#night-mode');
if (!nightMode) return;
// When clicked, toggle night mode on or off
nightMode.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('night-mode');
if ( document.documentElement.classList.contains('night-mode') ) {
Cookies.set('nightMode', true, { expires: 365 });
return;
}
Cookies.remove('nightMode');
}, false);
});
</script>

ــــــــــــــــــ
PAGE_CONTAINER:
Ekli dosyayı görüntüle 13072

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script type="javascript">
(function(document, undefined) {
'use strict';
if (!(navigator.cookieEnabled)) return;
var nightMode = Cookies.get('nightMode');
if (nightMode) {
document.documentElement.className += ' night-mode';
}
})(document);
</script>

_________________
extra.less:

.night-mod {
.p-pagewrapper {
background:#1d1d1d;
}
}


According to this tutorial
Can you help us?
 
baya emek isteyen beceri isteyen bir olay bu ..buna kafa yormak bile mesela
teşekkürler emeğine sağlık
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.