İçeriğe geç
ShiftDelete.Net
Haber ara/ SDN'ye SorGiriş
Haber Akışı SDNTV İnceleme Forum Yapay Zeka Akıllı Telefon Elektrikli Otomobil Oyun ShiftDelete.Net Global Teknoloji Haberleri Mobil Otomobil Donanım Savunma Bilim Sosyal Medya İnternet Giyilebilir Teknoloji Rehber Ürünler Son dakika Yazarlar
  1. Ana sayfa
  2. Topluluk
  3. Programlama
  4. Web Programlama (PHP, ASP, HTML, CSS, JavaScript)
Web Programlama (PHP, ASP, HTML, CSS, JavaScript)

Dark mod aktif etme.

muratbudak5419.09.20203 cevap923 görüntüleme
2020'den beri40 mesaj
#1
Dark modu aktif ediyorum tek ettiğim sayfada kalıyor bunu bütün sayfalarda nasıl aktif ederim?

kodlar
                        <div class="checkbox checkbox-slider--b-flat">
                            <label class="mode-control">
                                <input id="mode-btn" type="checkbox">
                                <span>Dark mod</span>
                            </label>
                        </div>
<style>
    body
    {
        background-color: #eee;
        color: #222;
        transition: 300ms;
    }

    body.dark
    {
        background-color: #413d3e;
        color: #fff;
    }

    .mode-control span:nth-of-type(2)
    {
        display: none;
    }

    .mode-control input:checked + span
    {
        display: inline-block;
    }
</style>
<script src="script.js"></script>


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;
}
Cevaplar
2017'den beri177 mesaj
#2
Dark mod için bir çok yöntem var aslında , yapınızı net bilmeden birşeyler söylemek pek doğru değil ama, en basit yöntemlerden birini söylemek isterim. Belki bir fikir olur sizin için.

Veritabanında kullanıcı detaylarını tuttuğun yerde bir tanede de tema seçeneği alanı eklersin.
değer 0 yada 1 olur. Açık temam ya 0 dersin dark yani koyu temaya da 1 dersin..

php yada benzeri web dillerinden bir ni kullanıyorsanız if kullanarak ilgili css dosyasını include edebilirsiniz.. Veritabanındaki değer 0 ise beyaz temanın css dosyası gelip çalışacak, 1 ise dark tema :)

Bu durumu her defasında sql sorgusu yaparak çekmene gerek yok session değeri ile de tutabilirsin.
Mod değişimi olunca ilgili session değierini sıfırlayıp yeni değeri oluşturursunuz.

Öneli olan işin işleyişini ve mantığını anlamak. Kolay gelsin.
muratbudak54 Konuyu açan
2020'den beri40 mesaj
#3
Güzel fikir, teşekkür ederim.
2017'den beri434 mesaj
#4
Dark mod için bir çok yöntem var aslında , yapınızı net bilmeden birşeyler söylemek pek doğru değil ama, en basit yöntemlerden birini söylemek isterim. Belki bir fikir olur sizin için.

Veritabanında kullanıcı detaylarını tuttuğun yerde bir tanede de tema seçeneği alanı eklersin.
değer 0 yada 1 olur. Açık temam ya 0 dersin dark yani koyu temaya da 1 dersin..

php yada benzeri web dillerinden bir ni kullanıyorsanız if kullanarak ilgili css dosyasını include edebilirsiniz.. Veritabanındaki değer 0 ise beyaz temanın css dosyası gelip çalışacak, 1 ise dark tema :)

Bu durumu her defasında sql sorgusu yaparak çekmene gerek yok session değeri ile de tutabilirsin.
Mod değişimi olunca ilgili session değierini sıfırlayıp yeni değeri oluşturursunuz.

Öneli olan işin işleyişini ve mantığını anlamak. Kolay gelsin.
bunun için veritabanı kullanmaya gerek yok javascript ile cookie ekleyebilir

Cevabını yaz

Cevap yazmak için giriş yap ya da üye ol. Eski forum kullanıcı adın ve parolanla girebilirsin.