Стили и оформление

Шаблоны Pixi’VN создают UI с помощью shadcn/ui поверх Tailwind CSS. В отличие от обычной библиотеки компонентов, 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, уже присутствующий в вашем проекте, напрямую из реестра shadcn, используя обновлённые styles.css и components.json, а затем переформатирует исходные файлы. Это обеспечивает соответствие всех компонентов новой теме, вместо того чтобы оставлять их на тех переменных, с которыми они были изначально созданы.

tweakcnКопировать ссылку на якорь

tweakcn — это созданная сообществом альтернатива официальному конструктору тем. Он охватывает те же цвета и радиус, но также добавляет живое редактирование шрифтов и теней, а ещё поставляется с галереей готовых пресетов, от которых можно оттолкнуться, вместо того чтобы создавать палитру с нуля. Кроме того, он экспортирует результат в виде CSS-переменных, поэтому вы вставляете вывод в styles.css тем же способом и затем можете выполнить npm run ui:reinit.

Эти два инструмента — наиболее широко используемые сегодня генераторы тем для shadcn/ui. Если вы столкнётесь с другими, важно, чтобы они выводили обычные CSS-переменные (или команду реестра shadcn) — всё в этом формате точно так же подставляется в styles.css.