아이폰 iOS 15 부터 사파리 브라우저 탭 막대에 테마 색상을 추가할 수 있다. 탭 막대 색상은 콘텐츠를 기반으로 자동 선택되지만 <meta> 태그를 이용해서 원하는 색상으로 변경할 수 있다. 참고로 content 속성 값엔 컬러코드 대신 CSS 변수를 사용할 수도 있다. e.g. content="var(--bg-black)"
<head>
<meta name="theme-color" content="#컬러코드" />
</head>
테마 색상 변경전
테마 색상 변경후
라이트/다크 모드에서 각각 다른 색을 보이고 싶으면 미디어 쿼리를 사용하면 된다. 아래 예시에서 라이트 모드일 때 탭 막대 색상은 #ffffff(하얀색), 다크 모드일 땐 #28231c 색으로 표시된다.
<head>
<meta name="theme-color" content="#ffffff"
media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#28231c"
media="(prefers-color-scheme: dark)">
</head>