theme-color를 이용하여 모바일 크롬 브라우저에서 toolbar 영역 색상 바꾸기
모바일 기기로 검색하다 보면 가끔 상단의 툴바 영역(주소표시줄이 포함된..)의 색상이 다른 사이트들이 있었습니다. 사이트별로 다 다른 색상을 사용하고 있어서 분명 HTML/CSS/JS 중 하나 일꺼라 생각했었는데, @yozora770 의 도움으로 알게되어 가볍게 블로그 글로 작성해봅니다.
사실 2014년 크롬 39버전부터 사용이 가능한 기능이였고.. 6년이 지난 지금에서야 처음 알게됬네요 😭
theme-color
2014.11 업데이트 내용을 보면 meta 태그에서 theme-color 속성이 추가되었다고 합니다. 이는 아래 이미지처럼 웹 브라우저의 최상단 toolbar 영역(주소표시줄)의 색상을 지정할 수 있는 기능이고, 현재까지도 크롬 기반 브라우저(크롬, 브레이브 등)에서만 동작합니다.
사용 방법은 간단합니다. theme-color name의 meta 태그를 선언하고 content에 원하는 색상만 넣어주면 됩니다.
<meta name="theme-color" content="#db5945">
References
https://twitter.com/yozora770/status/1220629808079441922 https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android