자동 어두운 테마

앙드레 치프리아니 반다라

Chrome 96에는 Android의 자동 어두운 테마용 오리진 트라이얼이 도입되었습니다. 이 기능을 사용하면 사용자가 운영체제에서 어두운 테마를 선택한 경우 브라우저에서 자동으로 생성된 어두운 테마를 밝은 테마의 사이트에 적용합니다. 사용자는 OS 수준 또는 Chrome의 특정 설정에서 옵션을 사용 중지하여 어두운 테마를 선택 해제할 수 있습니다.

오리진 트라이얼 가입

오리진 트라이얼을 통해 사용자를 위해 어둡게 하기 알고리즘을 사용 설정할 수도 있습니다. 이를 통해 KPI와 관련하여 자동 어두운 테마의 성능을 테스트할 수 있습니다.

문서로 이동하여 오리진 트라이얼을 설정하는 방법을 알아보고 AutoDarkMode 오리진 트라이얼에 가입하여 토큰을 받으세요.

기기에서 자동 어두운 테마 테스트하기

DevTools 사용

DevTools에서 자동 어두운 테마를 사용 설정하려면 다음 단계를 따르세요.

  1. 점 3개로 된 메뉴를 클릭합니다.
  2. 도구 더보기와 렌더링을 차례로 선택합니다.
  3. 자동 어두운 모드 에뮬레이션 옵션에서 사용 설정을 선택합니다.

Android 휴대전화에서

Android 휴대전화에서 자동 어두운 테마를 테스트하려면 다음 단계를 따르세요.

  1. chrome://flags로 이동하여 #darken-websites-checkbox-in-theme-setting 실험을 사용 설정합니다.
  2. 그런 다음 점 3개로 된 메뉴를 탭하고 설정 > 테마를 선택한 후 가능한 경우 사이트에 어두운 테마 적용 체크박스를 선택합니다.

이제 휴대전화에서 라이트 페이지가 어두워집니다.

요소별 맞춤설정

Google은 자동 어두운 테마가 모든 경우에 좋은 결과를 생성하는 것을 목표로 하지만, 개발자와의 초기 대화를 통해 특정 요소를 조정하여 원하는 디자인과 분위기에 더 잘 적응하고 싶다고 제안했습니다.

이 오리진 트라이얼에서는 JavaScript를 사용하여 사용자가 자동 어두운 테마를 사용 중인지 감지한 후 원하는 요소를 맞춤설정하여 이러한 맞춤설정을 할 수 있습니다.

자동 어두운 테마 감지

사용자가 자동 어두운 테마에 있는지 감지하려면 background-color가 canvas로 설정되고 색 구성표가 밝게 설정된 요소를 만듭니다. 배경에 대해 계산된 색상이 흰색 (rgb(255, 255, 255))이 아니면 페이지에 자동 어두운 테마가 적용됩니다.

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

많은 수의 요소 맞춤설정

많은 수의 요소를 맞춤설정해야 하는 경우 위 솔루션은 확장하기 어려울 수 있습니다. 또 다른 방법은 어두운 테마 자동 감지를 사용하여 페이지 본문에 마커 클래스를 추가하는 것입니다.

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

그런 다음 필요에 따라 CSS를 사용하여 요소를 맞춤설정합니다.

.auto-dark-theme > #my-element {
  border-color: red;
}

요소별 맞춤설정 API는 아직 초기 개발 단계입니다. Google은 개발자에게 선택 해제를 위한 보다 표현력이 뛰어난 API를 제공하기 위해 일반팀과 협력하고 있습니다. 이 GitHub 문제에 대한 대화를 이어갈 수 있습니다.

자동 어두운 테마를 선택 해제하는 방법

어두운 테마는 기기에서 사용자의 선택을 존중하는 것 외에도 배터리 수명 개선 및 접근성과 같은 이점을 사용자에게 제공합니다. 사용자의 환경설정을 존중하고 이러한 이점을 유지하려면 자동 어두운 테마를 선택 해제하는 대신 자체적으로 선별된 어두운 테마를 구현하는 것이 좋습니다.

하지만 자체적으로 어두운 테마를 구현할 수 없고 자동 어두운 테마에서 생성된 결과가 만족스럽지 않은 경우 기능을 선택 해제할 수 있습니다.

메타 태그 사용

자동 어두운 테마를 선택 해제하는 첫 번째 방법은 페이지 헤더에 다음 메타 태그를 추가하는 것입니다. 메타 태그를 사용하면 자동 어두운 테마가 전혀 적용되지 않아 '어두운 콘텐츠 플래시'가 발생할 수 있다는 장점이 있습니다.

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

요소별 선택 해제

선택 해제하는 두 번째 대안은 color-scheme CSS 속성의 값을 only light로 설정하는 것입니다. 요소별 선택 해제를 사용하여 자동 어두운 모드에서 전체 페이지를 선택 해제할 수 있지만 이 접근 방식에서는 페이지의 특정 부분만 선택 해제할 수 있다는 장점이 있습니다.

#my-element {
  color-scheme: only light;
}

여전히 이 접근 방식을 사용하여 :root 요소에서 색 구성표를 설정하여 자동 어두운 테마에서 전체 페이지를 선택 해제할 수 있습니다.

:root {
  color-scheme: only light;
}

의견을 보내주세요!

자동 어두운 테마는 아직 지정되고 있으며, 어둡게 하기 알고리즘의 결과부터 요소 맞춤설정 및 선택 해제를 위한 개발자 API에 이르기까지 구현의 모든 영역에 관한 의견을 기다리고 있습니다.

다음과 같은 다양한 채널에서 의견을 보내실 수 있습니다.

사진: Félix Besombes