<h1>prefers-color-scheme</h1>

<p><strong><code>prefers-color-scheme</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/@media#media_features">미디어 특성</a>은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.</p>

<h2>구문</h2>

<dl>
  <dt><code>no-preference</code></dt>
  <dd>사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드 <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context">boolean context</a>에서 <code>false</code>로 판정됩니다.</dd>
  <dt><code>light</code></dt>
  <dd>사용자가 시스템에 라이트 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd>
  <dt><code>dark</code></dt>
  <dd>사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd>
</dl>

<h2>예제</h2>

<p>이 예제는 검은 배경에 흰 텍스트를 가진 요소를 라이트 테마를 사용하는 사용자가 볼 경우 색을 반대로 해서 나타냅니다.</p>
:root {
  --background: #fff;
  --text: #363636;
  --heading-text: #000;
  --anchor-text: #0076d1;
  --code-background: #efefef;
  --code-text: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #202b38;
    --text: #dbdbdb;
    --heading-text: #fff;
    --anchor-text: #0076d1;
    --code-background: #161f27;
    --code-text: #ffbe85;
  }
}

body {
  background: var(--background);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  color: var(--heading-text);
}

p,
dl {
  color: var(--text);
}

a {
  color: var(--anchor-text);
  text-decoration: none;
}

code {
  color: var(--code-text);
  background: var(--code-background);
  border-radius: 6px;
  padding: 2.5px 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.