Paul Kinlan
Chrome은 사이트에 사용되는 테마 색상의 개념을 2014년에 도입했습니다. 테마 색상은 주소 표시줄과 같은 UI 요소에 색조를 적용할 색상을 브라우저에 알려주는 웹페이지의 힌트입니다.
예를 들어 아래는 테마 색상이 적용된 사이트와 적용되지 않은 사이트입니다.
문제는 모든 페이지에 테마 색상을 정의해야 한다는 점입니다. 규모가 큰 사이트나 기존 사이트의 경우 사이트 전체에 걸쳐 많은 변경사항을 적용하는 것이 항상 가능하지는 않습니다.
Chrome 46 (2015년 9월 베타)부터 매니페스트에 theme_color 속성을 추가하면 사이트가 홈 화면에서 실행될 때 사용자가 도메인에서 방문하는 모든 페이지에 색상이 자동으로 적용됩니다.
페이지에 이미 theme-color 메타 태그(예: <meta name="theme-color" content="#2196F3">)가 있는 경우 매니페스트의 값 대신 페이지 수준 구성이 사용됩니다.
매니페스트에 theme_color 속성을 추가하고 HTML 색상을 지정하기만 하면 됩니다.
"theme_color": "#2196F3"
이 기능을 사용해 보려면 Airhorner — the world's best airhorn을 방문하여 홈 화면에 추가하세요. 사이트의 매니페스트를 확인해 보세요.
FAQ
- 홈 화면에서 사이트가 실행되지 않는 경우에도 이 내용이 적용되나요?
예. - 사용자가 탐색 중일 때와 같이 사이트 전체에 적용되나요?
지금은 그렇게 하려면 브라우저가 매니페스트를 훨씬 더 자주 다운로드해야 하며 현재는 우선순위가 낮은 애셋입니다. 이는 사용자가 사이트를 홈 화면에 추가할 때 파싱되도록 설계되었습니다.