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

과장인가요, 필수인가요? 어두운 모드에 관한 모든 정보와 어두운 모드를 사용자에게 도움이 되도록 지원하는 방법을 알아보세요.

Thomas Steiner

소개

어두운 모드 전에 어두운 모드 사용

그린 스크린 컴퓨터 모니터
그린 스크린 (출처)

이제 어두운 모드를 완전히 구현했습니다. 개인 컴퓨팅의 초창기에는 어두운 모드를 선택할 수 있는 문제가 아니었지만, 사실은 흑백 CRT 컴퓨터 모니터는 인광 화면에서 전자 빔을 발사하는 방식으로 작동했고 초기 CRT에 사용된 형광체는 녹색이었습니다. 텍스트는 녹색으로 표시되고 화면의 나머지 부분은 검은색으로 표시되었기 때문에 이러한 모델을 그린 화면이라고 부르기도 했습니다.

어두운 바탕에 흰색 워드 프로세싱
다크온 화이트 (출처)

이후에 도입된 색상 CRT는 빨간색, 녹색, 파란색 형광체를 사용하여 여러 색상을 표시했습니다. 3가지 형광체를 동시에 활성화하여 흰색을 만들었습니다. 더욱 정교한 WYSIWYG 데스크톱 퍼블리싱이 출현하면서 가상 문서를 종이 종이처럼 보이게 하려는 아이디어가 대중화되었습니다.

WorldWideWeb 브라우저의 어두운 흰색 웹페이지
WorldWideWeb 브라우저 (소스)

여기에서 디자인 트렌드인 다크 온 화이트가 시작되었으며 이 트렌드는 초기 문서 기반 웹으로 옮겨졌습니다. 최초의 브라우저인 WorldWideWeb(CSS는 아직 발명되지도 않음)에서 이 방식으로 웹페이지를 표시했습니다. 재미있는 사실: 두 번째 브라우저인 선 모드 브라우저(터미널 기반 브라우저)는 어두울 때 초록색으로 표시되어 있었습니다. 오늘날 웹페이지와 웹 앱은 일반적으로 밝은 배경에 어두운 텍스트로 디자인되며, 이는 Chrome을 비롯한 사용자 에이전트 스타일시트에도 하드 코딩된 기준 가정입니다.

침대에 누워 사용하는 스마트폰
침대에서 사용하는 스마트폰 (출처: Unsplash)

CRT의 시대는 이미 지났습니다. 백라이트 LCD 또는 에너지 절약형 AMOLED 화면을 사용하는 휴대기기로 콘텐츠 소비와 제작이 옮겨가고 있습니다. 작고 이동성이 향상된 컴퓨터, 태블릿, 스마트폰은 새로운 사용 패턴으로 이어졌습니다. 웹 탐색, 재미를 위한 코딩, 고급 게임과 같은 여가 활동은 야간에도 어두워진 환경에서 자주 발생합니다. 사람들은 밤이 되면 침대에서 기기를 즐기기도 합니다. 어두운 곳에서 기기를 사용하는 사람이 많아질수록 Light-on-dark의 근본적인 생각으로 돌아가 볼 수 있습니다.

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

미적인 목적으로 어두운 모드 사용

어두운 모드를 왜 좋아하는지를 묻는 질문이 있을 때 가장 인기 있는 답변은 '눈이 더 편안하다', '우아하고 아름다워'라는 응답입니다. Apple은 어두운 모드 개발자 문서에 다음과 같이 명시합니다. "밝은 모양과 어두운 모양을 사용할지를 선택하는 것은 대부분의 사용자에게 미적인 옵션이며 주변 조명 조건과는 관련이 없을 수 있습니다."

Mac OS 시스템 7의 CloseView
시스템 7 CloseView (소스)

어두운 모드를 접근성 도구로 활용하기

실제로 어두운 모드가 필요하여 저시력자 등 또 다른 접근성 도구로 사용하는 사람들도 있습니다. 이러한 접근성 도구를 가장 먼저 찾을 수 있었던 것은 시스템 7의 CloseView 기능으로, 여기에는 흰색 바탕에 검은색 및 검은색 바탕에 흰색 전환 버튼이 있었습니다. 시스템 7에서 색상을 지원했지만 기본 사용자 인터페이스는 여전히 흑백이었습니다.

이러한 역전 기반 구현은 색상이 도입되었을 때 약점을 보였습니다. 스즈피로(Szpiro) 외 다수가 시력이 약한 액세스 컴퓨팅 기기를 사용하는 사람들의 사용자 연구에 따르면 인터뷰에 응한 모든 사용자는 반전된 이미지를 좋아하지 않지만, 많은 사용자가 어두운 배경에서 밝은 텍스트를 선호했습니다. Apple은 이미지, 미디어, 어두운 색상 스타일을 사용하는 일부 앱을 제외하고 디스플레이의 색상을 반전시키는 스마트 반전이라는 기능을 사용하여 이러한 사용자 환경설정을 지원합니다.

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

AMOLED 화면의 어두운 모드 전력 절약

마지막으로 어두운 모드는 AMOLED 화면에서 에너지를 상당히 절약하는 것으로 알려져 있습니다. YouTube와 같은 인기 있는 Google 앱에 초점을 맞춘 Android 우수사례에 따르면 최대 60%의 전력 절약이 가능합니다. 아래 동영상에서 이러한 우수사례와 앱별 전력 절약에 대해 자세히 설명합니다.

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

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

Android Q 어두운 모드 설정
Android Q 어두운 테마 설정

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

prefers-color-scheme 미디어 쿼리

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

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

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

어두운 모드 지원

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

어두운 모드는 미디어 쿼리를 통해 보고되므로 미디어 쿼리 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, Safari에서 지원되었습니다(macOS의 경우 버전 12.1, iOS 버전 13 기준). 다른 모든 브라우저의 경우 지원 표를 사용할 수 있나요를 확인하세요.

요청 시 사용자의 선호도 학습

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에서 할 수 있습니다. 아래에서 실제 스타일의 발췌 부분을 볼 수 있지만 전체 아이디어를 전달하는 데 충분합니다. 기본적으로 dark-on-light와 light-on-dark 기준 테마를 만드는 두 개의 변수 -⁠-⁠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);
}

위의 코드 샘플에서 color-scheme 속성은 공백으로 구분된 값 light dark를 볼 수 있습니다.

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

나머지 작업은 내 사이트에서 중요한 항목에 대한 CSS 변수를 정의하기만 하면 됩니다. 스타일을 의미 있게 구성하면 어두운 모드로 작업할 때 많은 도움이 됩니다. 예를 들어 -⁠-⁠highlight-yellow 대신 -⁠-⁠accent-color 변수를 호출하는 것이 좋습니다. '노란색'이 어두운 모드에서 실제로는 노란색이 아니거나 그 반대일 수도 있기 때문입니다. 아래는 이 예에서 사용하는 추가 변수의 예입니다.

/* 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);
}

전체 예

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

영향 로드 중

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

밝은 모드에서 어두운 모드 CSS가 가장 낮은 우선순위로 로드되는 방식을 보여주는 네트워크 로드 다이어그램
밝은 모드의 사이트는 우선순위가 가장 낮은 어두운 모드 CSS를 로드합니다.
어두운 모드에서 밝은 모드 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 미디어 기능 Preferreds-color-scheme 에뮬레이션 옵션을 변경합니다.

Chrome DevTools의 &#39;렌더링&#39; 탭에 있는 &#39;CSS 미디어 기능 에뮬레이트&#39; 옵션(refers-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) 등의 URL을 사용하면 됩니다.

사진 이미지의 색상 재지정 및 어둡게 하기

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

어두운 모드에서 히어로 이미지가 약간 어두워졌습니다.
어두운 모드에서 히어로 이미지가 약간 어두워졌습니다.
밝은 모드의 일반 히어로 이미지입니다.
밝은 모드의 일반 히어로 이미지입니다.

이미지의 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가 아이콘을 약간 더 어둡거나 약간 밝게 표시하기 위해 두 사례에서 :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 미디어 쿼리의 리소스입니다.

color-scheme 메타 태그 및 CSS 속성 관련 리소스입니다.

일반 어두운 모드 링크:

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

감사의 말

prefers-color-scheme 미디어 기능, color-scheme CSS 속성, 관련 메타 태그는 👏 Rune Lillesveen의 구현 작업입니다. Rune은 CSS Color Adjustment Module Level 1 사양의 공동 편집자이기도 합니다. 이 도움말을 꼼꼼하게 검토해 주신 Lukasz Zbylut, Rowan Merewood, Chirag Desai, Rob Dodson님께 감사드립니다. 로딩 전략은 제이크 아치볼드의 아이디어입니다. 에밀리오 코보스 알바레즈가 올바른 prefers-color-scheme 감지 방법을 알려주었습니다. 참조된 SVG 및 currentColor가 포함된 팁은 Timothy Hatcher에서 얻은 것입니다. 마지막으로, 이 도움말에서 권장사항을 정하는 데 도움을 준 다양한 사용자 연구에 익명 처리된 많은 참여자분께 감사의 말씀을 전합니다. Nathan Anderson의 히어로 이미지입니다.