SEED를 번들러 통합 없이 설치하고 사용하는 방법을 알아봅니다.
필요한 의존성들을 설치해요.
npm install @seed-design/react @seed-design/csspnpm add @seed-design/react @seed-design/cssyarn add @seed-design/react @seed-design/cssbun add @seed-design/react @seed-design/cssSEED의 컬러 토큰은 <html /> 태그의 data-seed-color-mode, data-seed-user-color-scheme
속성을 통해 라이트/다크모드 전환을 해요.
테마 속성에 대한 자세한 설명과 활용 방법을 확인합니다.
<html
data-seed
data-seed-color-mode="system"
data-seed-user-color-scheme="light"
>
<head>
<meta name="color-scheme" content="light dark" />
<script>
/* user-color-scheme 설정 스크립트, 필요에 따라 수정하세요 */
try {
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if ('addEventListener' in prefersDark) {
prefersDark.addEventListener('change', apply);
} else if ('addListener' in prefersDark) {
prefersDark.addListener(apply);
}
if (prefersDark.matches) {
document.documentElement.dataset.seedUserColorScheme = 'dark';
} else {
document.documentElement.dataset.seedUserColorScheme = 'light';
}
function apply() {
document.documentElement.dataset.seedUserColorScheme = prefersDark.matches ? 'dark' : 'light';
}
} catch (e) {}
</script>
</head>
</html><html
data-seed
data-seed-color-mode="light-only"
>
<head>
<meta name="color-scheme" content="light" />
<!-- ... -->
</head>
</html><html
data-seed
data-seed-color-mode="dark-only"
>
<head>
<meta name="color-scheme" content="dark" />
<!-- ... -->
</head>
</html>스타일시트 크기를 줄이기 위해 base.css 및 각 컴포넌트의 스타일시트를 따로 import할 수 있어요. 번들러를 사용하는 경우 문서 상단의 번들러 가이드를 통해 컴포넌트 스타일시트를 자동으로 로드할 수 있어요.
import "@seed-design/css/all.css";npx @seed-design/cli@latest init◇ TypeScript를 사용중이신가요?
│ Yes
│
◇ React Server Components를 사용중이신가요?
│ No
│
◇ seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│ ./seed-design아래 파일을 프로젝트 루트에 생성해주세요.
{
"rsc": false,
"tsx": true,
"path": "./seed-design"
}npx @seed-design/cli@latest add ui:action-button{
"compilerOptions": {
// ... your options
"paths": {
"seed-design/*": [
"./seed-design/*"
]
}
}
}SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.
Last updated on