jmcheon / matcha

work in progress
0 stars 1 forks source link

chore: dark mode for navbar #15

Closed jmcheon closed 1 month ago

jmcheon commented 2 months ago

navbar에 다크모드를 적용했습니다

bug: 버튼 클릭시 나오는 드랍다운 li에는 dark 클래스가 적용되는데 ul에는 다크모드가 적용이 되지 않아 일단은 라이트모드랑 동일하게 설정해놨습니다. 확인해 보시고 고칠 수 있으면 바꿔주세요

close #13

sungyongcho commented 2 months ago
image

코드 돌려 봤는데 로그인 이후에 설정(톱니바퀴) 버튼에도 색 적용이 들어가야 될거 같습니다.

그리고 하단 버튼들도 색깔 조정이 안되있네요

그리고 말씀하신 ul 부분은 우너래 정무님이 한번 찾아 보기로 하신 내용으로 기억 하고 있는데, 조금 찾아봤는데 vuetify랑 tailwindcss에서 둘다 class를 통해서 css를 적용 하는데서 충돌이 생길수도 있다고 하네요

이부분은 정무님이 한번 맡아서 찾아 봐주시는것도 좋을것 같습니다. 보통은 vuetify랑 tailwind를 같이 섞어 쓰지 않는다는 이야기도 있고 https://stackoverflow.com/questions/70686519/how-to-toggle-to-dark-mode-in-vue-js-and-tailwind-css

이런식으로 :class="isDark? 를 사용하여 다크모드용 색을 따로 적용 하기도 하고, tailwind 객체에 prefix 를 매겨서 충돌이 없도록 하는 방법도 있다고 합니다.

아니면 primevue 로 옮겨 가는것도 방법이 될수 있겠네요

한번 찾아보시고 테스트 해보고 결정해서 알려주세요

jmcheon commented 2 months ago

image

추가 수정완료했습니다