الطريقة جدا مميزة وسهله
انشاء متغيرات css داخل عنصر root:
:root {
--primary: #8b5cf6;
}
بعد ذالك ننشى input من نوع color
<input type="color" id="primary-color" name="change-color" value="#8B5CF6"/>
طبعا اللون الاساسي في المثال هو
#8B5CF6
الان بعد هذا لنستخدم javascript لتغيير القيمة عند تغيير اللون في input
document.querySelector('input[name="change-color"]')
.addEventListener('input', function(){
let root = document.querySelector(":root");
root.style.setProperty("--primary", this.value);
})
اول سطر هو لتحديد العنصر لقد حددناه عن طريق اسم الinput
السطر الثاني عند تغيير لون input سوف ننفذ الكود في function closure
السطر الثالث واضح وهو تحديد root في css اللي خزنا داخله المتغيرات
let root = document.querySelector(":root");
واخر سطر غيرنا قيمة متغير primary الى القيمة الخاصة بـ input
طبعا الطريقة تنفع لكثير من خصائص الموقع
وبس والله. ✋