모바일 브라우저 테마 색상 변경하기

theme-color

태그의 name 속성에 대한 theme-color 값으로 유저 인터페이스를 감싸고 있는 페이지의 디스플레이를 커스터마이징 할 수 있다. content속성은 hex코드로 작성해주면 된다.

<meta name="theme-color" content="#4285f4">

해당 웹사이트를 탭에서 더 눈에 띄게 만들 수 있다.

---

다크모드와 라이트모드 미디어쿼리를 이용해서
theme-color를 적용할 수 있다.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">

---

PC - safari
Mobile - Chrome Android, Safari on iOS, Samsung Internet Browser

---

출처
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color