AAtomic CSS

color-scheme

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

클래스 목록

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

영향을 받는 요소

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

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

사용 예시

<!-- 다크 모드 사이트 전체 적용 -->
<html class="csd">
  <body class="bg000000 cFAFAFA">
    <!-- 폼 요소, 스크롤바가 자동으로 다크 테마 -->
    <input type="text" placeholder="다크 테마 입력 필드" />
  </body>
</html>

<!-- 특정 섹션만 라이트 모드 -->
<div class="csl bgFFFFFF c000000 p2rem br8px">
  <input type="text" placeholder="라이트 테마 입력 필드" />
</div>

팁

다크 모드 사이트

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

주의

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

colorbackground-color