تغيير CSS: متغيرات الألوان الجذرية في JavaScript

في مجال تطوير الويب، غالبًا ما يتم تخصيص الجماليات المرئية لصفحة الويب من خلال استخدام متغيرات CSS. هذه المتغيرات، المحددة في القسم:root من CSS، تمكن المطورين من التحكم في جوانب مختلفة من التصميم. أحد السيناريوهات الشائعة هو القدرة على تغيير هذه الألوان ديناميكيًا باستخدام جافا سكريبت.

ولتحقيق ذلك، الجزء الأساسي من التعليمات البرمجية هو:

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

يقوم هذا السطر بشكل أساسي بتعديل متغير CSS المحدد في القسم :root، وتحديث قيمته إلى اللون المطلوب. على سبيل المثال، إذا كنت تريد تغيير متغير اللون --main-color إلى اللون الأسود، فيمكنك استخدام الكود التالي:

document.documentElement.style.setProperty('--main-color', '#000000');

تطبيق هذا الكود على المثال الوارد في السؤال:

function setTheme(theme) {
  if (theme == 'Dark') {
    localStorage.setItem('panelTheme', theme);
    $('#current-theme').text(theme);
    document.documentElement.style.setProperty('--main-color', '#000000');
  }
  if (theme == 'Blue') {
    localStorage.setItem('panelTheme',  'Blue');
    $('#current-theme').text('Blue');
    alert("Blue");
  }
  if (theme == 'Green') {
    localStorage.setItem('panelTheme', 'Green');
    $('#current-theme').text('Green');
    alert("Green");
  }
}

يعمل هذا الكود المحدث على تعديل متغير --main-color بنجاح ويغير الألوان على صفحة الويب ديناميكيًا عند النقر فوق زر.