[CSS] accent-color

1. accent-color속성?

• accent-color는 특정 요소에 색상을 지정할 때 사용된다.
• accent라는 말처럼 브랜드 컬러처럼 강조 색상을 요소에 적용할 때 유용하다.
• accent-color는 prefers-color-scheme와 같이 사용하면, 라이트&다크모드를 모두 지정할 수 있다.
• accent-color는 아래 요소에 적용된다.

<input type="checkbox"> <!--체크박스-->
<input type="radio">    <!--라디오버튼-->
<input type="range">    <!--범위-->
<progress></progress>   <!--진행도-->

2. 미디어쿼리, prefers-color-scheme

🙂 먼저, prefers-color-scheme은 어떻게 쓰는지 알아보고 accent-color 예시를 보자

• CSS의 미디어 쿼리 중 하나로, 사용자 OS 시스템 모드에 따라 다른 스타일을 지정할 수 있다.

@media (prefers-color-scheme: light) {
   /* light모드일 때 색상 지정*/
}
@media (prefers-color-scheme: dark) {
   /* dark모드일 때 색상 지정*/
}

See the Pen prefers-color-scheme example by KumJungMin (@kumjungmin) on CodePen.

3. accent-color + prefers-color-scheme 예시

• accent-color를 다크모드이면 red, 라이트모드면 blue 적용되도록 해보았다.
• 사용자의 OS모드를 변경해서 확인해보자 🙂

See the Pen accent-color by KumJungMin (@kumjungmin) on CodePen.