AAtomic CSS

color-scheme

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
csncolor-scheme: normal브라우저 기본값. 시스템 설정을 따름
cslcolor-scheme: light라이트 모드만 지원함을 브라우저에 알림
csdcolor-scheme: dark다크 모드만 지원함을 브라우저에 알림

영향을 받는 요소

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">요소영향
input, textarea, select배경색, 테두리, 텍스트 색상이 스킴에 맞게 변경
스크롤바다크/라이트 테마에 맞는 스크롤바 색상 적용
checkbox, radio체크 상태의 색상이 스킴에 따라 변경
시스템 색상 키워드Canvas, CanvasText 등 시스템 색상이 스킴을 따름

사용 예시

<!-- 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>

팁

다크 모드 사이트

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

주의

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

colorbackground-color