테마 시스템 (Light / Dark) - by. UXKM

Publishing
SCSS
실무 예제로 SCSS 마무리
테마 시스템 (Light / Dark)

요약 설명
테마 시스템은 기존 컴포넌트 SCSS 구조를 변경하지 않고 테마를 확장하는 방식입니다.
"다크 모드는 새 CSS를 작성하는 것이 아니라 토큰을 교체하는 것"이라는 개념이 핵심입니다.
컴포넌트 SCSS는 변하지 않고, 테마는 토큰 레이어의 책임입니다.

이 페이지에서는 Light/Dark 컬러 토큰 정의, data-theme 기반 테마 전환, 동일 컴포넌트의 테마별 결과를 상세히 알아봅니다.

테마 시스템의 개념

테마 시스템은 색상 토큰만 교체하여 전체 디자인을 변경하는 방식입니다.
컴포넌트 코드는 변경하지 않고, CSS 변수나 데이터 속성을 통해 토큰 값만 변경합니다.
이 방식의 장점은 기존 구조를 유지하면서도 여러 테마를 지원할 수 있다는 점입니다.

테마 시스템의 원칙: 토큰 레이어의 책임: 테마는 토큰에서만 정의되고 관리됨; 컴포넌트 독립성: 컴포넌트 SCSS는 테마에 의존하지 않음; 동적 전환: CSS 변수나 데이터 속성으로 런타임에 테마 전환 가능; 확장성: 새로운 테마 추가 시 토큰만 추가하면 됨

CSS 변수를 사용한 테마 시스템

CSS 변수를 활용하면 런타임에 테마를 전환할 수 있습니다.
SCSS 변수 대신 CSS 변수를 사용하고, 테마별로 CSS 변수 값만 변경합니다.

Light 테마 토큰 정의

Light 테마의 색상 토큰을 CSS 변수로 정의합니다.

								:root {
									// Primary 색상
									--color-primary: #0a58ca;
									--color-primary-light: #74afff;
									--color-primary-dark: #06367c;

									// Neutral 색상
									--color-text: #212529;
									--color-text-secondary: #6c757d;
									--color-border: #dee2e6;
									--color-background: #ffffff;
									--color-surface: #f8f9fa;

									// Semantic 색상
									--color-success: #28a745;
									--color-error: #dc3545;
									--color-warning: #ffc107;
									--color-info: #17a2b8;
								}

Dark 테마 토큰 정의

Dark 테마의 색상 토큰을 정의합니다. Light 테마와 변수명은 동일하지만 값만 다릅니다.

								[data-theme="dark"] {
									// Primary 색상
									--color-primary: #5da3ff;
									--color-primary-light: #8bc4ff;
									--color-primary-dark: #2d7fd9;

									// Neutral 색상 (반전)
									--color-text: #ffffff;
									--color-text-secondary: #adb5bd;
									--color-border: #495057;
									--color-background: #121212;
									--color-surface: #1e1e1e;

									// Semantic 색상
									--color-success: #4caf50;
									--color-error: #f44336;
									--color-warning: #ff9800;
									--color-info: #2196f3;
								}

[data-theme="dark"] 속성 선택자를 사용하여 Dark 테마를 적용합니다.

컴포넌트에서 CSS 변수 사용

컴포넌트에서는 CSS 변수를 사용하여 테마별로 자동으로 색상이 변경되도록 합니다.

								.button {
									display: inline-flex;
									align-items: center;
									justify-content: center;
									min-height: 40px;
									padding: 10px 20px;
									font-size: 16px;
									font-weight: 500;
									line-height: 1.5;
									background-color: var(--color-primary);
									color: #ffffff;
									border: 1px solid var(--color-primary);
									border-radius: 8px;
									cursor: pointer;
									transition: all 0.15s ease-in-out;

									&:hover {
										background-color: var(--color-primary-dark);
										border-color: var(--color-primary-dark);
										opacity: 1;
									}

									&:focus {
										outline: 0;
										box-shadow: 0 0 0 0.2rem rgba(10, 88, 202, 0.25);
									}
								}

								.button--secondary {
									background-color: #ffffff;
									color: var(--color-primary);
									border-color: var(--color-primary);

									&:hover {
										background-color: var(--color-primary);
										color: #ffffff;
										border-color: var(--color-primary);
										opacity: 1;
									}
								}

컴포넌트 코드는 변경하지 않고, CSS 변수만 사용하면 테마 전환이 자동으로 적용됩니다.

data-theme 전환 방법

HTML 요소에 data-theme 속성을 추가하거나 변경하여 테마를 전환합니다.
일반적으로 <html> 또는 <body> 요소에 적용합니다.

HTML 구조

테마 전환을 위한 HTML 구조입니다.

								<!-- Light 테마 -->
								<html data-theme="light">
									<body>
										<button class="button button--primary">Primary Button</button>
									</body>
								</html>

								<!-- Dark 테마 -->
								<html data-theme="dark">
									<body>
										<button class="button button--primary">Primary Button</button>
									</body>
								</html>

JavaScript로 테마 전환

JavaScript를 사용하여 런타임에 테마를 전환하는 방법입니다.

								// 테마 전환 함수
								function toggleTheme() {
									const html = document.documentElement;
									const currentTheme = html.getAttribute('data-theme');
									const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
									html.setAttribute('data-theme', newTheme);
								}

								// 로컬 스토리지에 테마 저장
								function setTheme(theme) {
									document.documentElement.setAttribute('data-theme', theme);
									localStorage.setItem('theme', theme);
								}

								// 페이지 로드 시 저장된 테마 적용
								const savedTheme = localStorage.getItem('theme') || 'light';
								setTheme(savedTheme);

테마를 로컬 스토리지에 저장하면 사용자가 선택한 테마를 다음 방문 시에도 유지할 수 있습니다.

테마 전환 통합 예시

※ 코드펜에서는 SCSS 파셜을 사용할 수 없으므로, 이 예시는 사용되는 토큰만을 하나의 SCSS 파일에 모아 작성한 예제입니다.

코드펜에서는 @use를 사용할 수 없으므로, 모든 토큰과 컴포넌트 스타일을 하나의 SCSS 파일에 작성합니다.
헤더의 테마 전환 버튼을 클릭하면 Light/Dark 테마가 전환되며, 배경색, 텍스트 색상, 테두리 색상, 컴포넌트 색상 등이 모두 변경되는 것을 확인할 수 있습니다.

SCSS 변수와 CSS 변수 혼합 사용

실무에서는 SCSS 변수와 CSS 변수를 함께 사용하는 경우가 많습니다.
SCSS 변수는 컴파일 타임에 결정되는 값(폰트 크기, 간격 등)에 사용하고, CSS 변수는 런타임에 변경되는 값(색상 등)에 사용합니다.

							@use "../tokens/spacing" as spacing;
							@use "../tokens/radius" as radius;
							@use "../tokens/typography" as typo;

							.card {
								display: flex;
								flex-direction: column;
								// SCSS 변수: 컴파일 타임에 결정
								padding: 1.25rem;
								border-radius: radius.$radius-lg;
								font-size: typo.$font-size-base;
								overflow: hidden;
								box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

								// CSS 변수: 런타임에 변경 가능
								background-color: var(--color-surface);
								border: 1px solid var(--color-border);
								color: var(--color-text);
							}

이렇게 하면 레이아웃과 간격은 고정되면서, 색상만 테마에 따라 변경됩니다.

다중 테마 지원

Light와 Dark 외에도 여러 테마를 지원하려면, 각 테마별로 CSS 변수 값을 정의하면 됩니다.

							[data-theme="blue"] {
								--color-primary: #1976d2;
								--color-primary-light: #64b5f6;
								--color-primary-dark: #0d47a1;
								--color-text: #212529;
								--color-background: #ffffff;
								// ... 나머지 색상
							}

							[data-theme="green"] {
								--color-primary: #388e3c;
								--color-primary-light: #81c784;
								--color-primary-dark: #1b5e20;
								--color-text: #212529;
								--color-background: #ffffff;
								// ... 나머지 색상
							}

컴포넌트 코드는 변경하지 않고, 새로운 테마 토큰만 추가하면 여러 테마를 지원할 수 있습니다.

테마 파일 구조

테마 파일들을 체계적으로 정리하는 방법입니다.
각 테마를 별도 파일로 분리하여 관리합니다.

							themes/
								├─ _theme-light.scss
								├─ _theme-dark.scss
								├─ _theme-blue.scss
								└─ _themes.scss        /* 모든 테마를 한 번에 import */

							@forward "theme-light";
							@forward "theme-dark";
							@forward "theme-blue";

정리

테마 시스템 구성에 대해 알아본 내용을 정리합니다.

테마 시스템의 개념: 토큰만 교체하여 전체 디자인 변경
CSS 변수 사용: 런타임에 테마 전환 가능하도록 CSS 변수 활용
Light/Dark 토큰: 동일한 변수명으로 다른 값 정의
data-theme 전환: HTML 속성으로 테마 전환 제어
컴포넌트 독립성: 컴포넌트 SCSS는 테마에 의존하지 않음
SCSS/CSS 변수 혼합: 컴파일 타임 값은 SCSS, 런타임 값은 CSS 변수
다중 테마 지원: 새로운 테마 추가 시 토큰만 추가

다음 페이지에서는 디자인 시스템 SCSS 구조를 정리하는 방법을 알아봅니다.