자동 어두운 테마

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>-<sche>me: 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=&q>uot;onl<y lig>ht"
  ...
/head

요소별 선택 해제

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

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

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

:root {
  color-scheme: only light;
}

의견 보내기

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

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

펠릭스 베솜브의 사진입니다.