기록을 불러오는 중입니다...
// 주 색의 명도별로 RGB 색을 할당합니다.
const ORANGE = {
50: '#fffaf0',
100: '#fff2e4',
200: '#ffe7d4',
300: '#ffc98f',
400: '#fea775',
500: '#fe7e43',
600: '#d97000',
700: '#9c4221',
800: '#7b341e',
900: '#652b19',
};FFFAF0 이 도대체 무슨 색인지, 외우지 않고서는 금방 이해하기 힘들죠. 심지어 (디자인 시스템을 마련하는 도중과 같이) 이 색들을 변경해야 하는 일이 생긴다면, 어떤 값을 얼마나 변경해야 원하는 색을 만들 수 있는지 짐작하기 어렵습니다. 255, 170, 170 입니다. 하지만 우리가 원하는 것은 HSL 값이므로, HSL로 바꿔 봅시다. ColorHexa 라는 사이트에서 특정 색을 검색하면 다음과 같이 다양한 색 체계의 값들을 알려줍니다. HSL로는 0, 100%, 83.3% 네요.--base-pink 로 명명합니다.// globals.css
@theme {
--base-pink: 0, 100%;
}83.3% 인데요, 저는 400으로 지정해 보겠습니다. 그리고 이 둘을 합쳐서 --color-pink-400 을 정의합니다.@theme {
--base-pink: 0, 100%;
--lightness-400: 83.3%;
--color-pink-400: hsl(var(--base-pink), var(--lightness-400));
}@theme {
/* ... */
--lightness-50: 99%;
--lightness-100: 98.4%;
--lightness-200: 93.3%;
--lightness-300: 88.4%;
--lightness-400: 83.3%;
--lightness-500: 78.4%;
--lightness-600: 73.3%;
--lightness-700: 68.4%;
--lightness-800: 63.5%;
--lightness-900: 58.4%;
}@theme {
/* ... */
--color-pink-50: hsl(var(--base-pink), var(--lightness-50));
--color-pink-100: hsl(var(--base-pink), var(--lightness-100));
--color-pink-200: hsl(var(--base-pink), var(--lightness-200));
--color-pink-300: hsl(var(--base-pink), var(--lightness-300));
--color-pink-400: hsl(var(--base-pink), var(--lightness-400));
--color-pink-500: hsl(var(--base-pink), var(--lightness-500));
--color-pink-600: hsl(var(--base-pink), var(--lightness-600));
--color-pink-700: hsl(var(--base-pink), var(--lightness-700));
--color-pink-800: hsl(var(--base-pink), var(--lightness-800));
--color-pink-900: hsl(var(--base-pink), var(--lightness-900));
}@theme {
/* ... */
--base-blue: 210, 100%;
--color-blue-50: hsl(var(--base-blue), var(--lightness-50));
--color-blue-100: hsl(var(--base-blue), var(--lightness-100));
--color-blue-200: hsl(var(--base-blue), var(--lightness-200));
--color-blue-300: hsl(var(--base-blue), var(--lightness-300));
--color-blue-400: hsl(var(--base-blue), var(--lightness-400));
--color-blue-500: hsl(var(--base-blue), var(--lightness-500));
--color-blue-600: hsl(var(--base-blue), var(--lightness-600));
--color-blue-700: hsl(var(--base-blue), var(--lightness-700));
--color-blue-800: hsl(var(--base-blue), var(--lightness-800));
--color-blue-900: hsl(var(--base-blue), var(--lightness-900));
}--base-... 에서 Hue 값만 변경하면 되고, “채도”를 바꾸고 싶다면 Saturation 값만 변경하면 됩니다. 너무 우아하지 않나요?<p className="text-pink-500">...</p>text-pink-500 을 text-blue-500 으로 바꾸자니 난감하네요. 현재 컬러 테마에 따라 자동으로 바뀌게 할 수는 없을까요?main-color 라는 새로운 CSS 변수를 만들어서 해결해 봅시다.@theme {
/* ... */
--color-main-50: hsl(var(--main-color), var(--lightness-50));
--color-main-100: hsl(var(--main-color), var(--lightness-100));
--color-main-200: hsl(var(--main-color), var(--lightness-200));
--color-main-300: hsl(var(--main-color), var(--lightness-300));
--color-main-400: hsl(var(--main-color), var(--lightness-400));
--color-main-500: hsl(var(--main-color), var(--lightness-500));
--color-main-600: hsl(var(--main-color), var(--lightness-600));
--color-main-700: hsl(var(--main-color), var(--lightness-700));
--color-main-800: hsl(var(--main-color), var(--lightness-800));
--color-main-900: hsl(var(--main-color), var(--lightness-900));
}--main-color 가 무엇인지는 모르지만, 어찌 되었건 해당 값을 따르는 CSS 변수들을 정의했습니다. 이제 우리가 할 일은 컬러 테마에 따라 --main-color 만 변경시켜 주면 됩니다. 저는 여기서 tailwind 공식 문서의 data 속성을 이용해 다크 모드를 제어하는 방식을 차용했습니다.@base {
html[data-theme="pink"] {
--main-color: var(--base-pink);
}
html[data-theme="blue"] {
--main-color: var(--base-blue);
}
}export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko" data-theme="pink">
<body className="antialiased">
{/* ... */}
</body>
</html>
);
}
html 요소에 기본 컬러 테마인 "pink" 를 지정하고, data-theme 의 값에 따라 --main-color 가 변하도록 만들었습니다. 이제 컬러 테마 변경 버튼만 만들면 끝입니다."use client";
export default function Header() {
function changeColorScheme() {
const $html = document.getElementsByTagName("html").item(0);
if ($html) {
$html.dataset.theme = $html.dataset.theme === "pink" ? "blue" : "pink";
}
}
return (
<header>
<nav>
<ul>
<li>
<button
title="색 바꾸기"
onClick={changeColorScheme}
/>
</li>
{/* ... */}
</ul>
</nav>
</header>
);
}
html 요소를 찾아서, theme 값을 토글합니다.