JavaScript에서 CSS :root 색상 변수 변경

웹 개발 영역에서 웹페이지의 시각적 미학을 사용자 정의하는 작업은 종종 다음을 통해 수행됩니다. CSS 변수의 사용. CSS의 :root 섹션 내에 정의된 이러한 변수를 통해 개발자는 디자인의 다양한 측면을 제어할 수 있습니다. 일반적인 시나리오 중 하나는 JavaScript를 사용하여 이러한 색상을 동적으로 변경하는 기능입니다.

이를 달성하기 위한 핵심 코드 부분은 다음과 같습니다.

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 변수를 성공적으로 수정하고 버튼을 클릭할 때 웹페이지의 색상을 동적으로 변경합니다.