[React] 모바일 웹 status bar 색상 변경하기

항상 크롬 inspect 모바일 뷰만 보고 개발을 해서 몰랐었는데, 배포 후 디자이너 분께서 상태바 색상을 테마에 맞게 흰색으로 변경해주실 것을 요청해주셨다.

찾아보니 크롬과 사파리 설정을 따로 해주어야한다는 글이 많았는데, 직접해보니 theme-color 메타 태그만으로도 safari 상태바 색상이 적용이 되었다. 그래서 MDN에서 찾아보니 safari도 15버전 이후로는 적용이 된다고 쓰여있었다. 웬만하면 15v 이상이지 않을까 싶으면서도.. 2021년 적용이면 비교적 최근이라는 생각이 들어서 그냥 아래 코드까지 모두 작성해주었다!

<head>
    //chrome
    <meta name="theme-color" content="#색상" />
    
    //safari
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="#색상"
    />
</head>

**CRA로 만든 리액트 프로젝트의 경우, public폴더에 index.html에 theme-color meta tag는 기본적으로 포함되어있는데, 색상만 원하는 색상으로 변경해주면 되겠습니다.

저작자표시

'FE > react' 카테고리의 다른 글

[React] 모바일 웹 스크롤 시 주소창, 하단바 없애기 (3)	2023.05.06
[React] 리액트 carousel 라이브러리 없이 직접 구현하기 (0)	2023.05.06
[React] axios interceptor header 토큰 갱신 (0)	2023.04.28
[React] github action 리액트 .env file 추가하기 (0)	2023.04.25
[React] react프로젝트 github action으로 CI/CD 구축하기(aws S3, cloudfront) (0)	2023.04.24