다크모드 설정시 유의 사항

웹사이트에서 다크모드 대응시 핵심 사항이다.

다크모드를 구현하는 다양한 코드가 유통되고 있지만, 안드로이드 디바이스의 웹뷰를 고려했을 때 잘 먹히지 않는 경우가 많다.

다음 사항을 고려하면 안드로이드 웹뷰를 포함한 거의 모든 디바이스에서의 다크모드 구현이 안정적으로 구현된다.

우선 title 밑에 다음 코드를 기입할 것.

<script> 
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches console.log(prefersDark); 
</script>

그 다음은 style이 시작 되는 부분에 다음 코드를 기입할 것.

/** For Dark mode 2021-10-01 */
:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

그런 다음 일반환경(화이트모드)에서 구현될 css 들을 작성한다.

화이트모드 css를 위한 모든 표현이 끝났으면 다크모드를 위한 표현을 다음과 같이 시작한다.

@media (prefers-color-scheme: dark) {
    /* 아래 root는 권장사항이지만 꺼도 된다 */ 
	/*:root {
		--wp-dark-mode-neutral-background: #1f2020;
		--wp-dark-mode-neutral-text: #d6d0c6;
		--wp-dark-mode-selection-background: #15539c;
		--wp-dark-mode-selection-text: #e5e0d8;
	}*/
	body {
        background: #242525;
        color: #bbb;
    }
	h1, h2,h3, p, a {
		color: rgb(255, 255, 255) !important;
		-webkit-text-fill-color: rgb(255, 255, 255) !important;
	} 

   /* 상기의 body, h1, h2...처럼 
     필요한 사항들을 아래 주욱 이어서 표현 
   */

}

상기 body, h1, h2…처럼 필요한 css들을 아래 이어서 표현한다. 그 외에도 원하는 클래스 등 다크모드에서 구현되기를 원하는 모든 css를 작성하면 작성된 그대로 다크모드에서 읽힌다.

그러니까 이전 구간에서는 화이트 모드의 css가 적용되고 @media (prefers-color-scheme: dark) { 안의 css는 다크모드시에 읽히는 것들이다.

가령 동일한 클래스 명을 상기의 두 영역에 구별지어 작성하면 두 개의 레이아웃이 화이트/다크모드 신호에 따라 구현되는 것.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다