Arka planı belirlesin derken sadece arka planla bitmez o iş.
textler, linkler, hover, focus vs özelliklerinin de arka plana göre ayarlanması gerekir.
Sana en kolay ve performanslı yöntemini kısadan özet geçeyim. Sitene göre ayarlarsın.
ÖRNEK CSS;
Aşağıda 2 adet renge göre css örneği yazıyorum.
İhtiyaca göre itemler arttırılabilir.
Şayet renge göre değiştireceğin tagların sayısı az ise tüm renkleri aynı css dosyasında çağırırsın.
Fazla ise farklı dosyalara koyman daha iyi olur. Gereksiz yere dosya boyutu artmasın. Renge göre ilgili dosyayı çağırırsın.
.black{background:#000000}
.black a{color:#ffffff}
.black p{color:#ff0000}
.white{background:#ffffff}
.white a{color:#000000}
.white p{color:#696969}
ÖRNEK HTML;
Default rengi html sayfada static olarak body tagına veriniz.
ÖRNEK JS;
$(".color span").click(function(){
$("body").removeAttr("class").addClass($(this).attr("id"));
});
NOT:
Şayet body de farklı class larda var ise bu durumda renge tıklandığında sadece seçili olan rengin class ını silip tıklanan rengin class ını eklemen gerekir. Şayet başka class yoksa yukarıdaki gibi kullanabilirsin.
Ya da renk class ını doğrudan HTML tagına eklersin. Renk belirtecinde seçili olan rengi tasarım anlamında göstermek istersen veya üzerinde farklı işlemlerde yapacaksan color şemasında tıklanan renge (active) class ı da ekleyebilirsin. Bu durumda scriptini de ona göre yazarsın.
Bunun haricinde farklı bir sürü yöntem var fakat en iyi ve performanslı yöntem budur.
Kolay gelsin.