Rails 애플리케이션에 다크 모드를 구현하기 위한 단계는 다음과 같습니다.
1. Tailwind 다크 모드 설정
tailwind.config.js에서 darkMode: ['class', '[data-theme="dark"]'] 설정을 통해 dark 클래스 또는 data-theme 속성에 따라 다크 스타일이 적용되도록 구성합니다.
2. Stimulus 컨트롤러 구현
theme_switcher_controller.js를 생성하여 다음 기능을 담당합니다.
* 초기 방문 시 사용자 시스템 테마 선호도 감지.
* localStorage를 활용한 테마 선택 영구 저장.
* 수동 테마 토글 시 DOM 즉시 업데이트.
* initialize, togglerTargetConnected, toggle, #setTheme 메서드를 통해 테마 상태를 관리하고 html 요소에 data-theme 속성 및 dark 클래스를 토글합니다.
3. 테마 깜빡임(FOUC) 방지
_theme_check.html.erb에 인라인 스크립트를 추가하여 JavaScript 로드 전 잘못된 테마가 잠시 보이는 현상을 방지합니다. 이 스크립트는 Stimulus 컨트롤러의 테마 감지 로직을 복제하여 문서 헤드에서 동기적으로 실행됩니다.
4. 레이아웃 통합 및 스타일 적용
application.html.erb에 _theme_check 스크립트를 포함하고, html 태그에 data-controller="theme-switcher"를 연결합니다. Tailwind의 dark: 접두사를 사용하여 dark:bg-gray-800와 같이 테마별 스타일을 쉽게 적용합니다. 테마 토글 버튼은 data-action="click->theme-switcher#toggle"로 연결합니다.
5. 견고성 및 사용자 경험 개선
- 부드러운 전환: CSS에
transition속성을 추가하여 테마 전환 시 배경 및 텍스트 색상에 부드러운 애니메이션을 적용합니다.preload클래스로 페이지 로딩 중 애니메이션을 비활성화합니다. - Turbo 내비게이션: Turbo 이벤트(
turbo:visit,turbo:load)를 활용하여 페이지 이동 시preload클래스를 적절히 관리하여 전환 애니메이션이 잘못 트리거되는 것을 방지합니다.