브라우저의 주소 표시줄을 프로그레시브 웹 앱 (PWA)의 브랜드 색상과 일치하도록 테마를 설정하면 더 몰입도 높은 사용자 환경을 제공할 수 있습니다.
브라우저 호환성
2022년 12월부터 Android 기반 브라우저, Chrome, Microsoft Edge에서 브라우저 주소 표시줄 테마 설정이 지원됩니다. 업데이트는 브라우저 호환성을 참고하세요.
Lighthouse 테마 색상 감사 실패 이유
Lighthouse는 주소 표시줄에 테마를 적용하지 않는 페이지를 신고합니다.
Lighthouse가 페이지의 HTML에서 theme-color 메타 태그를 찾지 못하고 웹 앱 매니페스트에서 theme_color 속성을 찾지 못하면 감사에 실패합니다.
Lighthouse는 값이 유효한 CSS 색상 값인지 테스트하지 않습니다.
주소 표시줄의 테마 색상을 설정하는 방법
1단계: 브랜딩할 모든 페이지에 theme-color 메타 태그 추가하기
theme-color 메타 태그를 사용하면 사용자가 일반 웹페이지로 사이트를 방문할 때 주소 표시줄에 브랜드가 표시됩니다.
태그의 content 속성을 유효한 CSS 색상 값으로 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Google의 Android용 Chrome 39에서 theme-color 지원에서 theme-color 메타 태그에 관해 자세히 알아보세요.
2단계: 웹 앱 매니페스트에 theme_color 속성 추가
웹 앱 매니페스트의 theme_color 속성은 사용자가 홈 화면에서 PWA를 실행할 때 주소 표시줄에 브랜딩이 표시되도록 합니다.
theme-color 메타 태그와 달리 매니페스트에서 한 번만 정의하면 됩니다.
속성을 유효한 CSS 색상 값으로 설정합니다.
{
"theme_color": "#317EFB"
…
}
```
The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.
## Resources
- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)