shadcn/ui тема
Створіть повну тему shadcn/ui зі змінними кольору HSL для світлого й темного режимів. Скопіюйте готову конфігурацію CSS прямо у ваш проєкт Next.js або React.
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
Попередній перегляд
Попередній перегляд компонентів
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}Створіть повну тему shadcn/ui зі змінними кольору HSL для світлого й темного режимів. Скопіюйте готову конфігурацію CSS прямо у ваш проєкт Next.js або React.
shadcn/ui тема показує лише елементи керування та результати, що відповідають його функції. Доступні параметри залежать від інструмента й вхідних даних.
Підтримувані формати
Як це працює
Крок 1
Відкрийте shadcn/ui тема і підготуйте дані, які запитує інтерфейс
Крок 2
Налаштуйте видимі параметри для потрібного результату
Крок 3
Перевірте результат перед копіюванням, експортом або повторним використанням
Поширені помилки, яких слід уникати
- Не вважайте формат чи опцію підтримуваними, якщо їх немає в інтерфейсі.
- Перевіряйте значення перед використанням у фірмовому стилі, інтерфейсі чи виробничому файлі.
- Для тексту й компонентів UI додатково перевіряйте контраст.
Поради від професіоналів
- Зберігайте вихідне значення разом із результатом для порівняння варіантів.
- Використовуйте формати, які інструмент реально показує, замість приблизних перетворень.
- На телефоні й планшеті дозволяйте текстам та елементам керування переноситися.
Обробка даних
Обробка залежить від використаної функції. Згода, аналітика та функції облікового запису сайту відокремлені від операції з кольором.
Що робить цей інструмент
Створіть повну тему shadcn/ui зі змінними кольору HSL для світлого й темного режимів. Скопіюйте готову конфігурацію CSS прямо у ваш проєкт Next.js або React. shadcn/ui тема зосереджується на цьому завданні й не передбачає функцій, яких немає в інтерфейсі. Використовуйте доступні елементи керування, отримайте потрібний результат і перевірте показані значення перед перенесенням в інший інструмент, таблицю стилів, макет чи документ.
Підготовка придатних даних
Почніть із даних, які запитує shadcn/ui тема: кольору, значення, зображення чи налаштування залежно від екрана. На цій сторінці вказані формати CSS, Tailwind, HSL, shadcn/ui. Якщо формат або опція не показані в інтерфейсі, не вважайте їх підтримуваними цією конкретною функцією.
Читання та перевірка результату
Читайте результат у контексті виконаної операції. Порівняйте його з вихідним значенням і перевірте налаштування, що вплинули на обчислення. Для важливої візуальної роботи також перегляньте результат у реальному інтерфейсі, де він використовуватиметься.
Робота на телефоні й планшеті
shadcn/ui тема використовує адаптивну розмітку сайту. Заголовки, підзаголовки, breadcrumbs і елементи керування можуть переноситися на вузьких екранах, щоб довгі переклади не обрізалися. Усе одно перевірте підсумок на пристрої й у контексті майбутнього використання.
Повторне використання результату
Після перевірки використовуйте лише дії, які реально пропонує shadcn/ui тема, наприклад копіювання чи експорт, якщо вони доступні. Збережіть вихідне значення для відтворення налаштування, а для кольорів UI задокументуйте їх роль і потрібний контраст.
Схожі інструменти
Посібники та інструкції
Дізнайтеся, як користуватися нашими інструментами, за допомогою детальних посібників.
shadcn-theme: практичний посібник developer
Локалізований посібник для shadcn-theme, практик developer і типових помилок.
shadcn-theme: практичний посібник developer
Локалізований посібник для shadcn-theme, практик developer і типових помилок.
shadcn-theme: практичний посібник developer
Локалізований посібник для shadcn-theme, практик developer і типових помилок.
Поширені запитання
Дізнайтеся, як користуватися нашими інструментами, за допомогою детальних посібників.