안드로이드 크롬에서 우리 사이트만 열면 주소창·상태바 색이 흰색이나 검정으로 남아 브랜드와 동떨어져 보이는 경우가 많습니다.
theme-color 메타 태그로 브라우저 UI 색을 제안할 수 있고, 사파리 최신 버전은 메타보다 body 배경·고정 헤더 색을 참고하니 둘 다 맞춰 두는 편이 안전합니다.

1. theme-color 메타 태그 넣기

<head>에 아래처럼 넣습니다. content에는 헤더 배경과 같은 헥스 값을 쓰는 것이 보통입니다. 밝은 색이면 상태바 아이콘이 어둡게, 어두운 색이면 밝게 잡히는 경우가 많아 대비도 함께 확인하세요. 다크 모드를 쓰는 사이트라면 media로 라이트·다크를 나눕니다.

<!-- 기본: 브랜드 메인 컬러 -->
<meta name="theme-color"
      content="#cc2b2b">

<!-- 라이트/다크를 나눌 때 -->
<meta name="theme-color"
      content="#ffffff"
      media="(prefers-color-scheme: light)">
<meta name="theme-color"
      content="#1a1a1a"
      media="(prefers-color-scheme: dark)">

안드로이드 크롬·삼성 인터넷 등 크로미움 계열에서 효과가 잘 보입니다. PWA에 manifest.json의 theme_color가 있어도, 페이지 메타가 있으면 해당 문서에서는 메타가 우선하는 경우가 많습니다. 값만 통일해 두면 헷갈리지 않습니다.

2. 사파리는 body·고정 헤더 색도 맞추기

iOS·macOS 사파리 최신(26대)에서는 일반 탭에서 theme-color 메타만으로는 상단바 틴트가 거의 먹지 않는 경우가 있습니다. 대신 body 배경색, 또는 화면 상단에 붙는 position: fixed·sticky 헤더의 배경색을 참고합니다. 메타는 크로미움용으로 두고, 사파리용으로는 페이지 배경과 헤더 색을 같은 톤으로 맞추세요.

/* 사파리 틴트용: 페이지·헤더 색 통일 */
body {
  background-color: #ffffff;
}

.site-header {
  position: sticky;
  top: 0;
  background-color: #cc2b2b;
}

@media (prefers-color-scheme: dark) {
  body { background-color: #1a1a1a; }
}

3. 실무에서 자주 하는 실수

헤더는 빨강인데 메타만 흰색으로 두면 크롬바만 밝아져 더 어색합니다. 투명·반투명 헤더(backdrop-filter)는 사파리 샘플링에서 빠질 수 있어, 틴트가 필요하면 불투명 배경을 쓰는 편이 낫습니다. 적용 후 안드로이드 크롬과 아이폰 사파리에서 같은 URL을 열어 상단바·노치 주변을 눈으로 확인하면 됩니다.