맥 사파리 CSS 레벨 다크 모드 지원, 설정 방법

macOS 모하비 10.14.4 공식 버전 내용에 포함된 ‘사파리 CSS 레벨 다크 모드 지원’ 내용에 관한 내용입니다. 사파리가 다크 모드를 지원하더라도, 해당 웹사이트에 prefers-color-scheme 쿼리 유무에 따라 다크 모드가 적용되지 않을 수 있습니다. 아래 목록 참고하시어 내용 확인하시기 바랍니다.


다크 모드 변경 방법

웹페이지의 스타일을 다크 모드로 적용하기 위해서 다른 다크 모드 적용 방법을 사용해야하는 것은 아닙니다. 기존에 사용하던 방식 그대로 일반(General) 설정에 가셔서 외모(Appearance) 항목을 변경해주시면 됩니다.

 

1) 설정의 일반(General) 탭에 접근하셔서, 외모(Appearance) 항목을 ‘Dark’로 변경합니다. ▼

  • System Preferences > General ▼

 

2) 사파리 브라우저를 실행하시고, 메뉴바의 ‘Develop > Experimental Features’에서 ‘Dark Mode CSS Support’가 체크되어 있는지 확인합니다. 이 부분이 체크되어 있지 않으면 CSS 레벨 다크 모드가 적용되지 않습니다.

  • Develop > Experimental Features > Dark Mode CSS Support ▼

 

3) 특정 웹사이트에 접속해봅니다. 

‘prefers-color-scheme’ CSS가 적용된 웹사이트에서는 아래 이미지와 같이 다크 모드에 따라 텍스트 색과 배경색이 반전됩니다. 반대로, 적용되지 않은 웹사이트는 어떠한 스타일도 변경되지 않죠(이 부분은 다음 문단에서 조금 더 자세하게 다루어 놓았습니다).

  • 테마가 변경되는 사파리 웹사이트 | GIF▼

다크 모드 관련 참고글 ▼


prefers-color-scheme

사파리 브라우저에서 접속한 웹사이트의 테마가 다크 모드(사용자의 테마에 맞추어)로 변경되려면 해당 웹사이트에서 CSS prefers-color-scheme 쿼리를 가지고 있어야 합니다. 이 조건에 충족하지 않은 웹사이트는 사파리 업데이트에 무관하게 CSS 레벨의 다크 모드를 이용하실 수 없습니다.

* 즉, CSS 레벨 다크 모드 기능을 사용할 수 있느냐 없느냐는 웹사이트 개발자 또는 운영자의 몫입니다.

 

구현 방법

컬러 스킴이 ‘light’로 변경되었을 때, 배경색과 글씨색을 반전하는 코드입니다.

HTML ▼

<div class="themed">Theme</div>

CSS ▼

.themed {
   display: block;
   width: 10em;
   height: 10em;
   background: black;
   color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
     background: white;
     color: black;
  }
}

실행 예시 ▼

prefers-color-scheme 브라우저 호환 ▼

현재 파이어폭스사파리만이 이 기능을 지원하고 있습니다. 아래 이미지의 내용은 시간 경과에 따라 내용이 변경될 수 있으므로, 최신 내용은 링크를 통해 확인 바랍니다.


이상입니다.

댓글 남기기