브랜드 색 고르기

준비된 185색 중 하나를 고르면 버튼과 입력창, 선택 컨트롤, 회색까지 그 색에 맞춰 다시 만들어진다.

고른 색은 9단계 자리에 그대로 들어가고 나머지 11단계가 거기서 나온다. 회색은 브랜드의 색깔만 물려받아 거의 무채색으로 둔다.

색깔로 고른다

빨강54색 · 0~30°주황28색 · 30~60°노랑20색 · 60~90°연두10색 · 90~120°초록11색 · 120~150°청록9색 · 150~180°하늘18색 · 180~210°파랑7색 · 210~240°남색3색 · 240~270°보라3색 · 270~300°자주8색 · 300~330°분홍14색 · 330~360°

남색과 보라는 3색씩뿐이다. 원본 자료가 따뜻한 색 위주다.

쓰는 법

  1. 색깔 페이지에서 마음에 드는 번호를 찾는다
  2. 그 카드의 명령을 실행하면 nui-theme.css 가 생긴다
  3. 라이브러리 CSS 뒤에 불러온다
    import "@nui-kit/react/styles/index.css";
import "./nui-theme.css";

색을 바꾸는 방법은 이것 하나다. :root 에서 색 변수를 직접 덮어쓰는 방식은 지원하지 않는다. 배경만 바뀌고 글자색은 남아 대비가 조용히 깨진다. 한 컴포넌트만 바꿔야 하면 className 을 쓴다.

보는 테마를 따라간다

색깔 페이지의 스와치는 지금 보고 있는 테마를 따른다. 오른쪽 위에서 테마를 바꾸면 같은 프리셋의 다크 색으로 바뀐다.

목록에 없는 색을 쓰고 싶다면

아직 안 된다. 185색은 원본 400색에서 걸러낸 것이고, 기준은 선명함(OKLCH C) 0.05 이상만 남겼다. 그 아래는 회색에 가까워 색깔을 믿을 수 없다. 이다.

거의 회색인 색은 색깔 값이 우연한 숫자다. 그 숫자로 화면 전체를 물들이면 엉뚱한 색이 나온다.