Ternary 연산자를 활용하여 자바스크립트에서의 테마 설정

08 Nov 2023

javascript

먼저, HTML 파일에서 테마를 바꿀 요소들을 식별하기 위해 클래스를 추가합니다. 예를 들어, body 요소에 light-theme 클래스와 dark-theme 클래스를 각각 추가합니다.

<body class="theme">
  <!-- 웹 페이지의 내용 -->
</body>

이제 자바스크립트 파일에서 테마를 설정하는 함수를 작성합니다.

function setTheme(theme) {
  const body = document.body;
  body.className = theme === 'light' ? 'light-theme' : 'dark-theme';
}

위의 코드에서는 Ternary 연산자를 사용하여 theme 변수의 값에 따라 body 요소의 클래스를 변경합니다. theme 값이 'light'일 때는 light-theme 클래스를 할당하고, 그 외의 경우에는 dark-theme 클래스를 할당합니다.

마지막으로, 테마를 변경하기 위해 이벤트 핸들러나 사용자 입력에 따라 setTheme() 함수를 호출하면 됩니다. 예를 들어, 버튼을 클릭했을 때 테마를 변경하고 싶다면 다음과 같이 코드를 작성합니다.

// 테마 변경 버튼 요소를 선택합니다.
const themeButton = document.getElementById('themeButton');

// 클릭 이벤트에 대한 핸들러를 등록합니다.
themeButton.addEventListener('click', function() {
  // 현재 테마를 확인하고 반대로 변경합니다.
  const currentTheme = document.body.className.includes('light-theme') ? 'dark' : 'light';
  setTheme(currentTheme);
});

위의 코드에서는 themeButton 요소를 선택하고 클릭 이벤트에 대한 핸들러를 등록합니다. 핸들러 내에서는 현재 테마를 확인하고 반대로 변경하도록 구현되어 있습니다.

이와 같이 Ternary 연산자를 활용하여 자바스크립트에서 테마 설정을 구현할 수 있습니다. 이 방법을 사용하면 사용자가 원하는 시점에 웹 페이지의 테마를 동적으로 변경할 수 있습니다.