주소 표시줄에 테마 색상을 설정하지 않음

브랜드 색상과 일치하도록 브라우저 주소 표시줄 테마 설정 의 프로그레시브 웹 앱 (PWA)에 더욱 몰입도 높은 사용자 환경을 제공합니다.

브라우저 호환성

2022년 12월부터 브라우저 주소 표시줄 테마 설정이 지원됩니다. Android 기반 브라우저, Chrome, Microsoft Edge 자세한 내용은 브라우저 호환성 확인하세요.

Lighthouse 테마 색상 감사가 실패하는 이유

등대 는 주소 표시줄에 테마를 적용하지 않는 페이지를 표시합니다.

주소 표시줄이 페이지 색상 테마가 아님을 보여주는 Lighthouse 감사

Lighthouse가 페이지의 파일에서 theme-color 메타 태그를 찾지 못하면 감사가 실패합니다. 웹 앱 매니페스트의 HTML 및 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에서 theme-color 메타 태그에 관해 자세히 알아보기 Android용 Chrome 39에서 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)