AAtomic CSS

color-scheme

브라우저에게 요소가 지원하는 색상 스킴을 알려줍니다. 폼 요소, 스크롤바 등 브라우저 기본 UI의 색상 테마에 영향을 줍니다.

클래스 목록

클래스CSS설명
csncolor-scheme: normal브라우저 기본값. 시스템 설정을 따름
cslcolor-scheme: light라이트 모드만 지원함을 브라우저에 알림
csdcolor-scheme: dark다크 모드만 지원함을 브라우저에 알림

라이브 데모

같은 폼 요소를 왼쪽은 라이트 스킴, 오른쪽은 다크 스킴으로 선언했습니다. 배경색은 두 상자 모두 지정하지 않았는데도 입력창, 셀렉트, 체크박스, 날짜 선택기, 스크롤바의 브라우저 기본 색이 서로 다르게 나타납니다.

라이트 스킴 — csl

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

입력창 배경이 밝고 체크박스와 스크롤바도 밝은 테마로 그려집니다.

다크 스킴 — csd

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

스크롤바 색도 스킴을 따라갑니다.

같은 마크업이지만 브라우저가 어두운 기본 위젯 색을 사용합니다. 날짜 선택기 팝업도 어둡게 열립니다.

직접 확인해 볼 것

두 상자 안의 텍스트와 테두리는 같은 클래스입니다. 차이가 나는 부분은 전부 브라우저가 그리는 기본 UI뿐입니다. 이것이 color-scheme의 영향 범위를 그대로 보여 줍니다.

영향을 받는 요소

color-scheme은 브라우저 기본 UI에만 영향을 줍니다. 커스텀 스타일에는 영향 없습니다.

요소영향
input, textarea, select배경색, 테두리, 텍스트 색상이 스킴에 맞게 변경
스크롤바다크/라이트 테마에 맞는 스크롤바 색상 적용
checkbox, radio체크 상태의 색상이 스킴에 따라 변경
시스템 색상 키워드Canvas, CanvasText 등 시스템 색상이 스킴을 따름

클래스별 상세

csncolor-scheme: normal

초기값입니다. 요소가 특정 스킴을 선언하지 않았음을 뜻하며, 브라우저는 상속된 스킴이나 시스템 설정을 따릅니다.

언제 쓰나

상위에서 라이트나 다크를 강제한 영역 안에서 특정 부분만 다시 브라우저 판단에 맡길 때 씁니다.

<!-- Follow whatever the system and the browser decide -->
<div class="csn p2rem br8px">
  <input type="text" placeholder="Follows the system setting" />
</div>

cslcolor-scheme: light

이 요소와 자손이 라이트 스킴을 지원한다고 브라우저에 알립니다. 시스템이 다크 모드여도 브라우저 기본 UI는 밝게 그려집니다.

언제 쓰나

다크 페이지 안에 문서 미리보기, 인쇄 미리보기, 청구서처럼 항상 흰 종이처럼 보여야 하는 영역이 있을 때 그 영역에만 적용합니다.

<!-- Light island inside a dark page (docs, invoice preview) -->
<section class="csl bgFFFFFF c000000 p2rem br8px">
  <h3 class="fs2rem fw700 mb16px">Invoice preview</h3>
  <input type="date" class="py8px px12px br4px" />
  <select class="py8px px12px br4px">
    <option>Paid</option>
    <option>Pending</option>
  </select>
</section>

csdcolor-scheme: dark

이 요소와 자손이 다크 스킴을 지원한다고 브라우저에 알립니다. 입력창, 셀렉트, 체크박스, 날짜 선택기, 스크롤바가 어두운 기본값으로 바뀝니다.

언제 쓰나

다크 테마 사이트의 루트에 적용하는 것이 가장 일반적입니다. 이것을 빼먹으면 어두운 배경 위에 흰 입력창과 흰 스크롤바가 남아 겉도는 화면이 됩니다.

<!-- Dark app shell: native widgets follow the dark theme -->
<html class="csd">
  <body class="bg0F0F17 cFAFAFA">
    <input type="text" placeholder="Dark input" />
    <input type="checkbox" checked />
  </body>
</html>

사용 예시

사이트 전체와 특정 구역에 스킴을 선언하는 기본 형태입니다.

<!-- Apply dark mode to entire site -->
<html class="csd">
  <body class="bg000000 cFAFAFA">
    <!-- Form elements and scrollbars automatically use dark theme -->
    <input type="text" placeholder="Dark theme input field" />
  </body>
</html>

<!-- Light mode for specific section only -->
<div class="csl bgFFFFFF c000000 p2rem br8px">
  <input type="text" placeholder="Light theme input field" />
</div>

다크 표면 위의 설정 폼입니다. 날짜 선택기 팝업과 스크롤바까지 어두운 스킴을 따릅니다.

<!-- Settings form on a dark surface -->
<form class="csd bg0F0F17 b1pxsolid27272A br12px p3-2rem df fdc gap16px">
  <label class="df fdc gap8px">
    <span class="fs14px cA1A1AA">Display name</span>
    <input type="text" class="py8px px12px br4px b1pxsolid27272A" />
  </label>

  <label class="df fdc gap8px">
    <span class="fs14px cA1A1AA">Renewal date</span>
    <!-- The native date picker also opens in dark -->
    <input type="date" class="py8px px12px br4px b1pxsolid27272A" />
  </label>

  <label class="df aic gap8px fs14px cA1A1AA">
    <input type="checkbox" checked />
    <span>Email me about product updates</span>
  </label>

  <!-- The scrollbar of this box follows the dark scheme too -->
  <div class="oya maxh20rem fs14px cA1A1AA lh1-7">
    <p class="mb12px">Long terms text...</p>
  </div>

  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Save</button>
</form>

팁

다크 모드 사이트

다크 테마 사이트에서는 csd를 루트에 적용하면 폼 요소와 스크롤바가 다크 테마에 맞게 변경됩니다.

주의

color-scheme은 배경색이나 텍스트 색상을 직접 바꾸지 않습니다. 커스텀 색상은 bg, c 클래스를 사용하세요.

내 색상은 바뀌지 않습니다

color-scheme은 브라우저가 그리는 기본 UI만 바꿉니다. 직접 지정한 배경색과 글자색은 그대로이므로, 다크 테마는 여전히 bg와 c 클래스로 직접 만들어야 합니다.

입력 요소에 배경색을 직접 주면 효과가 가려집니다

입력창에 bgFFFFFF 같은 배경색을 직접 지정하면 스킴이 정한 기본 배경을 덮어씁니다. 브라우저 기본 UI에 맡기고 싶은 부분에는 색을 지정하지 마세요.

주소창과 스크롤바까지 포함하려면

페이지 전체 스크롤바와 브라우저 UI까지 스킴을 따르게 하려면 루트 요소에 적용해야 합니다. 특정 구역에만 적용하면 그 구역 안의 스크롤 영역에만 반영됩니다.

colorbackground-colorappearancescrollbar-widthmisc