AAtomic CSS

color-scheme

Tells the browser which color schemes are supported. Affects browser default UI for form elements, scrollbars, etc.

Class List

ClassCSSDescription
csncolor-scheme: normalBrowser default. Follows system setting
cslcolor-scheme: lightTells browser only light mode supported
csdcolor-scheme: darkTells browser only dark mode supported

Affected Elements

color-scheme only affects browser default UI. No effect on custom styles.

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

Usage Examples

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

Tips

Dark mode sites

Apply csd to root on dark theme sites to adjust form elements and scrollbars.

Caution

color-scheme doesn't change background/text colors directly. Use bg, c for custom colors.

colorbackground-color