1. Tailwind CSS 다크 모드 설정
tailwind.config.js 파일에서 darkMode: ['class', '[data-theme="dark"]] 설정을 통해 부모 요소에 dark 클래스 또는 data-theme 속성이 존재할 때 다크 스타일을 적용하도록 구성합니다. 이는 다크 모드 활성화 시점을 완벽하게 제어할 수 있게 하여 유연성을 제공합니다.
2. Stimulus 컨트롤러 생성
theme_switcher_controller.js 파일을 생성하여 테마 전환 및 영구 저장을 담당합니다. 이 컨트롤러는 다음 세 가지 주요 기능을 수행합니다:
* 최초 방문 시 사용자의 시스템 환경 설정을 존중합니다.
* 향후 방문을 위해 로컬 스토리지에 사용자 선택을 기억합니다.
* 사용자가 수동으로 테마를 토글할 때 DOM을 즉시 업데이트합니다.
application.html.erb의 <html> 태그에 data-controller="theme-switcher"와 data-theme="dark"를 연결하여 컨트롤러를 활성화합니다.
3. 테마 깜빡임 방지
JavaScript 로드 전에 잘못된 테마 콘텐츠가 잠깐 보이는 현상(FOUC)을 방지하기 위해 _theme_check.html.erb에 작은 인라인 스크립트를 추가합니다. 이 스크립트는 Stimulus 컨트롤러의 테마 감지 로직을 복제하되, 문서 헤드에서 동기적으로 실행되어 느린 연결에서도 사용자가 잘못된 테마를 경험하지 않도록 보장합니다.
4. 모든 요소 연결
메인 레이아웃인 application.html.erb에 테마 방지 스크립트를 포함하고, <body> 태그에 초기 테마 클래스(bg-white dark:bg-gray-900 text-gray-900 dark:text-white)를 적용합니다. 또한, data-theme-switcher-target="toggler" 및 data-action="click->theme-switcher#toggle" 속성을 가진 토글 버튼을 추가하여 테마 전환 기능을 제공합니다.
5. 테마 인식 스타일 작성
모든 컴포넌트에 dark: 접두사를 사용하여 Tailwind의 다크 모드 유틸리티를 적용함으로써, 컴포넌트가 현재 테마에 따라 자동으로 스타일을 조정하도록 합니다. 이는 깔끔하고 유지보수 가능한 스타일링을 가능하게 합니다.
6. 견고성 향상
- 부드러운 전환 추가:
body요소에transition속성을 추가하여 테마 전환 시 배경색 및 텍스트 색상에 부드러운 애니메이션 효과를 부여합니다.preload클래스를 사용하여 페이지 로딩 중에는 애니메이션을 비활성화합니다. - Turbo 내비게이션 처리: Turbo 이벤트를 활용하여
preload클래스를 적절한 시점에 추가하거나 제거함으로써, Turbo 내비게이션 중 테마 전환 애니메이션이 잘못 트리거되는 것을 방지합니다.DOMContentLoaded,turbo:visit,turbo:load이벤트 리스너를 사용합니다.