반응형
다크테마
-
[Next.js] Dark Mode 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 12. 19:49
전 회사 사람들과 진행하는 사이드 프로젝트에서, 테마(theme.ts)를 세팅하다가 다크모드 적용여부를 논의하였다. (일반적으론, 색상 등으로 설정된 변수명에 값을 넣어주겠지만, 다크모드를 고려하면 방법이 조금 달라진다!) 적용하기로 결정이 되었으며, 이전 프로젝트에서 느꼈듯이 다크테마를 적용하기 위해선 스타일링이 조금 더 복잡해진다. 배경, 텍스트 등에 색상을 그대로 넣는게 아니라, 변수값에 이 색상들을 저장하고 이 변수들을 기반으로 마크업을 적용해야 한다. 다크테마 색상을 어떻게 설정하는지, 각종 설정들과 연계하여 다크테마를 제공하는 것, Next.js SSR에서의 적용 등 다크모드를 적용하면서 내가 고민했던 이슈들과 그 해결법들을 정리해보고 공유해보고자 한다! 🎨 Dark Mode 준비 다크모드는 ..