css variable
-
[ Project ] Next.js 13 다크모드 적용기Project 2023. 8. 30. 18:08
- 구현 방향 현재 프로젝트에 Styled-component를 사용하고 있다. 해당 스택 기준으로 다크 모드를 구현할 수 있는 방법은 두 가지로 추려지는데 첫 번째로는 Theme Provider 사용, 두 번째로는 Css variable 사용하는 방법이 있다. 그 중 벨로퍼님의 의견을 참고하여 Css variable 방법을 채택하여 구현했다. 벨로퍼님 다크모드 글 - 스타일 설정 디자이너 없이 진행하고 있는 프로젝트라서, dark mode, light mode 색상 선택이나 디자인 적인 부분을 생각하고 기획하는데 시간이 은근 쓰였다. 단순히 디자이너의 영역이라고 생각하면 스트레스였지만, 프론트엔드 개발자로서 나쁠 것 없는 역량이라 생각하며 . . 😊 객체에 각 모드별 스타일 색상을 정의하고 Css var..