아이폰 iOS 15 부터 사파리 브라우저 탭 막대에 테마 색상을 추가할 수 있다. 탭 막대 색상은 콘텐츠를 기반으로 자동 선택되지만 <meta> 태그를 이용해서 원하는 색상으로 변경할 수 있다. 참고로 content 속성 값엔 컬러코드 대신 CSS 변수를 사용할 수도 있다. e.g. content="var(--bg-black)"

<head>
  <meta name="theme-color" content="#컬러코드" />
</head>

테마 색상 변경 전 ▼

테마 색상 변경 후 ▼

Light/Dark 모드 컬러

라이트/다크 모드에서 각각 다른 색을 보이고 싶으면 미디어 쿼리를 사용하면 된다. 아래 예시에서 라이트 모드일 때 탭 막대 색상은 #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>

레퍼런스

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

저작자표시 비영리 변경금지

'🪄 Programming' 카테고리의 다른 글

[React] 리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터 (0)	2024.05.03
[HTML/CSS] 아이폰 사파리 100vh 이슈 해결 (0)	2024.05.03
[HTML/CSS] 유용한 HTML 태그 모음 (0)	2024.05.03
[React] 리액트 useRef 활용 케이스 모음 (0)	2024.05.03
[HTML/CSS] CSS 인접하는 엘리먼트들의 border 겹침 문제 해결 (0)	2024.05.03

[HTML/CSS] 아이폰 사파리 테마 컬러 변경 방법

Light/Dark 모드 컬러

레퍼런스

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

Light/Dark 모드 컬러

레퍼런스

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

[React] 리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터

[HTML/CSS] 아이폰 사파리 100vh 이슈 해결

[HTML/CSS] 유용한 HTML 태그 모음

[React] 리액트 useRef 활용 케이스 모음

티스토리툴바