-
Notifications
You must be signed in to change notification settings - Fork 2
feat: 사용자의 브라우저 설정에 따라 테마 자동 설정 #177
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제가 코드를 간만에 보는거라 맥락을 제대로 파악하지 못했을 수 있지만.. 그래도 의견을 하나 추가해봅니다!!
App.tsx에서 document.documentElement.classList를 다루는 로직이 있던데, 그것도 여기서 전부 컨트롤 할 수 있도록 개선할 수 있지 않을까욥?!?!?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
되게 많이 쓰일 기술 같아서 저도 블로그에 기록해두겠습니다!! 고생하셨습니다~!🦆🦆🦆🦆🦆🦆
src/stores/themeStore.ts
Outdated
const getAutoTheme = (): 'light' | 'dark' => { | ||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
return 'dark'; | ||
} | ||
return 'light'; | ||
}; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이런 기능이 있었군요 ㄷㄷㄷㄷ 또 배워갑니다!!🦆🦆🦆
✅ 요약
🪄 변경사항
기존에는 시간대에 따라 테마가 자동으로 설정되도록 구현했지만, 어제 피드백을 받고 사용자의 브라우저 설정을 반영하는 방식이 더 적절하다고 판단해 해당 방식으로 수정했습니다.
prefers-color-scheme
설정을 반영하여 테마를 적용하도록 변경🖼️ 결과 화면 (선택)
💬 리뷰어에게 전할 말 (선택)