iOS 15가 출시하면서 사파리에 많은 변화가 생겼는데, 그 중 하나가 "웹사이트 색조로 물들이기" 라는 기능이다. 이걸 활성화시키면 상단 노치 좌우부분이 웹사이트에서 설정한 백그라운드 컬러로 된다. 문제는 다크모드 시 티스토리 css에서 쉽게 바꿔지는 블로거들이 있는 반면, 나처럼 아무리 css를 수정해도 안되는 유저들이 있다.
해결해야지 하고 계속 미루다가 오늘 해결방법을 찾아서 사파리 웹사이트 색조로 물들이기 다크모드 문제해결 및 방법에 관한 포스팅을 작성하려고 한다.
설정 전후 사진
방법
- 스킨편집에서 html로 들어간다.
- <title> 위에 아래의 코드를 작성한다.
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)">
- 일반모드에서의 컬러 변경은 light의 #ffffff을 수정
- 다크모드에서의 컬러 변경은 dark의 #111111을 수정
컬러 같은 경우에는 구글에 html color라고 치면 자세히 알려주는 사이트가 많기 때문에 참고하면 될 것 같다. 내 경우에는 상단과 같은 색상으로 일치시키기 위해 어두운 색으로 지정했다. 사실 다른 밝은 색으로 지정하고 싶었는데 그냥 저게 제일 깔끔해보여서 그냥 상단 색상이랑 똑같이 해놨다.
아이폰과 맥북만 사용하다보니 안드로이드 환경에서는 어떻게 나올지 잘 모르겠지만, 아이폰과 맥북에서는 웹사이트 색조로 변경 설정이 잘 된 것을 확인할 수 있었다. 오늘은 여기까지만 수정하고 나중에 부족한 다크모드를 손봐야겠다.
댓글