Merhabalar,

Bu yazımda bazı sitelerde dikkatimi çeken, temaların tek bir tıklama ile farklı renklere veya stillere nasıl geçtiğinden bahsedeceğim. Bu işlemin farklı yolları olsa da, ben kendi kullandığım jQuery yöntemi ile anlatacağım.

Daha önce yazdığım sabit konumlandırma yazımda olduğu gibi, bu sefer renk seçiciyi sabit şekilde konumlandırarak kullanacağız.

Amacımız, tıklanan renge göre sayfadaki temayı değiştirmek. Bunu, tıklanan renge ait CSS dosyasını <link> etiketiyle çağırarak yapacağız.

HTML tarafında örnek yapı şu şekilde olabilir:

<link rel="stylesheet" id="temaRenk" href="css/kirmizi.css">

<div class="sag-icon-bar">
  <ul class="renkSec">
    <li><a href="#" data-css="css/mavi.css" class="mavi"></a></li>
    <li><a href="#" data-css="css/kirmizi.css" class="kirmizi"></a></li>
    <li><a href="#" data-css="css/sari.css" class="sari"></a></li>
    <li><a href="#" data-css="css/turuncu.css" class="turuncu"></a></li>
    <li><a href="#" data-css="css/yesil.css" class="yesil"></a></li>
  </ul>
</div>

Yukarıda her <a> etiketine data-css niteliği ile hangi CSS dosyasının çağrılacağını tanımladık. Bu bilgiler, jQuery ile link etiketine aktarılacak.

jQuery tarafı ise şöyle olacak:

$(document).ready(function() {
  $(".renkSec li a").click(function() {
    // data-css niteliğinden href değerini al ve link etiketini güncelle
    $('link#temaRenk').attr('href', $(this).data('css'));
  });
});

Yukarıdaki kodda sayfa yüklendikten sonra her renk seçeneğine tıklanıldığında, temaRenk id'sine sahip <link> etiketinin href değeri değiştirilir.

Bu sayede tema rengi anlık olarak değişmiş olur. CSS dosyalarında renk ve stil tanımlarınızı farklılaştırarak zengin tema seçenekleri oluşturabilirsiniz.

Umarım işinize yarar. Mutlu Kodlamalar :)