자바스크립트 fetch API를 사용한 웹 사이트 테마 스위칭

10 Sep 2023

javascript

웹 사이트를 운영하다 보면 사용자가 원하는 테마를 선택할 수 있는 기능이 필요할 수 있습니다. 이를 위해 자바스크립트의 fetch API를 사용하여 웹 사이트 테마를 동적으로 변경하는 방법을 알아보겠습니다.

1. 테마 스타일시트 작성

먼저, 각 테마에 해당하는 스타일시트를 작성해야 합니다. 예를 들어, “light”와 “dark” 두 가지 테마를 가진다고 가정하겠습니다. 각 테마에 대한 스타일시트는 다음과 같이 작성할 수 있습니다.

/* light.css */
body {
    background-color: #ffffff;
    color: #000000;
}

/* dark.css */
body {
    background-color: #000000;
    color: #ffffff;
}

2. 테마 스위칭 버튼 생성

다음으로, 사용자가 테마를 변경할 수 있는 버튼을 웹 페이지에 생성해야 합니다. 이 버튼을 클릭하면 선택한 테마의 스타일시트를 불러오도록 구현할 것입니다.

<button id="theme-switcher">테마 변경</button>

3. fetch API를 이용한 테마 변경

이제 자바스크립트의 fetch API를 사용하여 테마를 변경하는 기능을 구현할 차례입니다. 스크립트 태그를 사용하여 웹 페이지에 다음과 같은 코드를 추가해주세요.

<script>
    const themeSwitcher = document.getElementById('theme-switcher');

    themeSwitcher.addEventListener('click', () => {
        // 현재 테마를 확인하고, 반대 테마의 스타일시트를 불러온다
        const currentTheme = document.documentElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
        const themeUrl = `/${newTheme}.css`;

        // fetch API를 사용하여 스타일시트를 불러온다
        fetch(themeUrl)
            .then(response => response.text())
            .then(css => {
                // 현재 페이지의 스타일시트를 제거하고, 새로 불러온 스타일시트를 추가한다
                const styleTag = document.createElement('style');
                styleTag.setAttribute('data-theme', newTheme);
                styleTag.innerHTML = css;

                const head = document.querySelector('head');
                const currentStyleTag = head.querySelector('[data-theme]');

                if (currentStyleTag) {
                    head.removeChild(currentStyleTag);
                }

                head.appendChild(styleTag);

                // 새로 설정된 테마를 저장한다
                document.documentElement.setAttribute('data-theme', newTheme);
            })
            .catch(error => {
                // 스타일시트를 불러오는 중에 에러가 발생하면 오류메시지를 표시한다
                console.error(error);
            });
    });
</script>

위의 코드에서는 클릭 이벤트 리스너를 추가하여 테마 변경 버튼이 클릭되면 발동하도록 설정합니다. 현재 페이지에서 현재 테마를 확인하고, 반대 테마의 스타일시트의 URL을 생성합니다. 그 후 fetch API를 사용하여 스타일시트를 가져옵니다. 스타일시트를 가져온 후에는 현재 페이지의 스타일시트를 제거하고, 새로 가져온 스타일시트를 추가합니다. 마지막으로, 변경된 테마를 저장하기 위해 data-theme 속성을 사용하여 HTML 요소에 테마 정보를 설정합니다.

테마 스위칭이 완료되었습니다!

이제 사용자는 “테마 변경” 버튼을 클릭하여 웹 사이트의 테마를 동적으로 변경할 수 있습니다. 자바스크립트의 fetch API를 활용하여 간단하게 테마 스위칭 기능을 구현할 수 있으니, 웹 개발에 활용해보세요!