MyBB Gece modu özelliği [Modifikasyon]

[Novruz]

Bu modifikasyon sitenizine gece modu(koyu tema) seçicisi(switcher) ekleye bilirsiniz.
Farklı bir sitede paylaşırken yapımcı ismi belirtmenizi rica ediyorum, örn: Modifikasyon Yapımcısı: Novruz.

Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Headerinclude - [Gruplandırılmamış] Şablonlar » headerinclude »  {$stylesheets} değişkeninin üzerine aşağıdaki kodları ekleyin.

Kod: Tümünü Seç Tümünü Kopyala

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

Admin KP » Temalar ve şablonlar » Kullandığınız tema » global.css » Gelişmiş düzenleme » aşağıdaki kodları en alta ekleyin.

PHP Kod: Tümünü Seç Tümünü Kopyala

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


Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Header Şablonlar » header {$awaitingusers} değişkeni altına aşağıdaki kodu ekleyin.

Kod: Tümünü Seç Tümünü Kopyala

<button type="button" id="night-mode">Night Mode</button>

Not 1 : Gece modu seçici ikonun nerede gözükmesini istiyorsanız o şablona ekleyin. Örnek olarak header'a eklenmiştir.

Not 2 : Örnek olarak buton(span ve b. kullanıla bilir) eklenmiştir, önemli nokta eklediğiniz elementin night-mode id'sine sahip olması.

Not 3 : Gece saatlerinde siteye giriş yapan kullanıcıların otomatik olarak gece modunda siteyi kullanması için headerinclude şablonuna eklediğiniz kodları aşağıdaki ile değiştirin.

PHP Kod: Tümünü Seç Tümünü Kopyala

<script>(function(window, document, undefined) {
    'use strict';
    var hr = (new Date()).getHours();
    if(hr > 20 || hr < 6){
        document.documentElement.className += ' night-mode';
    }
    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> 


Hangi bölgelere uygulanması ayarlamak için CSS kullanımı : Hangi alanda kullanımını istiyor iseniz o bölüm için kullanacağınız seçici isminin önüne .night-mode eklemeniz yeterlidir.
Örnek : #content seçicisinin gece modunda nasıl gözükeceğini ayarlamak için .night-mode #content başlığı altında gerekli tanımlamaları yapa bilirsiniz.

Dip not : Yapıla işlemler size sadece işlemin nasıl yapıldığını anlatma amaçlı, kişiselleştirme tamamen size kalmış bir şey.

Önizleme :

https://resmim.net/f/Xdv5dt.png

[Arch]

Önizlemeyi goruntuleyemiyorum

[Novruz]

Önizlemeyi goruntuleyemiyorum

Hızlıresim sunucularında problem var galiba, yedek önizleme linki eklenmiştir.

[admin]

- destek sitesine uygulanmıştır. Teşekkürler. (ve ben gece modunu kullanıyorum, gözü yormuyor)
- hızlıresim mümkünse kullanmayın. Bazı yerlerden açılmıyor.

[Ciri]

post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

[Novruz]

post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Postbit kısmı için gece modu özelliği postbit butonları yanına eklenmiştir(PGM).

[#Power]

post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı

[admin]

Bence yine de kullanışlı..
Ama tabi daha kullanışlı hale getirilebilir.
Mesela öneri: gece modunda, beyaz kalan aradaki yerlerin rengi de koyulaştırılabilir. bunu bi deneyin bence.. yani kodlayabilirseniz @Novruz ben de destek forumuna uygularım. şuanda bu gece modu destekte var. üstte sağda görebilirsiniz basit bir şekilde tıklanabilen bir yer/link gibi var.

[Ciri]

Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.

[admin]

Destek'e girince mi oluyor? nerede oluyor ? ne durumda ?

[Novruz]

post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı

Zaten tümüyle gece moduna uyarlama gibi bir amacımız yok şuanlık, yeni bir temaya geçildiği zaman tümüyle uyarlama yapılacaktır.

Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.

Ben de Opera kullanıyorum ve hiç bir hata yok. Hangi butonda bu hatayı aldığını belirtir misin?

[Ciri]

post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı

Zaten tümüyle gece moduna uyarlama gibi bir amacımız yok şuanlık, yeni bir temaya geçildiği zaman tümüyle uyarlama yapılacaktır.

Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.

Ben de Opera kullanıyorum ve hiç bir hata yok. Hangi butonda bu hatayı aldığını belirtir misin?

PGM butonunda. Çerezleri mi temizlemem gerek? Tarayıcının Site Ayarları bölümünde Javascript kullanımı varsayılan olarka izin ver şeklinde ayarlı

[Novruz]

post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı

Zaten tümüyle gece moduna uyarlama gibi bir amacımız yok şuanlık, yeni bir temaya geçildiği zaman tümüyle uyarlama yapılacaktır.

Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.

Ben de Opera kullanıyorum ve hiç bir hata yok. Hangi butonda bu hatayı aldığını belirtir misin?

PGM butonunda. Çerezleri mi temizlemem gerek? Tarayıcının Site Ayarları bölümünde Javascript kullanımı varsayılan olarka izin ver şeklinde ayarlı

Kodlar güncellendi, tekrar kontrol eder misin?

[leojely]

f.lux indirin bitsin gitsin

[admin]

Bu hali daha iyi @Novruz
elinize sağlık

[Arch]

.//Düzenlendi

[erhan35]

Teşekkürler işe yarar bilgiler.

[SeSiLya]

Gece gündüz iconu olarak nasıl yapabiliriz.

[SeSiLya]

Bu linkteki gibi olsa iyi olur.

https://codepen.io/himalayasingh/pen/eaejBQ

Alttaki gibi css kullanmak istiyorum.Yukardaki kodu nasıl ayarlayabiliriz. Sayfa degiştirince bazı kodlarda sayfayı yenileyince beyazlık çıkıyor.

.dark body {
background: #000;
}