Skip to content

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