[css] CSS 변수 컬러 테마
CSS 변수를 활용하면 웹 애플리케이션에서 다크 모드와 라이트 모드를 손쉽게 변경할 수 있습니다. 이 글에서는 CSS 변수를 활용하여 컬러 테마를 만드는 방법에 대해 알아보겠습니다.
CSS 변수란?
CSS 변수는 --로 시작하는 이름을 가지고 있으며, 재사용 가능한 값을 저장하는 데 사용됩니다. 변수를 사용하면 동일한 값을 여러 곳에서 쉽게 참조하고 변경할 수 있습니다.
다크 모드와 라이트 모드 컬러 테마 설정
CSS 변수 정의
:root {
--primary-color: #3498db;
--secondary-color: #e67e22;
--text-color: #333;
--background-color: #f5f5f5;
}
.dark-mode {
--primary-color: #2980b9;
--secondary-color: #d35400;
--text-color: #fff;
--background-color: #34495e;
}
위 코드에서 :root선택자를 사용하여 전역 스코프에 CSS 변수를 정의하고, dark-mode 클래스에서 새로운 값으로 재정의합니다.
테마 적용
.button {
background-color: var(--primary-color);
color: var(--text-color);
border: 1px solid var(--secondary-color);
}
위 코드에서 var() 함수를 사용하여 컬러 값을 참조합니다. 이를 통해 테마 변경 시 해당 값이 자동으로 적용됩니다.
JavaScript를 통한 테마 변경
document.documentElement.classList.toggle('dark-mode');
Javascript를 사용하여 dark-mode 클래스를 :root에 추가하고 제거하여 전체 애플리케이션의 테마를 변경할 수 있습니다.
CSS 변수를 사용하면 다양한 컬러 테마를 쉽게 적용할 수 있으며, 다크 모드와 라이트 모드를 간편하게 전환할 수 있습니다.
이러한 접근 방식은 사용자가 원하는 테마를 선택할 수 있는 옵션을 제공하여 웹 애플리케이션의 사용성을 향상시킬 수 있습니다.