과장된 것인가요, 꼭 필요한 것인가요? 어두운 모드와 사용자를 위해 어두운 모드를 지원하는 방법에 관해 자세히 알아보세요.
소개
어두운 모드 이전의 어두운 모드
<ph type="x-smartling-placeholder">
이제 어두운 모드와 함께 완전한 원형이 되었습니다. 퍼스널 컴퓨팅의 초창기에는 어두운 모드를 선택할 수 없었지만 사실 전자 빔을 발사하여 작동하는 흑백 CRT 컴퓨터 모니터 초기 CRT에서 사용된 형광체는 녹색이었습니다. 텍스트는 녹색으로 표시되고 나머지 화면은 검은색이었기 때문에 이러한 모델은 종종 그린 스크린입니다.
<ph type="x-smartling-placeholder">
이후에 도입된 색상 CRT는 여러 색상을 표시함 빨간색, 녹색, 파란색 형광체를 사용합니다. 세 개의 형광체를 모두 동시에 활성화하여 흰색을 만들었습니다. 보다 정교한 WYSIWYG의 등장과 함께 데스크톱 출판 가상 문서를 실제 종이 한 장처럼 보이게 하는 아이디어가 널리 퍼졌습니다.
<ph type="x-smartling-placeholder">
여기서 디자인 트렌드로서 다크 온 화이트가 시작되었습니다. 이 트렌드가 전 세계 언론사로 문서 기반 웹을 기반으로 합니다. 최초의 브라우저인 WorldWideWeb (기억할 사항: CSS가 아직 발명되지도 않았습니다. 표시되는 방식을 지원합니다. 재미있는 사실: 최초의 브라우저인 터미널 기반 브라우저인 라인 모드 브라우저는 어두울 때는 녹색을 칠합니다. 요즘에는 웹페이지와 웹 앱이 대개 진한 텍스트로 디자인되어 있습니다. 사용자 에이전트 스타일시트에도 하드코딩된 기준 가정으로, Chrome
<ph type="x-smartling-placeholder">
CRT의 시대는 이미 지났습니다. 콘텐츠 소비와 제작이 휴대기기로 이동 백라이트 LCD를 사용하는 또는 에너지 절약 AMOLED 화면을 사용합니다. 더 작고 이동성이 뛰어난 컴퓨터, 태블릿, 스마트폰은 새로운 사용 패턴으로 이어졌습니다. 웹 탐색, 재미있는 코딩, 고급 게임과 같은 레저 작업 어두운 환경에서 근무 시간 외에 자주 발생합니다. 사람들은 밤에 침대에 누워 기기를 즐기기도 합니다. 어두운 곳에서 기기를 사용하는 사람이 많아질수록 라이트 온 다크(light-on-dark)의 뿌리로 돌아가는 아이디어가 더 많이 인기를 얻습니다.
어두운 모드를 사용해야 하는 이유
미적인 이유로 어두운 모드 사용
사람들이 질문을 받을 때 어두운 모드를 좋아하거나 원하는 이유 가장 인기 있는 응답은 "눈에 보다 편안하다"는 것입니다 이어서 'it's 매개변수가 우아하고 아름다워요'라고 덧붙입니다. 사과는 어두운 모드 개발자 문서 명시적으로 다음과 같이 작성합니다. "밝은 모양이나 어두운 모양 중 무엇을 사용할지 는 대부분의 사용자에게 심미적인 요소로, 주변 조명 조건과는 관련이 없을 수 있습니다."
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph>
접근성 도구로서의 어두운 모드
어두운 모드가 실제로 필요하고 이를 또 다른 접근성 도구로 사용하는 사람들도 있습니다. 저시력 사용자를 예로 들 수 있습니다 제가 찾을 수 있었던 이러한 접근성 도구는 제일 먼저 System 7의 CloseView 기능. 여기에는 흰색 바탕에 검은색 및 검은색 바탕에 흰색. 시스템 7은 색상을 지원했지만 기본 사용자 인터페이스는 여전히 흑백이었습니다.
이러한 반전 기반 구현은 색상이 도입된 후 약점을 보여주었습니다. 스피로외의 사용자 연구 시력이 좋지 않은 사람들이 컴퓨팅 기기에 액세스하는 방법 인터뷰에 응한 모든 사용자가 반전된 이미지를 싫어한다는 것을 보여주었습니다. 많은 사람들이 어두운 배경에 밝은 텍스트를 선호했습니다. Apple은라는 기능을 통해 이러한 사용자 선호도를 수용합니다. 스마트 반전, 디스플레이의 색상을 반전시킵니다. 단, 이미지, 미디어, 일부 앱에서는 어두운 색상 스타일을 사용하는 경우도 있습니다.
저시력의 특별한 형태는 디지털 눈의 피로로도 알려진 컴퓨터 시력 증후군으로, 정의됨 "컴퓨터 사용과 관련된 눈과 시력 문제의 조합으로 (데스크톱, 노트북, 태블릿 포함) 및 기타 전자 디스플레이 (예: 스마트폰 및 전자 판독 기기)." 제안됨 청소년의 전자 기기 사용, 특히 야간에 수면 시간이 짧아질 위험이 높아집니다. 수면 시작 지연 시간이 길어지고 수면 부족이 증가합니다. 또한 청색광에 노출되는 것은 신고됨 규제에 개입하여 24시간 주기 리듬 수면 주기 불규칙한 조명 환경은 수면 부족, 기분과 업무 성과에 영향을 미칠 수 있다고 로젠필드 연구 이러한 부정적인 영향을 제한하기 위해 디스플레이 색상 온도를 조정하여 블루라이트를 줄입니다. iOS'와 같은 기능을 통해 Night Shift 또는 Android 야간 조명이 도움이 될 수 있습니다. 어두운 테마나 어두운 모드를 통해 일반적으로 밝은 빛이나 불규칙한 빛을 피할 수 있습니다.
AMOLED 화면에서 어두운 모드 전력 절약
마지막으로, 어두운 모드는 무선 연결에서 많은 에너지를 절약하는 것으로 AMOLED 화면 인기 Google 앱에 초점을 맞춘 Android 우수사례 전력 절약은 최대 60%까지 가능하다는 것을 보여주었습니다. 아래 동영상에는 이러한 사례 연구와 앱별 전력 절약에 대한 자세한 내용이 나와 있습니다.
운영체제에서 어두운 모드 활성화
지금까지 많은 사용자에게 어두운 모드가 왜 중요한지 알아봤습니다. 이를 지원하는 방법을 살펴보겠습니다
<ph type="x-smartling-placeholder">
어두운 모드 또는 어두운 테마를 지원하는 운영체제 일반적으로 설정 어딘가에서 활성화할 수 있는 옵션이 있습니다. macOS X에서는 시스템 환경설정의 일반 섹션에 있고 모양 (스크린샷)이라고 되어 있습니다. Windows 10의 경우 Colors(색상) 섹션에 Choose your color(색상 선택)라고 되어 있습니다(스크린샷). Android Q의 경우 디스플레이에서 어두운 테마 전환 스위치로 찾을 수 있습니다 (스크린샷). iOS 13의 경우 디스플레이 및 밝기 섹션 (스크린샷)으로 이동합니다.
prefers-color-scheme 미디어 쿼리
시작하기 전에 이론을 마지막으로 한 가지만 말씀드리겠습니다.
미디어 쿼리
작성자가 사용자 에이전트 또는 디스플레이 기기의 값이나 기능을 테스트하고 쿼리하도록 허용
처리되기 때문입니다.
스타일은 CSS @media 규칙에서 문서에 스타일을 조건부로 적용하는 데 사용됩니다.
다양한 다른 컨텍스트와 언어로 사용할 수 있습니다.
미디어 쿼리 수준 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를 인라인할 수 있으므로 잘못된 색상 테마가 플래시되는 것을 피할 수 있습니다.
어두운 모드 사용 사례
드디어 어두운 모드 지원이 실제로 어떻게 표시되는지 살펴보겠습니다. Highlander와 마찬가지로, 어두운 모드와 함께 사용하면 어두운 모드나 밝은 테마가 하나만 있을 수 있습니다. 둘 다 있을 수는 없습니다. 이 언급하는 이유는 무엇인가요? 이는 로드 전략에 영향을 미치기 때문입니다. 사용자가 주요 렌더링 경로에서 CSS를 다운로드하도록 강제하면 안 됩니다. 현재 사용하지 않는 모드를 위한 것입니다 따라서 로드 속도를 최적화하기 위해 예시 앱의 CSS를 분할했습니다. Google Cloud에서 제공하는 권장사항을 중요하지 않은 CSS를 지연하려면 다음 세 부분으로 나눕니다.
- 사이트에서 일반적으로 사용되는 일반 규칙이 포함된
style.css입니다. - 어두운 모드에 필요한 규칙만 포함된
dark.css입니다. - 밝은 모드에 필요한 규칙만 포함된
light.css입니다.
로드 전략
후자의 두 함수인 light.css와 dark.css는
<link media> 쿼리를 사용하여 조건부로 로드됩니다.
처음에는
일부 브라우저는 prefers-color-scheme를 지원하지 않습니다.
(위 패턴을 사용하여 감지 가능)
기본 light.css 파일을 로드하여 동적으로 처리합니다.
소규모 인라인 스크립트에 조건부로 삽입된 <link rel="stylesheet"> 요소를 통해
(밝은 선택은 임의적이며, 어두움을 기본 대체 환경으로 만들 수도 있었습니다.)
스타일이 지정되지 않은 콘텐츠가 플래시되지 않도록 하려면 다음 안내를 따르세요.
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);
}
위의 코드 샘플에서는
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를 로드하는 이유
어두운 모드를 전환하고 페이지를 새로고침하세요.
현재 일치하지 않는 특정 스타일시트도 계속 로드되지만
그렇게 하면 현재 사이트에서 필요한 리소스와 경쟁하지 않습니다.
</ph>
</ph>
</ph>
prefers-color-scheme를 지원하지 않는 브라우저에서 기본 밝은 모드인 사이트는 가장 낮은 우선순위로 어두운 모드 CSS를 로드합니다.어두운 모드 변경사항에 대한 반응
다른 미디어 쿼리 변경사항과 마찬가지로 어두운 모드 변경사항도 자바스크립트를 통해 구독할 수 있습니다.
예를 들어, 이를 사용하여
파비콘
변경하거나
<meta name="theme-color">
- Chrome의 URL 표시줄 색상을 결정합니다.
위의 전체 예에서 이를 실제로 보여줍니다.
테마 색상과 파비콘 변경사항을 확인하려면
별도의 탭에서 데모를 참조하세요.
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 미디어 기능 선호도 에뮬레이션 옵션을 변경합니다.
Puppeteer를 사용한 prefers-color-scheme 스크린샷
Puppeteer는 Node.js 라이브러리입니다.
Chrome이나 Chromium을 제어하는 상위 수준 API를
DevTools 프로토콜.
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) 같은 예시가 좋습니다.
사진 이미지에 색상을 재지정하고 어둡게 조정
아래 두 스크린샷을 보면 핵심 테마뿐만 아니라 다크 온 라이트에서 라이트 온 다크까지 다양한 옵션을 제공하고 있지만, 히어로 이미지도 약간 다르게 보입니다. 내 사용자 연구 설문조사에 참여한 사용자 중 대부분이 약간 덜 선명하고 선명한 이미지를 선호합니다. 이를 색상 재지정이라고 합니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">이미지의 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 상태에 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">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 이미지의 경우 반전 필터를 사용하는 대신
currentColor
요소의 color 속성 값을 나타내는 CSS 키워드입니다.
이렇게 하면 color 값을 기본적으로 받지 않는 속성에서 이 값을 사용할 수 있습니다.
SVG 값으로 currentColor를 사용하면 편리합니다.
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를 두 개 선언하는 것만큼 간단합니다.
아래 예는 전반적인 아이디어의 예를 보여주며,
demo
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);
}
어두운 모드의 아트 디렉션
일반적으로 로드 성능을 위해 prefers-color-scheme만 사용하는 것이 좋습니다.
(스타일시트에서 인라인이 아님) <link> 요소의 media 속성에 삽입
실제로 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>
<ph type="x-smartling-placeholder"><dark-mode-toggle>
아래 데모의 오른쪽 상단에 있는 어두운 모드 컨트롤을 클릭하거나 탭해 보세요. 세 번째와 네 번째 컨트롤에서 체크박스를 선택한 경우 페이지를 새로고침해도 기억될 것입니다 이렇게 하면 방문자가 운영체제를 어두운 모드로 유지하면서 사이트를 밝은 모드로 즐길 수도 있고 그 반대로도 즐길 수 있습니다.
결론
어두운 모드를 사용하고 지원하는 것은 재미있고 새로운 디자인의 길을 열어줍니다.
일부 방문자의 경우 사이트 운영에 어려움을 겪는 것과는 다릅니다.
행복한 사용자가 되는 것입니다.
몇 가지 함정이 있고 신중하게 테스트해야 하지만
어두운 모드는 모든 사용자에 대한 관심을 보여줄 수 있는 좋은 기회입니다.
이 게시물에 나와 있는 권장사항과
<dark-mode-toggle> 맞춤 요소
멋진 어두운 모드 환경을 만들 수 있는 능력을 자신 있게 만들어 보세요.
작성한 게시물과 이 게시물이 유용했는지 Twitter를 통해 알려주시기 바랍니다.
개선을 위한 제안도
제공할 수 있습니다
읽어주셔서 감사합니다. 🌒
관련 링크
prefers-color-scheme 미디어 쿼리 리소스:
color-scheme 메타 태그 및 CSS 속성 리소스:
color-schemeCSS 속성 및 메타 태그- Chrome 플랫폼 상태 페이지
- Chromium 버그
- CSS 색상 조정 모듈 레벨 1 사양
- 메타 태그 및 CSS 속성과 관련된 CSS WG GitHub 문제
- 메타 태그 관련 HTML whatWG GitHub 문제
일반적인 어두운 모드 링크는 다음과 같습니다.
이 게시물에 대한 배경 조사 자료:
감사의 말씀
prefers-color-scheme 미디어 기능, color-scheme CSS 속성
및 관련 메타 태그는 👏 Rune Lillesveen의 구현 작업입니다.
Rune은 CSS 색상 조정 모듈 레벨 1 사양의 공동 편집자이기도 합니다.
🙏 루카스 즈빌루트님께 감사의 말씀을 전합니다.
로완 메레우드,
치라그 데사이님,
및 롭 도슨
에서 확인하세요.
로드 전략은 제이크 아치볼드의 아이디어입니다.
에밀리오 코보스 알바레즈님이 올바른 prefers-color-scheme 감지 방법을 알려주었습니다.
참조된 SVG 및 currentColor가 포함된 팁은
티모시 해처
끝으로, 다양한 사용자 연구에 익명의 많은 참여자분들께 감사드립니다.
이 도움말에서 추천사항을 정하는 데 도움이 되었습니다.
히어로 이미지: Nathan Anderson