자동 어두운 테마

André Cipriani Bandarra

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개로 된 메뉴를 탭하고 설정과 테마를 차례로 선택한 후 가능하면 사이트에 어두운 테마 적용 체크박스를 선택합니다.

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

요소별 맞춤설정

자동 어두운 테마가 모든 경우에 좋은 결과를 생성하도록 하는 것이 목표이지만, 개발자와의 초기 대화에서 개발자는 원하는 모양과 느낌에 더 잘 적응하기 위해 특정 요소를 조정하고 싶다고 제안했습니다.

이 오리진 트라이얼에서는 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 요소에서 color-scheme을 설정하여 전체 페이지에서 자동 어두운 테마를 선택 해제할 수 있습니다.

:root {
  color-scheme: only light;
}

의견 보내기

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

YouTube에 의견을 보낼 수 있는 다양한 채널이 있습니다.

펠릭스 베솜베스님이 촬영한 사진입니다.