Theming

CSS maxsus xususiyatlarini o‘zgartirib VeloxUI ko‘rinishi va uslubini moslashtiring. Preset tanlang, ranglarni sozlang va yaratilgan CSS’ni nusxalang.

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

Ilovangizning global uslublar faylida CSS o‘zgaruvchilarini o‘zgartiring:

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

Yoki ma’lum konteyner doirasiga cheklang:

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

All Variables Reference

Variable	Default (Light)	Default (Dark)	Description
--background	#ffffff	#09090b	Sahifa foni
--foreground	#09090b	#fafafa	Standart matn rangi
--primary	#18181b	#fafafa	Asosiy amallar
--primary-foreground	#fafafa	#18181b	Primary ustidagi matn
--primary-hover	#27272a	#e4e4e7	Primary hover
--secondary	#f4f4f5	#27272a	Ikkinchi darajali amallar
--secondary-foreground	#18181b	#fafafa	Secondary ustidagi matn
--secondary-hover	#e4e4e7	#3f3f46	Secondary hover
--destructive	#ef4444	#dc2626	Xavfli / o‘chirish
--destructive-foreground	#fafafa	#fafafa	Destructive ustidagi matn
--destructive-hover	#dc2626	#ef4444	Destructive hover
--muted	#f4f4f5	#27272a	So‘nik fonlar
--muted-foreground	#71717a	#a1a1aa	Ikkinchi darajali matn
--accent	#f4f4f5	#27272a	Hover fonlari
--accent-foreground	#18181b	#fafafa	Accent ustidagi matn
--border	#e4e4e7	rgba(255 255 255 / 0.1)	Chegara rangi
--input	#e4e4e7	rgba(255 255 255 / 0.15)	Input chegarasi
--ring	#18181b	#d4d4d8	Fokus halqasi
--radius	0.625rem	0.625rem	Chegara radiusi
--sidebar-bg	#ffffff	#09090b	Sidebar foni
--sidebar-fg	#09090b	#fafafa	Sidebar matni
--sidebar-border	#e4e4e7	rgba(255 255 255 / 0.1)	Sidebar chegarasi
--sidebar-muted	#f4f4f5	#27272a	Sidebar’ning so‘nik foni
--sidebar-muted-fg	#71717a	#a1a1aa	Sidebar’ning so‘nik matni
--sidebar-accent	#f4f4f5	#27272a	Sidebar hover foni
--sidebar-accent-fg	#18181b	#fafafa	Sidebar hover matni
--sidebar-item-fg	#71717a	#a1a1aa	Element matn rangi
--sidebar-item-hover-fg	#09090b	#fafafa	Element hover matni
--sidebar-item-hover-bg	#f4f4f5	#27272a	Element hover foni
--sidebar-item-active-bg	var(--primary)	var(--primary)	Element aktiv foni
--sidebar-item-active-fg	var(--primary-fg)	var(--primary-fg)	Element aktiv matni
--shadow-xs	0 1px 2px ...	—	Juda kichik soya
--shadow-sm	0 1px 3px ...	—	Kichik soya

Dark Mode

<html> yoki root elementingizga dark klassini qo‘shing:

<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;
}