[javascript] Universal Viewer를 활용한 다크 모드 및 테마 설정 기능

30 Nov 2023

javascript

이번 글에서는 Universal Viewer를 활용하여 웹 애플리케이션에 다크 모드 및 테마 설정 기능을 추가하는 방법을 알아보겠습니다.

Universal Viewer란?

Universal Viewer는 여러 종류의 미디어 파일(이미지, 동영상, 문서 등)을 웹 환경에서 볼 수 있도록 지원하는 뷰어입니다. 다양한 포맷의 파일을 처리하고, 확대/축소, 회전, 주석 작성 등 다양한 기능을 제공합니다.

다크 모드 기능 추가하기

Universal Viewer에 다크 모드 기능을 추가하려면 다음 단계를 따르면 됩니다.

HTML 파일에 Universal Viewer 스크립트를 로드합니다.
```
<script src="universalviewer.min.js"></script>
```

스타일시트에 다크 모드 스타일을 추가합니다.

/* 다크 모드 스타일 */
body.dark {
    background-color: #000;
    color: #fff;
}

다크 모드를 토글하는 버튼을 만들고 이벤트를 연결합니다.
```
<button onclick="toggleDarkMode()">다크 모드</button>
```

JavaScript 함수를 작성하여 다크 모드를 토글하는 로직을 구현합니다.

function toggleDarkMode() {
    var body = document.querySelector('body');
    body.classList.toggle('dark');
}

이제 웹 페이지에서 “다크 모드” 버튼을 클릭하면 페이지의 배경색과 글자색이 변경되는 것을 확인할 수 있습니다.

테마 설정 기능 추가하기

Universal Viewer에 테마 설정 기능을 추가하려면 다음 단계를 따르면 됩니다.

HTML 파일에 Universal Viewer 스크립트를 로드합니다. (이미 로드했다면 생략 가능)
```
<script src="universalviewer.min.js"></script>
```

CSS 파일에 각 테마를 위한 스타일을 추가합니다.

/* 테마1 스타일 */
.theme1 {
    /* 스타일 설정 */
}
   
/* 테마2 스타일 */
.theme2 {
    /* 스타일 설정 */
}

테마를 선택하는 드롭다운 메뉴를 만들고 이벤트를 연결합니다.

<select onchange="changeTheme(this.value)">
    <option value="theme1">테마 1</option>
    <option value="theme2">테마 2</option>
</select>

JavaScript 함수를 작성하여 선택된 테마에 해당하는 클래스를 추가하는 로직을 구현합니다.

function changeTheme(theme) {
    var viewer = document.querySelector('.uv');
    viewer.classList.remove('theme1', 'theme2');
    viewer.classList.add(theme);
}

이제 웹 페이지에서 테마를 선택하는 드롭다운 메뉴를 변경하면 Universal Viewer의 스타일이 선택한 테마에 맞게 변경되는 것을 확인할 수 있습니다.

마무리

이처럼 Universal Viewer를 활용하여 웹 애플리케이션에 다크 모드 및 테마 설정 기능을 쉽게 추가할 수 있습니다. 웹 페이지의 사용자 경험을 개선하고 시각적인 요소를 커스터마이징할 수 있습니다.

Universal Viewer 공식 문서에서 더 많은 정보와 사용 예제를 확인할 수 있으니 참고하시기 바랍니다.

Universal Viewer 공식 사이트: https://universalviewer.io/
Universal Viewer GitHub 저장소: https://github.com/UniversalViewer/universalviewer