スタイルとテーマ設定

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

これにより、プロジェクトにすでに存在するすべての shadcn コンポーネントが、更新済みの styles.css と components.json を使用して shadcn レジストリから強制的に再インストールされ、その後ソースファイルが再フォーマットされます。これにより、コンポーネントが構築時のままの変数を保持するのではなく、すべてのコンポーネントが新しいテーマと整合した状態に保たれます。

tweakcnアンカーリンクをコピー

tweakcn は、公式テーマビルダーに代わるコミュニティ製の代替ツールです。同じ色と角の半径をカバーしつつ、フォントとシャドウのライブ編集機能も追加されており、パレットをゼロから作る代わりに使える既成プリセットのギャラリーも用意されています。また、結果を CSS 変数としてエクスポートするため、その出力を同じように styles.css に貼り付け、続けて npm run ui:reinit を実行できます。

この2つは、現在 shadcn/ui とともに最も広く使われているテーマジェネレーターです。他のツールを見つけた場合でも、重要なのはそれらが単純な CSS 変数（または shadcn レジストリコマンド）を出力するかどうかです — その形式であれば、同じように styles.css に組み込むことができます。