색상 변경하기 chroma-js

사용자가 설정한 색상을 기반으로 색상을 API로부터 렌더링 하여 전반적인 테마 색상으로 설정하는 기능을 개발하기로 했다.

주어진 테마 색상이 #323548 이라고 할 때, 해당 색상의 하이라이트 색상을 생성해서 설정해야 한다.

그리고 색상을 렌더링 해야하기 때문에 hex코드 값으로 색상값을 알아와야 한다.

mainColor로부터 받아온 색상을 chroma-js의 saturate와 brighten 메소드를 사용하여 하이라이터 색상으로 설정해 주었다.

import chroma from 'chroma-js'


export default function Sidebar() {
  const { darkColor, mainColor } = useThemeContext()
  
  //chroma-js 를 통해 하이라이터 색상 설정 
  const brighterColor = chroma(mainColor)
    .saturate(3)
    .brighten(1)

  const highlightColor = brighterColor.hex() //hex값으로 변경 

  return (
  ...
                <li
                  style={
                    menu === selected
                      ? {
                          background: darkColor,
                          color: finalColor,
                        }
                      : {}
                  }
                >
                  {menu.reportMenuNm}
                </li>
           ...
           
    </>
  )
}

기존의 색상을 기반으로 여러 하이라이터, 그림자, 어두운 색상 등 여러 색상을 생성하는데 도움이 되는 라이브러리로 사용할 수 있을 것 같다.

공식문서 https://gka.github.io/chroma.js/