[Next.js] vanilla-extract로 다크모드(dark mode) 구현하기 (feat.next-themes)

• Next.js 14 버전의 app router 프로젝트에서 styled-components를 vanilla-extract로 마이그레이션하면서 next-themes를 활용해 다크모드 기능을 추가하는 과정을 설명합니다. next-themes는 Next.js 환경에서 단 두 줄의 코드로 다크 모드를 완벽하게 지원하며, 시스템 테마 설정, 로드 시 깜빡임 없음, 테마 동기화 등의 장점을 가지고 있습니다.

• vanilla-extract를 사용하여 라이트 모드와 다크 모드의 색상을 정의하는 방법을 소개하며, 이를 위해 `createThemeContract`와 `createTheme` 함수를 사용하여 테마를 생성하고 적용하는 방법에 대해 설명합니다.

• 전역 테마(global theme)를 생성하여 모든 테마 변수를 포함시키고, `createThemeContract`를 사용하여 테마 간에 공유될 속성들의 '틀'을 설정하였습니다. 이는 실제 CSS를 생성하지 않고, 정적 타이핑을 위한 계약(contract)을 만드는 것입니다.

• `createTheme` 함수를 사용하여 라이트 모드와 다크 모드의 테마를 각각 정의하였으며, 코드 스플리팅을 통해 필요할 때 각각의 테마를 불러올 수 있도록 하여 효율성을 높였습니다.