CSS 변수

CSS에서 값을 간편하게 관리하기 위해 변수를 정의하여 사용할 수 있다.

:root

일반적으로 root란 문서트리의 루트 요소를 선택하는 가상 클래스다.
CSS에서의 :root는 전역 변수를 선언할 때 사용된다.
이 값은 문서 전체에서 사용이 가능하며, 일관된 디자인 시스템을 구축하는 데 핵심적인 역할을 한다.
mdn 의사클래스

CSS Variables

CSS Variables(CSS 사용자 정의 속성)은 --로 시작되는 이름을 가지며, var()함수를 사용하여 값을 사용할 수 있다.
색상이나 그릳드 시스템, 아이콘 시스템 등의 카테고리를 나누어 체계적으로 관리할 수 있다.
mdn 사용자 지정 CSS

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
 
p {
  color: var(--main-color);
  padding: var(--pane-padding, 10px 20px);
  border: 1px solid black;
}

var() 함수는 첫번째 인자로 가져올 값의 변수 이름을 작성하며, 해당 변수 값을 가져오지 못했을 경우 두번째 인자의 값을 사용한다.

테마 전환

CSS 변수를 이용하여 다크모드/라이트모드를 쉽게 구현할 수 있다.

:root {
  /* 라이트 모드 (기본) */
  --background-color: #ffffff;
  --text-color: #333333;
  --accent-color: #0066cc;
}
 
[data-theme='dark'] {
  /* 다크 모드 */
  --background-color: #222222;
  --text-color: #f0f0f0;
  --accent-color: #4d9fff;
}
 
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
 
a {
  color: var(--accent-color);
}

JavaScript에서 테마 전환을 하기 위해서 아래와 같은 코드를 작성한다.

// 다크 모드로 전환
document.documentElement.setAttribute('data-theme', 'dark');
 
// 라이트 모드로 전환
document.documentElement.removeAttribute('data-theme');