브랜딩도 반응형일 수 있습니다. 사용자의 환경설정에 맞게 웹사이트의 프레젠테이션을 조정할 수 있습니다. 하지만 먼저 웹사이트의 브랜딩을 확장하여 브라우저 자체를 포함하는 방법을 알아보세요.
브라우저 인터페이스 맞춤설정
일부 브라우저에서는 웹사이트의 팔레트를 기반으로 테마 색상을 제안할 수 있습니다.
브라우저의 인터페이스는 제안된 색상에 맞게 조정됩니다. 페이지의 head에 있는 theme-color라는 meta 요소에 색상을 추가합니다.
<meta name="theme-color" content="#00D494">
자바스크립트를 사용하여 theme-color의 값을 업데이트할 수 있습니다. 하지만 이 기능을 현명하게 사용하세요.
브라우저의 색 구성표가 너무 자주 변경되면 사용자에게 부담이 될 수 있습니다.
테마 색상을 조정하는 미묘한 방법을 생각해 보세요. 변경사항이 너무 눈에 띄면 사용자는 짜증을 내며 사이트를 떠날 것입니다.
웹 앱 매니페스트 파일에서 테마 색상을 지정할 수도 있습니다. 이는 웹사이트에 관한 메타데이터가 포함된 JSON 파일입니다.
문서의 head에서 매니페스트 파일로 연결합니다. rel 값이 manifest인 link 요소를 사용합니다.
<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 파일을 사용하는 경우 어두운 모드에 맞게 조정할 수 있습니다.
Thomas Steiner는 어두운 모드 아이콘용 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);
}
}
일부 이미지의 경우 어두운 모드에서 완전히 교체하는 것이 좋습니다.
예를 들어 더 어두운 색 구성표로 지도를 표시할 수 있습니다.
<picture> 요소가 포함된 <source> 요소와 함께 prefers-color-scheme 미디어 쿼리를 사용합니다.
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
설문지
브라우저는 양식 필드에 기본 색상 팔레트를 제공합니다. 사이트에서 어두운 모드와 밝은 모드를 모두 제공한다고 브라우저에 알립니다. 이렇게 하면 브라우저에서 양식에 적절한 기본 스타일을 제공할 수 있습니다.
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);
}
어두운 모드를 제공하는 것은 사용자 환경설정에 맞게 사이트를 조정하는 한 가지 예일 뿐입니다. 다음으로 모든 종류의 접근성 고려사항에 맞게 사이트를 조정하는 방법을 알아봅니다.
이해도 테스트
테마에 관한 지식 테스트
웹페이지 외부의 브라우저에 영향을 미치는 테마 색상을 제공하려면 다음을 사용하세요.
<meta> 태그를 업데이트하는 데 사용하는 경우에만 해당됩니다.manifest.json을 제공할 수 있으며, 모바일 홈 화면에서 앱을 열 때 앱의 모양에 색조를 적용하는 테마 색상을 지정하는 필드가 포함되어 있습니다.<meta> 태그<head> 태그에서 이 테마 색상을 감지하여 원치 않는 색상 깜박임을 방지할 수 있습니다.밝은 테마 또는 어두운 테마와 관련된 사용자 시스템 환경설정에 연결하려면 다음을 사용하세요.
(prefers-color-scheme) 미디어 쿼리어두운 테마를 지원하지만 모든 양식 입력란은 여전히 밝은 테마입니다. 무엇을 할 수 있어?
html { color-scheme: light dark; }를 추가합니다.<head> 태그에 <meta name="supported-color-schemes" content="light dark">를 추가합니다.