Web siteye Karanlık Tema Ekleme

Question

Karanlık temalara bayılıyorum. Kullandığım her Web sitesinde ve uygulamada karanlık tema tercih ediyorum. Peki tema seçeneklerini sitemize nasıl koyarız? Birden fazla temayı sitemizde nasıl yapabiliriz bu rehberde bunu anlatacağım.

Düğmeyi Oluşturma

Düğmeyi oluşturmak için checkbox, radio veya button elementlerini kullanabiliriz. Burada ben radio elementini kullanacağım.

<div class="radio">

  <input type="radio" id="theme1" name="theme1" />

  <input type="radio" id="theme2" name="theme2" />

  <input type="radio" id="theme3" name="theme3" />

</div>

Renk Düzenlerini Oluşturma

Renk düzenlerini CSS değişkenlerini kullanarak oluşturacağız. SASS değişkenlerinin derlenmesi gerektiğinden SASS değişkenleri kullanamazsınız! Bu uygulamada ben üç tane tema yapıyorum dolayısıyla üç tane renk düzeni oluşturacağım. İlki;

 :root {

  --color-main: #3b4664;

  --color-white: #ffffff;

  --bg-main: #181f32;

  --bg-buttons: rgba(37, 45, 68, 0.6);

  --num: #eae3db;

  --number-color: #484b5a;

  --number-border: #b3a599;

  --button-secondary: #647299;

  --border-secondary: #404d70;

  --button-tertiary: #d13f30;

  --border-tertiary: #922417;

  --radio-color: #cf3f34;

}

Bu varsayılan temam olacak dolayısıyla herhangi bir attribute eklememe gerek yok. İkinci temam;

body[data-theme="light"] {

  --color-main: #e6e6e6;

  --color-white: #3a3a32;

  --bg-main: #eeeeee;

  --bg-buttons: #d3cdcd;

  --num: #e5e4e0;

  --number-color: #3a3a32;

  --number-border: #a69c93;

  --button-secondary: #388187;

  --border-secondary: #1a5d66;

  --button-tertiary: #c85401;

  --border-tertiary: #873a02;

}

Bu aydınlık temamız olacak. data-theme yazarak bunu belirtmemiz gerekli. Data özel bir attribute. Data hakkında daha fazla bilgi almak istiyorsanız buraya bakın.

Son temamızsa;

body[data-theme="purple"] {

  --color-main: #17062a;

  --color-white: #ffe43b;

  --bg-main: #1e0836;

  --bg-buttons: #1e0836;

  --num: #331b4d;

  --number-color: #ffe537;

  --number-border: #85219b;

  --button-secondary: #56077c;

  --border-secondary: #bf15f4;

  --button-tertiary: #00decf;

  --border-tertiary: #6dfaf1;

  --radio-color: #00e8d8;

}

Bu kurulumla birlikte değişkenlerimizi kodumuzda kullanıp istediğimiz temayı dinamik olarak sayfamızda değiştirebileceğiz.

İşlevselliği Ekliyoruz

İlk olarak radio elementlerimizi Javascript ile seçmemiz gerekli.

const theme1 = document.getElementById("theme1");

const theme2 = document.getElementById("theme2");

const theme3 = document.getElementById("theme3");

Şimdi changeTheme() fonksiyonunu oluşturacağız. Bu fonksiyon body attribute değerini değiştirmemizi sağlayacak ve böylece istediğimiz temayı sitede kullanabileceğiz.

function changeTheme() {

  if (theme1.checked) {

    document.body.setAttribute("data-theme", "");

  } else if (theme2.checked) {

    document.body.setAttribute("data-theme", "light");

  } else if (theme3.checked) {

    document.body.setAttribute("data-theme", "purple");

  } else return;

}

Şimdi de eventListener eklememiz lazım, yapmasını istediğimiz iki şey var;

Radio elementine tıkladığımızda diğer bütün radio elementlerini uncheck haline getirmemiz lazım.

Her radio elementine tıkladığımızda changeTheme() fonksiyonunu çalıştırmamız lazım.

 theme1.addEventListener("click", () => {

  theme2.checked = false;

  theme3.checked = false;

  changeTheme();

});

theme2.addEventListener("click", () => {

  theme1.checked = false;

  theme3.checked = false;

  changeTheme();

});

theme3.addEventListener("click", () => {

  theme1.checked =false;

  theme2.checked = false;

  changeTheme();

});

Bununla birlikte bütün temalarımız işlevesel bir şekilde çalışıyor! Kullanıcı hangi temaya tıklarsa site ona göre değişecek.

Kullanıcının Tercihine Göre Temayı Kaydetme

İki sorunumuz var:

Kodumuzda varsayılan tema yok.

Kullanıcının tercih ettiği temayı kaydetmiyoruz. Sayfa her yenilendiğinde tema eski haline dönüyor.

Bu sorunu localStorage kullanarak aşacağız.

İlk olarak varsayılan tema oluştralım.

// Varsayılan temam "theme1" olacak

if (localStorage.getItem("theme") === null) {

  localStorage.setItem("theme", "theme1");

}

Switch kullanarak her sayfayı yenilediğimizde seçilen temayı tekrar seçeceğiz.

switch (localStorage.getItem("theme")) {

  case "theme1":

    theme1.checked = true;

    break;

  case "theme2":

    theme2.checked = true;

    break;

  case "theme3":

    theme3.checked = true;

    break;

  default:

    break;

}

Daha sonrasında localStorage.setItem() kullanarak eventListener'larının kullanıcının seçtiği temayı localStorage'a kaydetmesini sağlayacağız.

theme1.addEventListener("click", () => {

  theme2.checked = false;

  theme3.checked = false;

  // New Code

  localStorage.setItem("theme", "theme1");

  changeTheme();

});

theme2.addEventListener("click", () => {

  theme1.checked = false;

  theme3.checked = false;

  // New Code

  localStorage.setItem("theme", "theme2");

  changeTheme();

});

theme3.addEventListener("click", () => {

  theme1.checked = false;

  theme2.checked = false;

  // New Code

  localStorage.setItem("theme", "theme3");

  changeTheme();

});

Son olarak kodun sonunda changeTheme() fonksiyonunu çağırmamız gerekli ki her sayfayı yenilediğimizde rengimiz değişebilsin.

Bu kadar! Websitemizde kullanıcının seçebileceği 3 tane temamız var ve localStrage kullanarak temayı kaydediyoruz. Sitenize bu yöntemle istediğiniz kadar tema ekleyebilirsiniz.

Kapanış

Kullanıcının tema tercihini de göz önünde bulundurmak istiyorsanız CSS'te olan prefers-color-scheme media query'sini kullanarak varsayılan temayı karanlık/aydınlık olarak ayarlayabilirsiniz. Kolay bir işlem olduğundan bu rehberi daha fazla uzatmak istemiyorum.

Answer 1

html koduna eklerseniz aynı işi görür
---------------
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
const options = {
  bottom: '64px', // default: '32px'
  right: '32px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.8s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#3E7D2F',  // default: '#100f2c'
  buttonColorLight: '#3E7D2F', // default: '#fff'
  saveInCookies: true, // default: true,
  label: '&#127771', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();
  
</script>