스타일 및 테마 설정

Pixi’VN 템플릿은 Tailwind CSS 위에 shadcn/ui로 UI를 구축합니다. 일반적인 컴포넌트 라이브러리와 달리, shadcn/ui는 패키지로 제공되지 않습니다: 컴포넌트 소스 코드는 여러분의 프로젝트(src/components/ui/ 아래)에 복사됩니다.

전체 테마 — 색상, 둥근 정도, 글꼴 등 — 는 단 하나의 파일 src/styles.css에 의해 결정됩니다.

기본 테마 빌더를 넘어서

styles.css를 직접 편집하는 대신, 시각적 도구를 사용해 전체 테마를 생성할 수 있습니다.

shadcn/ui 테마 빌더

공식 테마 빌더는 시각적 편집기입니다: 기본 색상을 선택하고, 라이트 모드와 다크 모드의 팔레트를 조정하고, 모서리 반경을 설정할 수 있으며, 실제 shadcn 컴포넌트(버튼, 카드, 입력 필드 등)의 실시간 미리보기를 제공합니다 그래서 무언가를 적용하기 전에 결과를 미리 확인할 수 있습니다. 마음에 드는 결과가 나오면, 페이지의 Copy 섹션을 여세요: 다음과 같은 형태의 바로 실행 가능한 명령어를 제공합니다:

npx shadcn@latest add <generated-command>

프로젝트 루트에서 이 명령어를 실행하면, 템플릿 → 스타일 커스터마이징에 설명된 대로 생성된 테마를 가져와 styles.css의 색상/반경 변수를 덮어씁니다.

생성된 코드를 프로젝트에 적용했다면, 다음을 실행하세요:

npm run ui:reinit

이 명령어는 업데이트된 styles.css와 components.json을 사용하여 프로젝트에 이미 있는 모든 shadcn 컴포넌트를 shadcn 레지스트리에서 강제로 다시 설치하고, 이후 소스 파일의 형식을 다시 정리합니다. 이를 통해 모든 컴포넌트가 원래 빌드될 때 사용된 변수에 그대로 남아 있는 대신, 새 테마와 일관되게 유지됩니다.

tweakcn

tweakcn은 공식 테마 빌더의 커뮤니티 제작 대안입니다. 동일한 색상과 반경을 다룰 뿐 아니라 글꼴과 그림자의 실시간 편집 기능도 추가로 제공하며, 팔레트를 처음부터 만드는 대신 시작점으로 사용할 수 있는 기성 프리셋 갤러리도 함께 제공합니다. 또한 결과를 CSS 변수로 내보내므로, 동일한 방식으로 출력 내용을 styles.css에 붙여넣은 다음 npm run ui:reinit을 실행하면 됩니다.

이 두 가지는 오늘날 shadcn/ui와 함께 가장 널리 사용되는 테마 생성기입니다. 다른 도구를 발견하더라도 중요한 점은 순수한 CSS 변수(또는 shadcn 레지스트리 명령어)를 출력한다는 것입니다 — 이 형식이라면 무엇이든 동일한 방식으로 styles.css에 적용할 수 있습니다.