테마 설정

브랜딩도 반응이 가능합니다. 사용자의 환경설정에 맞게 웹사이트의 표시 방식을 조정할 수 있습니다. 하지만 먼저, 브라우저 자체를 포함하도록 웹사이트 브랜딩을 확장하는 방법은 다음과 같습니다.

일부 브라우저에서는 웹사이트의 팔레트에 따라 테마 색상을 제안할 수 있습니다. 브라우저의 인터페이스가 추천 색상에 맞게 조정됩니다. 페이지의 head에 있는 theme-color라는 meta 요소에 색상을 추가합니다.

<meta name="theme-color" content="#00D494">
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">Clearleft.com</ph> Resilient Web Design 닷컴. Session.org
세 개의 웹사이트가 Safari 브라우저에 표시되어 있습니다. 각 테마에는 브라우저 인터페이스로 확장되는 고유한 테마 색상이 있습니다.

JavaScript를 사용하여 theme-color의 값을 업데이트할 수 있습니다. 하지만 이 힘을 현명하게 사용하세요. 브라우저의 색 구성표가 너무 자주 변경되면 사용자가 부담스러울 수 있습니다. 테마 색상을 섬세하게 조정하는 방법을 생각해 보세요. 변경사항이 너무 거슬리면 사용자가 짜증을 낼 수 있습니다.

웹 앱 매니페스트 파일에서 테마 색상을 지정할 수도 있습니다. 웹사이트에 대한 메타데이터가 포함된 JSON 파일입니다.

문서의 head에서 매니페스트 파일에 연결합니다. rel 값이 manifestlink 요소를 사용합니다.

<link rel="manifest" href="/manifest.json">

매니페스트 파일에서 키-값 쌍을 사용하여 메타데이터를 나열합니다.

{
 
"short_name": "Clearleft",
 
"name": "Clearleft design agency",
 
"start_url": "/",
 
"background_color": "#00D494",
 
"theme_color": "#00D494",
 
"display": "standalone"
}

방문자가 홈 화면에 웹사이트를 추가하기로 결정하면 브라우저는 매니페스트 파일의 정보를 사용하여 적절한 바로가기를 표시합니다.

어두운 모드 제공

많은 운영 체제에서 사용자가 밝은 색상 또는 어두운 색상 팔레트에 대한 환경설정을 지정할 수 있습니다. 사용자의 테마 환경설정에 맞게 사이트를 최적화하는 것이 좋습니다. prefers-color-scheme이라는 미디어 기능에서 이 환경설정에 액세스할 수 있습니다.

@media (prefers-color-scheme: dark) {
 
// Styles for a dark theme.
}

meta 요소 내의 prefers-color-scheme 미디어 기능으로 테마 색상을 지정합니다.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

SVG 내에서 prefers-color-scheme 미디어 기능을 사용할 수도 있습니다. 파비콘에 SVG 파일을 사용하는 경우 어두운 모드에 맞게 조정할 수 있습니다. 토마스 슈타이너어두운 모드 아이콘용 SVG 파비콘의 prefers-color-scheme

커스텀 속성을 사용한 테마 설정

CSS의 여러 위치에서 동일한 색상 값을 사용하는 경우 prefers-color-scheme 미디어 쿼리 내에서 모든 선택기를 반복하는 작업은 상당히 지루할 수 있습니다.

body {
 
background-color: white;
 
color: black;
}
input
{
 
background-color: white;
 
color: black;
 
border-color: black;
}
button
{
 
background-color: black;
 
color: white;
}
@media (prefers-color-scheme: dark) {
  body
{
   
background-color: black;
   
color: white;
 
}
  input
{
   
background-color: black;
   
color: white;
   
border-color: white;
 
}
  button
{
   
background-color: white;
   
color: black;
 
}
}

CSS 맞춤 속성을 사용하여 색상 값을 저장합니다. 맞춤 속성은 프로그래밍 언어의 변수처럼 작동합니다. 이름을 업데이트하지 않고도 변수 값을 업데이트할 수 있습니다.

prefers-color-scheme 미디어 쿼리 내에서 맞춤 속성 값을 업데이트하는 경우 모든 선택기를 두 번 작성할 필요가 없습니다.

html {
 
--page-color: white;
 
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html
{
   
--page-color: black;
   
--ink-color: white;
 
}
}
body
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
}
input
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
 
border-color: var(--ink-color);
}
button
{
 
background-color: var(--ink-color);
 
color: var(--page-color);
}

맞춤 속성을 사용한 테마 설정의 고급 예는 색 구성표 빌드를 참고하세요.

이미지

HTML에서 SVG를 사용하는 경우 맞춤 속성을 적용할 수도 있습니다.

svg {
 
stroke: var(--ink-color);
 
fill: var(--page-color);
}

이제 아이콘 색상이 페이지의 다른 요소와 함께 변경됩니다.

사진 이미지가 어두운 모드에서 표시될 때 밝기를 낮추려면 CSS에서 필터를 적용하면 됩니다.

@media (prefers-color-scheme: dark) {
  img
{
   
filter: brightness(.8) contrast(1.2);
 
}
}
<ph type="x-smartling-placeholder">
</ph> 보통 밝기로 찍은 사진 3장 <ph type="x-smartling-placeholder">약간 밝기가 낮은 사진 3장</ph> <ph type="x-smartling-placeholder">
</ph> 효과는 미묘하지만 어두운 모드에서 이미지의 밝기를 낮출 수 있습니다.

일부 이미지의 경우 완전히 어두운 모드로 전환해야 할 수 있습니다. 예를 들어 어두운 색 구성표로 지도를 표시할 수 있습니다. <source> 요소가 포함된 <picture> 요소를 prefers-color-scheme 미디어 쿼리와 함께 사용합니다.

<picture>
 
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
 
<img src="lightimage.png" alt="A description of the image.">
</picture>
<ph type="x-smartling-placeholder">
</ph> 브루린의 두 지도로, 하나는 밝은 색상을 사용하고 다른 하나는 어두운 색상을 사용합니다.
동일한 지도의 두 가지 버전(밝은 모드와 어두운 모드용)

양식

브라우저는 양식 입력란에 기본 색상 팔레트를 제공합니다. 사이트에서 어두운 모드와 밝은 모드를 모두 제공한다는 것을 브라우저에 알립니다. 이렇게 하면 브라우저가 양식에 적절한 기본 스타일을 지정할 수 있습니다.

CSS에 다음을 추가하세요.

html {
 
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html
{
   
color-scheme: dark;
 
}
}

HTML을 사용할 수도 있습니다. 문서의 head에 다음을 추가합니다.

<meta name="supported-color-schemes" content="light dark">

CSS에서 accent-color 속성을 사용하여 체크박스, 라디오 버튼 및 기타 양식 입력란의 스타일을 지정합니다.

html {
 
accent-color: red;
}

일반적으로 어두운 테마에는 브랜드 색상이 옅어집니다. 어두운 모드의 accent-color 값을 업데이트할 수 있습니다.

html {
 
accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html
{
   
accent-color: pink;
 
}
}

이를 위해 맞춤 속성을 사용하는 것이 합리적이므로 모든 색상 선언을 한곳에 유지할 수 있습니다.

html {
 
color-scheme: light;
 
--page-color: white;
 
--ink-color: black;
 
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html
{
   
color-scheme: dark;
   
--page-color: black;
   
--ink-color: white;
   
--highlight-color: pink;
 
}
}
html
{
 
accent-color: var(--highlight-color);
}
body
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
}

어두운 모드를 제공하는 것은 사용자의 취향에 맞게 사이트를 조정하는 한 가지 예에 불과합니다. 다음은 모든 종류의 접근성 고려사항에 맞게 사이트를 조정하는 방법을 알아보겠습니다.

이해도 확인

테마 설정에 대한 지식 테스트

웹페이지 외부의 브라우저에 영향을 미치는 테마 색상을 제공하려면 다음을 사용합니다.

'theme-color' 태그 <meta>
CSS
웹 앱 매니페스트
자바스크립트

밝은 테마나 어두운 테마와 관련하여 사용자의 시스템 환경설정에 연결하려면 다음을 사용합니다.

자바스크립트
(prefers-color-scheme) 미디어 쿼리

따라서 어두운 테마를 지원하지만 모든 양식 입력에는 여전히 밝은 테마가 적용됩니다. 무엇을 할 수 있어?

여러 CSS를 작성하여 입력의 모든 기본값을 변경합니다.
CSS에 html { color-scheme: light dark; }를 추가합니다.
HTML <head> 태그에 <meta name="supported-color-schemes" content="light dark">를 추가합니다.