Çözüldü Kodlanan web sitesinde tema tercihi tüm sayfalarda nasıl korunur?

Liyan · 10 Haziran 2024

Merhaba değerli arkadaşlar,
Benim bir web sitem var ve Local'de çalıştırıyorum ve index.html sayfasında light Dark mode yaptım ve çalışıyor ama bu yaptığım tema değiştirme modunu diğer sayfalarda tek tek değiştirmek istemiyorum. İndex'te seçtiğim tema diğer kalan bütün HTML sayfalarına otomatik olarak uygulansın istiyorum çünkü bir kullanıcı temayı Index'te Dark tema yaptıktan sonra diğer sayfaya geçtiğinde beyaz oluyor ve sürekli kullanıcı her sayfa ve her bir F5 (sayfa yenilemesi) yaptığında tema beyaza dönüyor.
Yardımcı olursanız çok sevinirim.
İyi günler dileklerimle...

oynozan · 10 Haziran 2024

localStorage kullanabilirsiniz, kullanıcının tema tercihini tarayıcıya kaydedin.

JavaScript:

let tema = localStorage.getItem("tema") ?? "white"
changeTema();

document.querySelector("#tema-butonu").addEventListener("click", () => {
    if (tema === "white") tema = "black";
    else tema = "white";
    
    localStorage.setItem("tema", tema);
    changeTema();
});

function changeTema() {
    // Tema değiştirmeyle ilgili işlemler
    // Örneğin body elementine tema class'ı eklemek gibi
}

Deniz ÇAKMAK · 10 Haziran 2024

Takip+

Arıcan · 10 Haziran 2024

Deniz ÇAKMAK dedi:
Takip+

Konuyu takip etmek istiyorsanız, takip etme tuşuna basabilirsiniz.

TheAny · 10 Haziran 2024

Cookie yada account varsa pref diye bir tablo vs ile.

oynozan · 10 Haziran 2024

localStorage kullanabilirsiniz, kullanıcının tema tercihini tarayıcıya kaydedin.

JavaScript:

let tema = localStorage.getItem("tema") ?? "white"
changeTema();

document.querySelector("#tema-butonu").addEventListener("click", () => {
    if (tema === "white") tema = "black";
    else tema = "white";
    
    localStorage.setItem("tema", tema);
    changeTema();
});

function changeTema() {
    // Tema değiştirmeyle ilgili işlemler
    // Örneğin body elementine tema class'ı eklemek gibi
}

Liyan · 10 Haziran 2024

oynozan dedi:

localStorage kullanabilirsiniz, kullanıcının tema tercihini tarayıcıya kaydedin.

JavaScript:

let tema = localStorage.getItem("tema") ?? "white"
changeTema();

document.querySelector("#tema-butonu").addEventListener("click", () => {
    if (tema === "white") tema = "black";
    else tema = "white";
    
    localStorage.setItem("tema", tema);
    changeTema();
});

function changeTema() {
    // Tema değiştirmeyle ilgili işlemler
    // Örneğin body elementine tema class'ı eklemek gibi
}

Bunu deneyeceğim

oynozan dedi:

localStorage kullanabilirsiniz, kullanıcının tema tercihini tarayıcıya kaydedin.

JavaScript:

let tema = localStorage.getItem("tema") ?? "white"
changeTema();

document.querySelector("#tema-butonu").addEventListener("click", () => {
    if (tema === "white") tema = "black";
    else tema = "white";
   
    localStorage.setItem("tema", tema);
    changeTema();
});

function changeTema() {
    // Tema değiştirmeyle ilgili işlemler
    // Örneğin body elementine tema class'ı eklemek gibi
}

Olmadı veya ben yapamadım.

oynozan · 11 Haziran 2024

Liyan dedi:
Olmadı veya ben yapamadım.

Yazdığın kodu görmeden yorum yapamayız.

Liyan · 11 Haziran 2024

Kodumu en baştan düzenledim ve çalışıyor ama index sayfasından sonra girdiğim sayfada rengi değiştirir isem geri index sayfasına döndüğümde uygulamıyor bunu da çözmeye çalışacağım (Sadece geri yaptığında tema kodu çalışmıyor ama site içinde gezindiğinde yani ana sayfaya sayfadaki linkle dönünce temayı uyguluyor)
Not: Kodumda çok işe yaramayan ve anlamsız şeyler varmış onların hepsini tek tek düzeltip o kodu yazınca oldu teşekkür ederim @oynozan

Çözüldü Kodlanan web sitesinde tema tercihi tüm sayfalarda nasıl korunur?

Ayrıntılı düzenleme

Liyan

Decapat

oynozan

Deniz ÇAKMAK

Hectopat

Arıcan

Hectopat

TheAny

Gigapat

oynozan

Megapat

Liyan

Decapat

oynozan

Megapat

Liyan

Decapat

Benzer konular