Skip to content
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

Dark theme에서 Status bar 색상 수정 #531

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

Conversation

kongwoojin
Copy link
Collaborator

@kongwoojin kongwoojin commented Jan 26, 2025

작업 내용

  • Dark theme이 활성화 된 경우, 하얀색 toolbar를 사용하는 화면(공지사항, 학생식당정보, 버스 시간표)의 status bar 색상이 잘못된 문제를 고쳤습니다.
  • Design system의 KoinTheme에 isLightStatusBar라는 변수를 추가했습니다. 해당 변수 값에 따라 status bar의 텍스트 색상이 변경됩니다.
  • 위의 변경사항에 따라, isLightStatusBar 선언이 필요한 Composable(시간표)에 값을 선언해줬습니다.
  • enableEdgeToEdgeWithLightStatusBar()와 enableEdgeToEdgeWithDarkStatusBar()를 추가했습니다.

사진

수정 전 수정 후
버스 시간표 Screenshot_20250127-070640_코인D Screenshot_20250127-070722_코인D
공지사항 Screenshot_20250127-070645_코인D Screenshot_20250127-070728_코인D

고민 사항

  • isLightStatusBar의 기본값을 기존 WindowExtensions과 동일하게 false로 선언했는데, 값 선언을 강제하도록 기본값을 제거하는게 좋을지 고민입니다.

@kongwoojin kongwoojin requested a review from a team as a code owner January 26, 2025 22:41
@github-actions github-actions bot added the fix label Jan 26, 2025
Copy link
Contributor

@yunjaena yunjaena left a comment

Choose a reason for hiding this comment

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

enableEdgeToEdge로 상태바 이이콘 색을 설정하게 해주세요

@kongwoojin
Copy link
Collaborator Author

enableEdgeToEdge로 상태바 이이콘 색을 설정하게 해주세요

기존 코드 revert하고 EdgeToEdgeExtensions를 새로 만들었습니다!

/**
* Enables the edge-to-edge display for this [ComponentActivity] with blue status bar.
*/
fun ComponentActivity.enableEdgeToEdgeWithBlueStatusBar() = enableEdgeToEdge(
Copy link
Contributor

Choose a reason for hiding this comment

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

statusbar 색이 api 29 부터 투명색으로 들어가기 때문에 네이밍을 한번 고려해보면 좋을것 같습니다.
그리고 그런케이스 인경우 statusbar 만큼 패딩을 주고 해당 패딩에 background color을 넣는거는 어떨까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

어.. 그러니깐 contentWindowInsets를 0으로 설정하고, 패딩값을 상단에 주는걸 말씀하시는거죠?

Copy link
Contributor

Choose a reason for hiding this comment

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

네 맞습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

일단 enableEdgeToEdgeWithBlueStatusBar()는 enableEdgeToEdgeWithDarkStatusBar()로 수정하고 배경을 Transparent 로 변경했습니다!
말씀하신 상단에 패딩을 주는 부분의 경우, 시도해봤는데 라이트모드/다크모드 변경 시 statusbar의 아이콘 색이 변경되지 않는것 같아서 다른 방법이 있을지 찾아보겠습니다!

Copy link
Contributor

@ThirFir ThirFir left a comment

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants