MyBB Gece Modu Özelliği Yapma - MyBB Gece Modu Butonu Yapma

***şenol*** · (Son Düzenleme: 30-06-2021 Saat 00:41, Düzenleyen: şenol.)

MyBB Gece Modu Özelliği Yapma / MyBB Gece Modu Butonu Yapma

Bu Modifakasyon Sayesinde MyBB Sitenize gece modu özelliği yapabilirsiniz

Modifakasyon Yapımcısı ;Nevruz

İşlemlere geçelim

Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Headerinclude - [Gruplandırılmamış] Şablonlar » headerinclude » Şablonunu açın..

Aşağıdaki kodu kodu bulun;

Kod:
{$stylesheets}

Bulduktan sonra hemen üst kısmına şu kodları ekleyin..

Kod:
<script>(function(window, document, undefined) {
    'use strict';
    if (!('localStorage' in window)) return;
    var nightMode = localStorage.getItem('gmtNightMode');
    if (nightMode) {
        document.documentElement.className += ' night-mode';
    }
})(window, document);    

document.addEventListener('DOMContentLoaded',function() {
    'use strict';
    // Feature test
    if (!('localStorage' in window)) 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') ) {
            localStorage.setItem('gmtNightMode', true);
            return;
        }
        localStorage.removeItem('gmtNightMode');
    }, false);
});</script>

Buradaki işlem bu kadardır. Kaydedip kapatın sonraki işleme geçelim.

Admin KP » Temalar ve şablonlar » Kullandığınız tema » global.css » Gelişmiş düzenleme » dedikten sonra aşağıdaki kodları en alt kısıma ekleyin.

Kod:
night-mode body{
    background-color: #14191e
}

.night-mode #content{
    background-color: #14191e;
    color: #eee
}

.night-mode #logo{
    background-color:#14191e
}

.night-mode #logo a{
    color:#eee
}

.night-mode .trow1, .night-mode .trow2{
    background-color: #14191e;
    border-color: #14191e;
    color:#eee
}

.night-mode .trow1 a, .night-mode .trow2 a{
    color: #eee
}

Buradaki işlemde bitti kaydedip kapatın. şimdi en son işelme kaldı Gece modu botonunu ekleyeceğiz..

Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Header Şablonlar » header Şablonunu açın..

Şu kodu bulun;

Kod:
{$awaitingusers}

bulduktan sonra altına ekleyin

PHP Kod:
<button type="button" id="night-mode">Gece Modu</button> 

Buradaki işlemde bu kadardır eğer bu Gece Modu botununu siz nerede görünmesini istiyorsanız orayada ekleyebilirsiniz size kalmış..

Son olarak eğer kullanıcılarınızın gece saatlerinde sitenizde otomatik olarak gece modunda kullanmasını istiyorsanız yukarıdaki headerinclude şablonuna eklediğiniz kodları aşağıdaki kodlarla değiştirin.

Kod:
<script>(function(window, document, undefined) {
    'use strict';
    if (!('localStorage' in window)) return;
    var nightMode = localStorage.getItem('gmtNightMode');
    if (nightMode) {
        document.documentElement.className += ' night-mode';
    }
})(window, document);   

document.addEventListener('DOMContentLoaded',function() {
    'use strict';
    // Feature test
    if (!('localStorage' in window)) 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') ) {
            localStorage.setItem('gmtNightMode', true);
            return;
        }
        localStorage.removeItem('gmtNightMode');
    }, false);
});</script>

Tepkiler

**cool** · 29-11-2022 Saat 10:42

(16-02-2021 Saat 23:08)şenol Adlı Kullanıcıdan Alıntı:
PHP Kod:
<button type="button" id="night-mode">Gece Modu</button>

Buradaki işlemde bu kadardır eğer bu Gece Modu botununu siz nerede görünmesini istiyorsanız orayada ekleyebilirsiniz size kalmış..

Butonu burdaki gibi tıklayınca gece gündüz iconu olarak nasıl yapabiliriz.

Tepkiler

Konu Bilgileri
	KATEGORİ ADI MyBB	KONU SAHİBİ şenol
	KONUDAKİ CEVAP SAYISI 1	GÖRÜNTÜLEME SAYISI 2041
	📊 KONU ETKİLEŞİM İNDEKSİ Hesaplanıyor... Veriler analiz ediliyor... %0 💬 Fikrinizi Paylaşın! Bu konu hakkında ne düşünüyorsunuz? Yorumunuz topluluğumuz için değerli.

Konu ile Alakalı Benzer Konular
Konular	Yazar	Yorumlar	Okunma	Son Yorum
Eklenti MyBB Google & Yandex Ping Sistemi	*şenol*	0	467	12-08-2025 Saat 00:39 Son Yorum: *şenol*
MyBB FASTyle	*şenol*	0	602	21-12-2024 Saat 01:56 Son Yorum: *şenol*
MyBB Yeni Üye Olan Kişiye Özel Mesaj Eklentisi	*şenol*	4	1,556	04-09-2023 Saat 20:52 Son Yorum: antenmert
Mybb Google SEO 1.8.4 Güncelleme Paketi Indir	*şenol*	9	3,657	29-05-2023 Saat 10:43 Son Yorum: cengizars00
MyBB 2 Faktörlü Kimlik Doğrulama Eklentisi	*şenol*	3	1,483	20-03-2023 Saat 19:30 Son Yorum: senman