[개인] status bar 투명하게 만들 수 있는가: meta theme-color

발단

디자인팀에서 status bar을 투명하게 만들 수 있냐고 여쭤봤었는데

담당하던 팀원이 나가서 담당하게 되었다

---

Status Bar 색깔 도입하는 방법

보통은 meta태그의 theme-color로 처리한다. 

우리 스노로즈 역시 이 속성으로 white로 지정했다. 

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/theme_color

theme_color - Web app manifest | MDN

공식문서를 찾아보면 브라우저마다 opacity는 적용될수도 안될수도 있는데

웬만해서는 적용 안된다고 한다. 

---

실제 테스트

보면 버튼과 theme-color 모두 같은 opacity로 지정했지만

버튼만 거의 보이지 않고 theme-color는 뒤의 opacity는 무시하고 색만 받은게 보인다

---

결론

안되고 권장되지 않는다!

---

추가문제

iOS에서 status bar이 페이지마다 색깔이 다르다고 한다

나는 안드로이드라서 알길이 없지만 무슨 연유로 페이지마다 색이 다르다는 팀원들의 제보가 들어왔다.

• 아이폰(미성, 희원, 선진)
  • 하얀색: 시험후기, 알림, 게시판
  • 회색: 홈, 게시판 홈, 마이페이지
  • 파란색: 게시글 상세
• 갤럭시(민주)
  • 모든 페이지에서 하얀색

리액트는 SPA이기 때문에 theme-color를 지정하면 모든 페이지에 공통으로 설정됨
페이지 별 커스텀이 어려움
아이폰에서 다르게 보이는 이유는 OS 차이인 걸로 추정