Theming

Настройте внешний вид VeloxUI, переопределив CSS-переменные. Выберите пресет, подправьте цвета и скопируйте сгенерированный CSS.

Theme Customizer

Presets

Radius

Live Preview

Create Project

Deploy your new project in one-click.

Framework

Buttons

Notifications

Info

Deployment started.

Success

Changes saved.

Warning

Disk almost full.

Controls

Dark mode

Notifications

Accept terms

Subscribe to newsletter

Radio & Rating

DefaultComfortableCompact

Rating

Tags & Badges

DefaultSuccessWarningDanger

⁵

⁹⁹

Data Table

Recent deployments.

Project	velox-api
Status	Live
Branch	main
Duration	2m 34s

Progress

Storage45%

Memory72%

CPU89%

Build100%

Bg

Primary

Secondary

Destructive

Muted

Accent

Border

Ring

Colors

Base

--background

--foreground

Primary

--primary

--primary-foreground

--primary-hover

Secondary

--secondary

--secondary-foreground

--secondary-hover

Destructive

--destructive

--destructive-foreground

--destructive-hover

Muted & Accent

--muted

--muted-foreground

--accent

--accent-foreground

Border & Input

--border

--input

--ring

Sidebar

--sidebar-bg

--sidebar-fg

--sidebar-border

--sidebar-muted

--sidebar-muted-fg

--sidebar-accent

--sidebar-accent-fg

--sidebar-item-fg

--sidebar-item-hover-fg

--sidebar-item-hover-bg

--sidebar-item-active-bg

--sidebar-item-active-fg

Generated CSS

:root {
  --radius: 0.625rem;
}

Usage

Переопределите CSS-переменные в глобальной таблице стилей приложения:

:root {
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --primary-hover: #4f46e5;
  --ring: #6366f1;
  --radius: 0.75rem;
}

Или ограничьте областью контейнера:

.my-section {
  --primary: #10b981;
  --primary-foreground: #ffffff;
  --primary-hover: #059669;
}

All Variables Reference

Variable	Default (Light)	Default (Dark)	Description
--background	#ffffff	#09090b	Фон страницы
--foreground	#09090b	#fafafa	Цвет текста по умолчанию
--primary	#18181b	#fafafa	Основные действия
--primary-foreground	#fafafa	#18181b	Текст на основном фоне
--primary-hover	#27272a	#e4e4e7	Основной при наведении
--secondary	#f4f4f5	#27272a	Вторичные действия
--secondary-foreground	#18181b	#fafafa	Текст на вторичном фоне
--secondary-hover	#e4e4e7	#3f3f46	Вторичный при наведении
--destructive	#ef4444	#dc2626	Опасность / удаление
--destructive-foreground	#fafafa	#fafafa	Текст на деструктивном фоне
--destructive-hover	#dc2626	#ef4444	Деструктивный при наведении
--muted	#f4f4f5	#27272a	Приглушённые фоны
--muted-foreground	#71717a	#a1a1aa	Второстепенный текст
--accent	#f4f4f5	#27272a	Фоны при наведении
--accent-foreground	#18181b	#fafafa	Текст на акценте
--border	#e4e4e7	rgba(255 255 255 / 0.1)	Цвет границ
--input	#e4e4e7	rgba(255 255 255 / 0.15)	Граница полей ввода
--ring	#18181b	#d4d4d8	Кольцо фокуса
--radius	0.625rem	0.625rem	Радиус границ
--sidebar-bg	#ffffff	#09090b	Фон сайдбара
--sidebar-fg	#09090b	#fafafa	Текст сайдбара
--sidebar-border	#e4e4e7	rgba(255 255 255 / 0.1)	Граница сайдбара
--sidebar-muted	#f4f4f5	#27272a	Приглушённый фон сайдбара
--sidebar-muted-fg	#71717a	#a1a1aa	Приглушённый текст сайдбара
--sidebar-accent	#f4f4f5	#27272a	Фон сайдбара при наведении
--sidebar-accent-fg	#18181b	#fafafa	Текст сайдбара при наведении
--sidebar-item-fg	#71717a	#a1a1aa	Цвет текста пункта
--sidebar-item-hover-fg	#09090b	#fafafa	Текст пункта при наведении
--sidebar-item-hover-bg	#f4f4f5	#27272a	Фон пункта при наведении
--sidebar-item-active-bg	var(--primary)	var(--primary)	Фон активного пункта
--sidebar-item-active-fg	var(--primary-fg)	var(--primary-fg)	Текст активного пункта
--shadow-xs	0 1px 2px ...	—	Очень маленькая тень
--shadow-sm	0 1px 3px ...	—	Маленькая тень

Dark Mode

Добавьте класс dark на <html> или корневой элемент:

<html class="dark">

.dark {
  --background: #09090b;
  --foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --primary-hover: #e4e4e7;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --secondary-hover: #3f3f46;
  --destructive: #dc2626;
  --destructive-foreground: #fafafa;
  --destructive-hover: #ef4444;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --border: rgba(255 255 255 / 0.1);
  --input: rgba(255 255 255 / 0.15);
  --ring: #d4d4d8;
}