Skip to content

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

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

tifsy
Copy link
Collaborator

@tifsy tifsy commented Apr 5, 2025

✅ 요약

🪄 변경사항

기존에는 시간대에 따라 테마가 자동으로 설정되도록 구현했지만, 어제 피드백을 받고 사용자의 브라우저 설정을 반영하는 방식이 더 적절하다고 판단해 해당 방식으로 수정했습니다.

  • 최초 접속 시 브라우저의 prefers-color-scheme 설정을 반영하여 테마를 적용하도록 변경
  • 사용자가 테마 토글 버튼을 클릭하면 해당 테마가 우선 적용되며 sessionStorage에 저장됨
  • 이후 페이지를 새로고침하거나 다른 페이지로 이동해도 사용자가 선택한 테마가 유지됨
상황 적용되는 테마 우선순위
최초 접속 브라우저 설정
버튼 클릭 이후 사용자가 설정한 테마
새로고침 / 라우팅 이동 사용자가 설정한 테마 유지
브라우저 다크모드 변경 반영 X

🖼️ 결과 화면 (선택)

image image

💬 리뷰어에게 전할 말 (선택)

  • 화이팅 🎉🎉

@tifsy tifsy added the ✨ Feature 기능 개발 이슈 label Apr 5, 2025
@tifsy tifsy requested a review from wldnjs990 April 5, 2025 12:50
@tifsy tifsy self-assigned this Apr 5, 2025
@tifsy tifsy linked an issue Apr 5, 2025 that may be closed by this pull request
1 task
Copy link
Collaborator

@AAminha AAminha left a 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를 다루는 로직이 있던데, 그것도 여기서 전부 컨트롤 할 수 있도록 개선할 수 있지 않을까욥?!?!?!

Copy link
Collaborator

@wldnjs990 wldnjs990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

되게 많이 쓰일 기술 같아서 저도 블로그에 기록해두겠습니다!! 고생하셨습니다~!🦆🦆🦆🦆🦆🦆

Comment on lines 10 to 16
const getAutoTheme = (): 'light' | 'dark' => {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
};

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 기능이 있었군요 ㄷㄷㄷㄷ 또 배워갑니다!!🦆🦆🦆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feature 기능 개발 이슈
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: 사용자의 브라우저 설정에 따라 테마 자동 설정
3 participants