자동 어두운 테마

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

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

요소별 맞춤설정

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