सीएसएस बदलना: जावास्क्रिप्ट में रूट कलर वेरिएबल्स

वेब विकास के दायरे में, वेबपेज के दृश्य सौंदर्यशास्त्र को अनुकूलित करना अक्सर पूरा किया जाता है CSS वेरिएबल्स का उपयोग. सीएसएस के :root अनुभाग के भीतर परिभाषित ये चर, डेवलपर्स को डिज़ाइन के विभिन्न पहलुओं को नियंत्रित करने में सक्षम बनाते हैं। एक सामान्य परिदृश्य जावास्क्रिप्ट का उपयोग करके इन रंगों को गतिशील रूप से बदलने की क्षमता है।

इसे प्राप्त करने के लिए, कोड का मुख्य भाग है:

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

यह लाइन अनिवार्य रूप से :root सेक्शन में निर्दिष्ट CSS वेरिएबल को संशोधित करती है, इसके मान को वांछित रंग में अपडेट करती है। उदाहरण के लिए, यदि आप --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 वेरिएबल को सफलतापूर्वक संशोधित करता है और एक बटन क्लिक करने पर वेबपेज पर गतिशील रूप से रंग बदलता है।