[CSS] 변수합성을 통한 테마 구현하기

💡 해당 글은 CSS 변수 합성의 강력함을 읽고 정리한 글입니다.

색을 정의하는 방법

기존에 색을 정의하는 방식 중, 대중적인 두가지 방식에는 HEX code 방식과 grba함수를 사용하는 방식이 있습니다.

:root {
  --main-blue: #2663f2;
  --secondary-blue: #0d4ad9; /* main blue도다 10% 어두운 색상 */
  --main-blue-transparent: rgba(38,99,242,0.1); /* main blue도다 10% 불투명한 색상 */
}

색을 정의하는 방법이 여러개라 난잡합니다.

:root {
  --main-blue: rgba(38, 99, 242, 1);
  --secondary-blue: rgba(13, 74, 217, 1);
  --main-blue-transparent: rgba(38,99,242,0.1);
}

그러나 각 색상 간 유사성이 쉽게 보이지 않는다는 단점이 있습니다. 따라서 hsla 방식을 사용해서 개선을 해봅시다.

:root {
  --main-blue: hsla(222, 89%, 55%, 100%);
  /* --main-blue와 동일한 색상과 채도를 나타내므로 쉽게 식별할 수 있다. */
  --secondary-blue: hsla(222, 89%, 45%, 100%);
  --main-blue-transparent: hsla(222, 89%, 55%, 10%);
}

그런데 계속해서 반복되는 코드(222, 89%)가 존재합니다. 이를 CSS 변수를 통해 리팩토링합시다. (이 방식은 tailwind의 핵심 패턴 중 하나라고 합니다.)

:root {
  --base-blue: 222, 89%;
  --main-blue: hsla(var(--base-blue), 55%, 100%);
  --secondary-blue: hsla(var(--base-blue), 45%, 100%);
  --main-blue-transparent: hsla(var(--base-blue), 55%, 10%);
}

HSLA를 이용한 색상 계층 정의

:root {
  --base-blue: 222, 89%;

  --palette-blue-10: hsla(var(--base-blue), 10%, 100%);
  --palette-blue-20: hsla(var(--base-blue), 20%, 100%);
  --palette-blue-30: hsla(var(--base-blue), 30%, 100%);
  --palette-blue-40: hsla(var(--base-blue), 40%, 100%);
  --palette-blue-50: hsla(var(--base-blue), 50%, 100%);
  ...
}

hsla 함수와 CSS 변수를 통해 다양한 색을 정의했습니다. 하지만 앱에서 어떤 색을 사용해야 할 지 알 수 없습니다. 따라서 의미를 가진 색을 정의합니다.

색에 의미 부여하기

:root {
  --base-blue: 222, 89%;

  ...
  --palette-blue-50: hsla(var(--base-blue), 50%, 100%);
  ...

  /* 
  여기서 색상을 의미에 따라 합성한다.
  primary 와 emphasis는 --palette-blue-50을 사용하여 합성한다.
  이 변수들은 다른 불투명도를 사용하기 때문에 다른 의미를 갖고 있다.
  */
  --primary: hsla(var(--palette-blue-50), 100%);
  --emphasis: hsla(var(--palette-blue-50), 8%);
}

이와 같은 패턴을 사용한다면

1. 의미를 가진 색상 변수를 사용하므로서, 컴포넌트 스타일을 더욱 추상화하여, 이해하기 쉽게 만들 수 있습니다.
2. --primary 와 --emphasis 에 사용되는 색 변수를 변경함으로써 편하게 색상 계층을 바꿀 수 있습니다.

JS로 CSS 변수 값을 변경하는 것은 밑에서 예제를 참고해주세요.

명도를 변수화하기

:root {
  --base-blue: 222, 89%;
  --base-brightness: 50%;

  /* --base-blue와 --base-birghtness에 의존하는 변수 --base-color를 만들었다. */
  --base-color: hsla(var(--base-blue), var(--base-brightness));

  /* --base-color에 따라 자동으로 계산되는 색 변수들.  */
  --primary: hsla(var(--base-color)), 100%);
  --emphasis: hsla(var(--base-color), 8%);
}

명도를 변수화 하여, 좀 더 깔끔한 스타일 코드를 만들 수 있으며, 사용자의 명도 입력 값에 따라 자동으로 계산되는 색상 계층이 만들어졌습니다.

예제

Code Sandbox 링크

이와 같은 패턴은 바닐라 JS 웹 앱 뿐만 아니라, CRA와 SSR에도 적용할 수 있습니다.