
[CSS] tailwind로 라이트모드, 다크모드, 시스템 테마 3방향 구현하기
·
FrontEnd/기능구현
그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(React + TailwindCSS 기준으로 짜드릴게요.) "라이트모드, 다크모드 같은 토글뿐만 아니라 시스템 설정을 따라가게 할 수도 있는 거 알고 계신가요?" 전체 흐름은localStorage에 사용자가 선택한 테마가 있는지 확인 → 있으면 그걸 적용없으면 시스템 설정을 따라감 (matchMedia)사용자가 토글하면 localStorage 업데이트 "CSS 선택자를 사용해서 다크 테마를 적용합니다." "중요한 점은, 태그에 있는 dark 클래스를 동적으로 변경한다는 것입니다. (하위 소스코드 참고)" 그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(NextJs+ Tailwi..