Preferreds-color-scheme: 안녕 어둠, 내 오랜 친구

과장된 것일까요, 아니면 필수적인 것일까요? 어두운 모드에 관한 모든 것과 사용자를 위해 어두운 모드를 지원하는 방법을 알아보세요.

Thomas Steiner

소개

참고: 어두운 모드의 역사와 이론에 관해 많은 배경 조사를 했습니다. 어두운 모드 작업에만 관심이 있다면 소개는 건너뛰세요.

어두운 모드 전 어두운 모드

그린 스크린(소스)

어두운 모드가 다시 돌아왔습니다. 개인용 컴퓨터가 처음 등장했을 때 어두운 모드는 선택의 문제가 아니라 사실의 문제였습니다. 단색 CRT 컴퓨터 모니터는 인광 화면에 전자빔을 발사하여 작동했으며 초기 CRT에 사용된 인광은 녹색이었습니다. 텍스트는 녹색으로 표시되고 나머지 화면은 검은색이었기 때문에 이러한 모델은 그린 스크린이라고도 불렸습니다.

흰색 배경에 어두운 색상(소스)

이후에 도입된 컬러 CRT는 빨간색, 녹색, 파란색 형광체를 사용하여 여러 색상을 표시했습니다. 세 가지 형광체를 동시에 활성화하여 흰색을 만들었습니다. 보다 정교한 WYSIWYG 데스크톱 출판이 등장하면서 가상 문서를 실제 종이와 유사하게 만드는 아이디어가 인기를 끌었습니다.

WorldWideWeb 브라우저(출처)

여기에서 흰색 바탕에 검은색이라는 디자인 트렌드가 시작되었으며, 이 트렌드는 초기 문서 기반 웹으로 이어졌습니다. 최초의 브라우저인 WorldWideWeb(CSS가 아직 발명되지도 않았음)은 웹페이지를 이런 방식으로 표시했습니다. 재미있는 사실: 두 번째 브라우저인 Line Mode Browser(터미널 기반 브라우저)는 어두운 배경에 녹색이었습니다. 요즘 웹페이지와 웹 앱은 일반적으로 밝은 배경에 어두운 텍스트로 디자인됩니다. 이는 Chrome을 비롯한 사용자 에이전트 스타일시트에도 하드 코딩된 기본 가정입니다.

침대에서 휴대전화 사용

CRT의 시대는 오래전에 끝났습니다. 콘텐츠 소비 및 제작이 백라이트 LCD 또는 에너지 절약형 AMOLED 화면을 사용하는 휴대기기로 전환되었습니다. 더 작고 휴대성이 뛰어난 컴퓨터, 태블릿, 스마트폰이 등장하면서 새로운 사용 패턴이 생겨났습니다. 웹브라우저 사용, 재미를 위한 코딩, 고급 게임과 같은 여가 활동은 어두운 환경에서 업무 시간 이후에 자주 발생합니다. 밤에 침대에서 기기를 사용하는 사람도 많습니다. 어두운 곳에서 기기를 사용하는 사람이 많아질수록 어두운 배경에 밝은 텍스트라는 기본으로 돌아가자는 아이디어가 인기를 얻고 있습니다.

어두운 모드를 사용하는 이유

미적인 이유로 어두운 모드 사용

사람들에게 어두운 모드를 좋아하거나 원하는 이유를 물으면 가장 많이 나오는 대답은 '눈이 편안하기 때문'이고, 그다음은 '우아하고 아름답기 때문'입니다. Apple은 어두운 모드 개발자 문서에서 '밝은 모드 또는 어두운 모드를 사용 설정할지 여부는 대부분의 사용자에게 미적 선택이며 주변 조명 조건과 관련이 없을 수 있습니다'라고 명시적으로 설명합니다.

참고: 사용자가 어두운 모드를 원하는 이유와 사용 방법에 관한 사용자 연구를 자세히 알아보세요.

'White on Black' 모드가 적용된 Mac OS System 7의 CloseView(출처)

접근성 도구로서의 어두운 모드

또한 저시력 사용자와 같이 실제로 어두운 모드가 필요하고 이를 또 다른 접근성 도구로 사용하는 사람들도 있습니다. 제가 찾을 수 있는 가장 초기의 접근성 도구는 System 7의 CloseView 기능으로, Black on White와 White on Black을 전환할 수 있었습니다. System 7은 색상을 지원했지만 기본 사용자 인터페이스는 여전히 흑백이었습니다.

이러한 반전 기반 구현은 색상이 도입되면서 약점을 드러냈습니다. Szpiro 등의 저시력자가 컴퓨팅 기기에 액세스하는 방법에 관한 사용자 연구에 따르면 인터뷰에 참여한 모든 사용자가 반전된 이미지를 싫어했지만 많은 사용자가 어두운 배경에 밝은 텍스트를 선호했습니다. Apple은 스마트 반전이라는 기능을 통해 이러한 사용자 환경설정을 지원합니다. 이 기능은 이미지, 미디어, 어두운 색상 스타일을 사용하는 일부 앱을 제외하고 디스플레이의 색상을 반전합니다.

저시력의 특별한 형태는 컴퓨터 시각 증후군으로, 디지털 눈 피로라고도 하며, '컴퓨터(데스크톱, 노트북, 태블릿 포함) 및 기타 전자 디스플레이(예: 스마트폰, 전자책 리더기) 사용과 관련된 눈 및 시력 문제의 조합'으로 정의됩니다. 청소년이 특히 야간에 전자 기기를 사용하면 수면 시간이 짧아지고, 수면 잠복기가 길어지며, 수면 부족이 증가할 위험이 높아진다는 주장이 제기되었습니다. 또한 Rosenfield의 연구에 따르면 청색광에 노출되면 24시간 주기 리듬과 수면 주기의 조절에 관여하는 것으로 널리 보고되었으며, 불규칙한 조명 환경은 수면 부족을 유발하여 기분과 업무 수행에 영향을 미칠 수 있습니다. 이러한 부정적인 영향을 제한하려면 iOS의 Night Shift 또는 Android의 야간 조명과 같은 기능을 통해 디스플레이 색상 온도를 조정하여 블루 라이트를 줄이는 것이 도움이 될 수 있습니다. 또한 어두운 테마나 어두운 모드를 통해 밝은 조명이나 불규칙한 조명을 피하는 것도 도움이 될 수 있습니다.

AMOLED 화면의 어두운 모드 절전

마지막으로, 어두운 모드는 AMOLED 화면에서 많은 에너지를 절약하는 것으로 알려져 있습니다. YouTube와 같은 인기 Google 앱에 초점을 맞춘 Android 우수사례에서는 전력 절감 효과가 최대 60%에 달하는 것으로 나타났습니다. 아래 동영상에는 이러한 우수사례와 앱당 절전 효과에 관한 자세한 내용이 나와 있습니다.

운영체제에서 어두운 모드 활성화

어두운 모드가 많은 사용자에게 중요한 이유를 설명했으니 이제 이를 지원하는 방법을 살펴보겠습니다.

Android Q 어두운 모드 설정

어두운 모드 또는 어두운 테마를 지원하는 운영체제에는 일반적으로 설정 어딘가에 이를 활성화하는 옵션이 있습니다. macOS X에서는 시스템 환경설정의 일반 섹션에 있으며 모양(스크린샷)이라고 합니다. Windows 10에서는 색상 섹션에 있으며 색상 선택(스크린샷)이라고 합니다. Android Q의 경우 디스플레이에서 어두운 테마 전환 스위치(스크린샷)로 찾을 수 있으며, iOS 13의 경우 설정의 디스플레이 및 밝기 섹션에서 모양을 변경할 수 있습니다(스크린샷).

prefers-color-scheme 미디어 쿼리

마지막으로 이론을 하나 더 설명하겠습니다. 미디어 쿼리를 사용하면 작성자가 렌더링되는 문서와 관계없이 사용자 에이전트 또는 디스플레이 기기의 값이나 기능을 테스트하고 쿼리할 수 있습니다. 미디어 쿼리는 CSS @media 규칙에서 문서에 조건부로 스타일을 적용하는 데 사용되며 HTML 및 JavaScript와 같은 다양한 다른 컨텍스트와 언어에서 사용됩니다. 미디어 쿼리 수준 5에서는 이른바 사용자 환경설정 미디어 기능, 즉 사이트에서 사용자가 선호하는 콘텐츠 표시 방식을 감지하는 방법을 소개합니다.

참고: ☝️ 기존 사용자 환경설정 미디어 기능은 페이지에서 움직임을 줄이려는 요구를 감지할 수 있는 prefers-reduced-motion입니다. 이전에 prefers-reduced-motion에 관해 글을 쓴 적이 있습니다.

prefers-color-scheme 미디어 기능은 사용자가 밝은 색상 테마 또는 어두운 색상 테마를 사용하도록 페이지를 요청했는지 감지하는 데 사용됩니다. 다음 값과 함께 작동합니다.

• light: 사용자가 밝은 테마(밝은 배경에 어두운 텍스트)가 있는 페이지를 선호한다고 시스템에 알렸음을 나타냅니다.
• dark: 사용자가 어두운 테마(어두운 배경에 밝은 텍스트)가 있는 페이지를 선호한다고 시스템에 알렸음을 나타냅니다.

참고: 이전 버전의 사양에는 세 번째 값인 no-preference가 포함되어 있었습니다. 사용자가 시스템에 선호도를 알리지 않았음을 나타내기 위한 것이었습니다. 이를 구현한 브라우저가 없었기 때문에 이 값은 사양에서 삭제되었습니다.

어두운 모드 지원

브라우저에서 어두운 모드를 지원하는지 확인하기

어두운 모드는 미디어 쿼리를 통해 보고되므로 미디어 쿼리 prefers-color-scheme가 일치하는지 확인하여 현재 브라우저가 어두운 모드를 지원하는지 쉽게 확인할 수 있습니다. 값을 포함하지 않고 미디어 쿼리만 일치하는지 확인합니다.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

이 문서를 작성하는 시점에 prefers-color-scheme는 Chrome 및 Edge 버전 76, Firefox 버전 67, macOS의 Safari 버전 12.1, iOS의 Safari 버전 13부터 데스크톱과 모바일(사용 가능한 경우)에서 모두 지원됩니다. 다른 모든 브라우저의 경우 지원 표를 사용할 수 있나요? 문서를 확인하세요.

참고: 이전 브라우저에 어두운 모드 지원을 추가하는 맞춤 요소 <dark-mode-toggle>를 사용할 수 있습니다. 이에 대해서는 이 도움말의 뒷부분에서 설명합니다.

요청 시 사용자의 환경설정 학습

Sec-CH-Prefers-Color-Scheme 클라이언트 힌트 헤더를 사용하면 사이트에서 요청 시 사용자의 색 구성표 환경설정을 선택적으로 가져올 수 있으므로 서버가 올바른 CSS를 인라인으로 처리하여 잘못된 색상 테마가 표시되지 않도록 할 수 있습니다.

어두운 모드 사용

마지막으로 어두운 모드를 지원하는 실제 모습을 살펴보겠습니다. 하이랜더와 마찬가지로 어두운 모드에서는 하나만 있을 수 있습니다. 어둡거나 밝은 모드 중 하나만 가능하며 둘 다 사용할 수는 없습니다. 이 이야기를 하는 이유는 무엇일까요? 이 사실이 로드 전략에 영향을 미치기 때문입니다. 사용자가 현재 사용하지 않는 모드의 중요 렌더링 경로에서 CSS를 다운로드하도록 강제하지 마세요. 따라서 로드 속도를 최적화하기 위해 실제로 다음 권장사항을 보여주는 예시 앱의 CSS를 세 부분으로 분할하여 중요하지 않은 CSS를 지연시켰습니다.

• style.css: 사이트에서 보편적으로 사용되는 일반 규칙이 포함되어 있습니다.
• 어두운 모드에 필요한 규칙만 포함하는 dark.css
• 밝은 모드에 필요한 규칙만 포함하는 light.css

로딩 전략

후자의 두 가지인 light.css 및 dark.css는 <link media> 쿼리를 사용하여 조건부로 로드됩니다. 처음에는 모든 브라우저가 prefers-color-scheme를 지원하지는 않습니다(위의 패턴을 사용하여 감지 가능). 이 문제는 아주 작은 인라인 스크립트에서 조건부로 삽입된 <link rel="stylesheet"> 요소를 통해 기본 light.css 파일을 로드하여 동적으로 처리합니다(라이트는 임의의 선택이며 다크를 기본 대체 환경으로 만들 수도 있음). 스타일이 지정되지 않은 콘텐츠가 깜박이는 현상을 방지하기 위해 light.css가 로드될 때까지 페이지 콘텐츠를 숨깁니다.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

스타일시트 아키텍처

CSS 변수를 최대한 활용하면 일반 style.css를 일반으로 유지할 수 있으며, 모든 밝은 모드 또는 어두운 모드 맞춤설정은 다른 두 파일 dark.css 및 light.css에서 이루어집니다. 아래에서 실제 스타일의 발췌문을 확인할 수 있지만 전체적인 아이디어를 전달하기에 충분합니다. -⁠-⁠color 및 -⁠-⁠background-color이라는 두 변수를 선언하여 기본적으로 밝은 배경에 어두운 요소 및 어두운 배경에 밝은 요소 기준 테마를 만듭니다.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

그런 다음 style.css에서 body { … } 규칙에 이러한 변수를 사용합니다. :root CSS 의사 클래스(HTML에서 <html> 요소를 나타내고 선택자 html와 동일하지만 특수성이 더 높은 선택자)에 정의되어 있으므로 계단식으로 내려가 전역 CSS 변수를 선언하는 데 사용됩니다.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

위의 코드 샘플에서 공백으로 구분된 값 light dark가 있는 color-scheme 속성을 발견했을 것입니다.

이렇게 하면 브라우저에 앱이 지원하는 색상 테마를 알리고 사용자 에이전트 스타일시트의 특수 변형을 활성화할 수 있습니다. 예를 들어 브라우저가 어두운 배경과 밝은 텍스트로 양식 필드를 렌더링하거나, 스크롤바를 조정하거나, 테마 인식 강조 색상을 사용 설정하는 데 유용합니다. color-scheme의 정확한 세부정보는 CSS 색상 조정 모듈 수준 1에 지정되어 있습니다.

참고: 🌒 color-scheme의 실제 기능에 대해 자세히 알아보세요.

나머지는 사이트에서 중요한 요소에 대한 CSS 변수를 정의하는 것뿐입니다. 스타일을 의미론적으로 구성하면 어두운 모드를 사용할 때 큰 도움이 됩니다. 예를 들어 -⁠-⁠highlight-yellow 대신 변수를 -⁠-⁠accent-color로 호출하는 것이 좋습니다. 'yellow'가 어두운 모드에서는 실제로 노란색이 아닐 수 있고 그 반대의 경우도 마찬가지이기 때문입니다. 다음은 이 예시에서 사용하는 몇 가지 변수입니다.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

전체 예

다음 삽입된 데모에서 위의 개념을 실제로 적용하는 전체 예시를 확인할 수 있습니다. 특정 운영체제의 설정에서 어두운 모드를 전환하고 페이지가 어떻게 반응하는지 확인합니다.

영향 로드 중

이 예시를 사용해 보면 미디어 쿼리를 통해 dark.css 및 light.css를 로드하는 이유를 알 수 있습니다. 어두운 모드를 전환하고 페이지를 새로고침해 보세요. 현재 일치하지 않는 특정 스타일시트는 여전히 로드되지만 우선순위가 가장 낮으므로 사이트에 실시간으로 필요한 리소스와 경쟁하지 않습니다.

참고: 😲 브라우저가 일치하지 않는 미디어 쿼리가 있는 스타일시트를 다운로드하는 이유에 대해 자세히 알아보세요.

밝은 모드의 사이트가 가장 낮은 우선순위로 어두운 모드 CSS를 로드합니다.

어두운 모드의 사이트가 가장 낮은 우선순위로 밝은 모드 CSS를 로드합니다.

prefers-color-scheme를 지원하지 않는 브라우저에서 기본 밝은 모드의 사이트는 가장 낮은 우선순위로 어두운 모드 CSS를 로드합니다.

어두운 모드 변경에 반응

다른 미디어 쿼리 변경사항과 마찬가지로 JavaScript를 통해 어두운 모드 변경사항을 구독할 수 있습니다. 이를 사용하여 페이지의 파비콘을 동적으로 변경하거나 Chrome에서 URL 표시줄의 색상을 결정하는 <meta name="theme-color">를 변경할 수 있습니다. 위의 전체 예는 이 작업을 보여줍니다. 테마 색상과 파비콘 변경사항을 보려면 별도의 탭에서 데모를 엽니다.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

Chromium 93 및 Safari 15부터 meta 테마 색상 요소의 media 속성을 사용하여 미디어 쿼리를 기반으로 색상을 조정할 수 있습니다. 일치하는 첫 번째 항목이 선택됩니다. 예를 들어 밝은 모드에 하나의 색상을 사용하고 어두운 모드에 다른 색상을 사용할 수 있습니다. 이 문서의 작성 시점을 기준으로 매니페스트에서 이러한 항목을 정의할 수 없습니다. w3c/manifest#975 GitHub 문제를 참고하세요.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

어두운 모드 디버깅 및 테스트

DevTools에서 prefers-color-scheme 에뮬레이션

전체 운영체제의 색 구성표를 전환하는 것은 매우 번거로울 수 있으므로 이제 Chrome DevTools를 사용하면 현재 표시되는 탭에만 영향을 미치는 방식으로 사용자가 선호하는 색 구성표를 에뮬레이션할 수 있습니다. 명령어 메뉴를 열고 Rendering를 입력하기 시작한 다음 Show Rendering 명령어를 실행하고 CSS 미디어 기능 prefers-color-scheme 에뮬레이션 옵션을 변경합니다.

Puppeteer로 prefers-color-scheme 스크린샷 찍기

Puppeteer는 DevTools 프로토콜을 통해 Chrome 또는 Chromium을 제어하는 고급 API를 제공하는 Node.js 라이브러리입니다. dark-mode-screenshot를 사용하면 어두운 모드와 밝은 모드 모두에서 페이지의 스크린샷을 만들 수 있는 Puppeteer 스크립트가 제공됩니다. 이 스크립트는 일회성으로 실행하거나 지속적 통합(CI) 테스트 모음의 일부로 만들 수 있습니다.

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

어두운 모드 권장사항

순백색 피하기

눈치채셨을 수도 있는 작은 디테일은 제가 순백색을 사용하지 않는다는 것입니다. 대신 주변의 어두운 콘텐츠에 대비하여 빛나거나 번지는 것을 방지하기 위해 약간 더 어두운 흰색을 선택합니다. rgb(250, 250, 250)와 같은 형식이 적합합니다.

사진 이미지의 색상 변경 및 어둡게 처리

아래의 두 스크린샷을 비교해 보면 핵심 테마가 밝은 배경에 어두운 요소에서 어두운 배경에 밝은 요소로 변경되었을 뿐만 아니라 히어로 이미지도 약간 다르게 보입니다. 사용자 연구에 따르면 설문조사에 참여한 대부분의 사용자는 어두운 모드가 활성화되어 있을 때 약간 덜 선명하고 밝은 이미지를 선호합니다. 이를 재채색이라고 합니다.

어두운 모드에서 히어로 이미지가 약간 어두워짐

밝은 모드의 일반 히어로 이미지

이미지에 CSS 필터를 적용하여 색상을 변경할 수 있습니다. URL에 .svg가 없는 모든 이미지와 일치하는 CSS 선택자를 사용합니다. 벡터 그래픽(아이콘)에 이미지(사진)와 다른 색상 변경 처리를 적용할 수 있다는 아이디어입니다. 이에 관한 자세한 내용은 다음 단락을 참고하세요. CSS 변수를 다시 사용하여 나중에 필터를 유연하게 변경할 수 있습니다.

참고: 🎨 어두운 모드에서 색상 변경 환경설정에 관한 사용자 연구를 자세히 알아보세요.

다시 색칠하기는 어두운 모드(즉, dark.css가 활성 상태인 경우)에서만 필요하므로 light.css에는 상응하는 규칙이 없습니다.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

JavaScript를 사용하여 어두운 모드 재색상화 강도 맞춤설정

사람마다 어두운 모드에 대한 요구사항이 다릅니다. 위에서 설명한 재색상화 방법을 사용하면 그레이 스케일 강도를 JavaScript를 통해 변경할 수 있는 사용자 환경설정으로 쉽게 만들 수 있으며, 0% 값을 설정하여 재색상화를 완전히 사용 중지할 수도 있습니다. document.documentElement는 문서의 루트 요소에 대한 참조를 제공합니다. 즉, :root CSS 의사 클래스로 참조할 수 있는 동일한 요소입니다.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

벡터 그래픽 및 아이콘 반전

벡터 그래픽의 경우(제 경우에는 <img> 요소를 통해 참조하는 아이콘으로 사용됨) 다른 색상 변경 방법을 사용합니다. 연구에 따르면 사람들은 사진 반전을 좋아하지 않지만 대부분의 아이콘에는 반전이 매우 효과적입니다. 여기서도 CSS 변수를 사용하여 일반 상태와 :hover 상태의 반전 정도를 결정합니다.

어두운 모드에서는 아이콘이 반전됩니다.

밝은 모드의 일반 아이콘

다시 한번 dark.css에서만 아이콘을 반전하고 light.css에서는 반전하지 않는 방법과 사용자가 선택한 모드에 따라 아이콘이 약간 더 어둡거나 약간 더 밝게 표시되도록 두 경우에 :hover가 다른 반전 강도를 얻는 방법을 확인하세요.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

인라인 SVG에 currentColor 사용

인라인 SVG 이미지의 경우 반전 필터를 사용하는 대신 요소의 color 속성 값을 나타내는 currentColor CSS 키워드를 활용할 수 있습니다. 이렇게 하면 기본적으로 color 값을 수신하지 않는 속성에서 이 값을 사용할 수 있습니다. 편리하게도 currentColor가 SVG fill 또는 stroke 속성의 값으로 사용되는 경우 색상 속성의 상속된 값에서 값을 가져옵니다. 더 좋은 점은 <svg><use href="…"></svg>에도 적용되므로 별도의 리소스를 사용할 수 있으며 currentColor는 컨텍스트에 계속 적용된다는 것입니다. 이는 인라인 또는 <use href="…"> SVG에만 적용되며 이미지의 src로 참조되거나 CSS를 통해 참조되는 SVG에는 적용되지 않습니다. 아래 데모에서 이 기능이 적용된 모습을 확인할 수 있습니다.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

모드 간 원활한 전환

color와 background-color는 모두 애니메이션 적용이 가능한 CSS 속성이므로 어두운 모드에서 밝은 모드로 또는 그 반대로 전환하는 것이 원활할 수 있습니다. 애니메이션을 만드는 것은 두 속성에 대해 두 개의 transition를 선언하는 것만큼 쉽습니다. 아래 예는 전체적인 개념을 보여주며 데모에서 실시간으로 경험할 수 있습니다.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

어두운 모드의 아트 디렉션

일반적으로 로드 성능을 위해 스타일시트의 인라인이 아닌 <link> 요소의 media 속성에서 prefers-color-scheme만 사용하는 것이 좋지만, 실제로 HTML 코드에서 직접 인라인으로 prefers-color-scheme를 사용해야 하는 경우도 있습니다. 아트 디렉션이 바로 그런 상황입니다. 웹에서 아트 디렉션은 페이지의 전반적인 시각적 모양과 시각적으로 소통하고, 분위기를 자극하고, 기능을 대조하고, 타겟층에 심리적으로 호소하는 방법을 다룹니다.

어두운 모드에서는 특정 모드에서 가장 적합한 이미지가 무엇인지, 이미지 재색칠이 충분히 좋지 않은지를 디자이너가 판단합니다. <picture> 요소와 함께 사용하면 표시할 이미지의 <source>가 media 속성에 따라 달라질 수 있습니다. 아래 예에서는 어두운 모드의 경우 서반구를 표시하고, 밝은 모드의 경우 동반구를 표시합니다. 환경설정이 지정되지 않은 경우 다른 모든 경우에 기본적으로 동반구를 표시합니다. 물론 이는 설명을 위한 예시일 뿐입니다. 기기에서 어두운 모드를 전환하여 차이를 확인합니다.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

어두운 모드, 선택 해제 추가

위의 어두운 모드를 사용하는 이유 섹션에서 언급했듯이 어두운 모드는 대부분의 사용자에게 미적 선택입니다. 따라서 일부 사용자는 실제로 운영체제 UI를 어둡게 표시하고 싶어 하지만 웹페이지는 익숙한 방식으로 표시하는 것을 선호할 수 있습니다. 좋은 패턴은 처음에는 브라우저가 prefers-color-scheme를 통해 전송하는 신호를 따르지만, 이후에는 사용자가 시스템 수준 설정을 재정의하도록 선택적으로 허용하는 것입니다.

<dark-mode-toggle> 맞춤 요소

물론 이 코드를 직접 만들 수도 있지만, 이 용도로 만든 기성 맞춤 요소 (웹 구성요소)를 사용할 수도 있습니다. 이 확장 프로그램의 이름은 <dark-mode-toggle>이며, 페이지에 전환 버튼(어두운 모드: 사용/사용 중지) 또는 테마 전환기(테마: 밝게/어둡게)를 추가하여 완전히 맞춤설정할 수 있습니다. 아래 데모는 이 요소의 작동 모습을 보여줍니다(🤫 위의 다른 예시에도 모두 몰래 추가해 두었습니다).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

밝은 모드의 <dark-mode-toggle>

어두운 모드의 <dark-mode-toggle>

다음 데모에서 오른쪽 상단의 어두운 모드 컨트롤을 클릭하거나 탭해 보세요. 세 번째 및 네 번째 컨트롤에서 체크박스를 선택하면 페이지를 새로고침해도 모드 선택이 기억되는 것을 확인할 수 있습니다. 이렇게 하면 방문자가 운영체제를 어두운 모드로 유지하면서 사이트를 밝은 모드로 즐기거나 그 반대로 할 수 있습니다.

결론

어두운 모드를 사용하고 지원하는 것은 재미있고 새로운 디자인 방법을 열어줍니다. 일부 방문자에게는 사이트를 이용할 수 없는 것과 만족스러운 사용자가 되는 것의 차이가 될 수 있습니다. 몇 가지 함정이 있고 신중한 테스트가 필요하지만, 어두운 모드는 모든 사용자를 배려하고 있음을 보여줄 수 있는 좋은 기회입니다. 이 게시물에서 언급된 권장사항과 <dark-mode-toggle> 맞춤 요소와 같은 도우미를 사용하면 멋진 어두운 모드 환경을 만들 수 있습니다. 이 게시물이 유용했는지, 개선할 점은 무엇인지 트위터로 알려주세요. 읽어 주셔서 감사합니다. 🌒

관련 링크

prefers-color-scheme 미디어 쿼리 리소스:

• Chrome 플랫폼 상태 페이지
• Chromium 버그
• 미디어 쿼리 수준 5 사양

color-scheme 메타 태그 및 CSS 속성 리소스:

• color-scheme CSS 속성 및 메타 태그
• Chrome 플랫폼 상태 페이지
• Chromium 버그
• CSS 색상 조정 모듈 수준 1 사양
• 메타 태그 및 CSS 속성에 관한 CSS WG GitHub 문제
• 메타 태그에 관한 HTML WHATWG GitHub 문제

일반 어두운 모드 링크:

• Material Design - 어두운 테마
• 웹 검사기의 어두운 모드
• WebKit의 어두운 모드 지원
• Apple Human Interface Guidelines—Dark Mode

이 게시물의 배경 조사 자료:

• 어두운 모드의 'supported-color-schemes'는 실제로 어떤 역할을 하나요? 🤔
• 어두운 테마를 사용해 보세요 🌚 글쎄요…
• 어두운 모드용 색상 변경

감사의 말씀

prefers-color-scheme 미디어 기능, color-scheme CSS 속성, 관련 메타 태그는 👏 Rune Lillesveen의 구현 작업입니다. 룬은 CSS 색상 조정 모듈 수준 1 사양의 공동 편집자이기도 합니다. 이 도움말을 철저히 검토해 주신 Lukasz Zbylut, Rowan Merewood, Chirag Desai, Rob Dodson에게 🙏 감사의 말씀을 전합니다. 로딩 전략은 제이크 아치볼드가 고안한 것입니다. 에밀리오 코보스 알바레즈가 올바른 prefers-color-scheme 감지 방법을 알려주었습니다. 참조된 SVG 및 currentColor에 관한 도움말은 Timothy Hatcher가 제공했습니다. 마지막으로 이 도움말의 권장사항을 작성하는 데 도움을 준 다양한 사용자 연구의 익명 참여자들에게 감사의 말씀을 전합니다.