Terms of Service Privacy Policy

Registry Health Inspect

VeloBits Theme – shadcn/ui Theme by velobits | shadcnregistry

Registries
velobits
VeloBits Theme

VeloBits Theme

theme

The full token layer as CSS variables. Every colour pair here is contrast-verified in both themes by the @velobitsio/tokens test suite.

pnpm dlx shadcn@latest add "https://ui.velobits.dev/r/velobits-theme.json"

Light Mode

--bg:

#EFEDEA

--bg2:

#E1DFDC

--panel:

#FFFFFF

--elevated:

#FFFFFF

--fg:

#2A2B2A

--muted-fg:

#61605F

--muted-on-glass:

#474645

--border:

#C4C2C0

--field-border:

#838180

--primary:

#007ACC

--primary-hover:

#0062A3

--on-primary:

#FFFFFF

--primary-text:

#0062B3

--primary-soft:

rgba(0, 122, 204, 0.10)

--brand:

#C8F135

--on-brand:

#2A2B2A

--brand-hover:

#BCE52B

--brand-soft:

rgba(200, 241, 53, 0.18)

--accent-text:

#582840

--code:

#101828

--on-code:

#7DF3B1

--ring:

#007ACC

--highlight:

rgba(42, 43, 42, 0.05)

--overlay:

rgba(27, 27, 26, 0.45)

--success:

#226E25

--success-soft:

rgba(34, 110, 37, 0.12)

--danger:

#B82A24

--danger-soft:

rgba(184, 42, 36, 0.10)

--on-danger:

#FFFFFF

--danger-hover:

#9E231E

--warning:

#954800

--warning-soft:

rgba(149, 72, 0, 0.12)

--info:

#256262

--info-soft:

rgba(37, 98, 98, 0.12)

--rose:

#9B3E6B

--rose-soft:

rgba(155, 62, 107, 0.12)

--chart-1:

#1D82D2

--chart-2:

#6F8714

--chart-3:

#BC5F8D

--chart-4:

#AF7011

--chart-5:

#368A8A

--chrome:

#592941

--chrome-fg:

#EEECE9

--chrome-muted-fg:

#C4C2C0

--chrome-border:

#61605F

--chrome-highlight:

rgba(255, 255, 255, 0.08)

--chrome-accent:

#C8F135

--chrome-accent-soft:

rgba(200, 241, 53, 0.16)

Dark Mode

--bg:

#161615

--bg2:

#2D2D2C

--panel:

#2D2D2C

--elevated:

#592941

--fg:

#EEECE9

--muted-fg:

#A4A3A1

--muted-on-glass:

#E1DFDC

--border:

#373636

--field-border:

#838180

--primary:

#007ACC

--primary-hover:

#1177BB

Theme

--radius-sm:

4px

--radius-md:

6px

--radius-lg:

10px

--radius-xl:

14px

--radius-2xl:

20px

--radius-pill:

999px

--container-page:

72rem

--duration-micro:

120ms

--duration-enter:

180ms

--duration-overlay:

240ms

--duration-page:

320ms

--on-primary:

#FFFFFF

--primary-text:

#4AACFF

--primary-soft:

rgba(0, 122, 204, 0.22)

--brand:

#C8F135

--on-brand:

#2A2B2A

--brand-hover:

#BCE52B

--brand-soft:

rgba(200, 241, 53, 0.16)

--accent-text:

#C8F135

--code:

#101828

--on-code:

#7DF3B1

--ring:

#3094E8

--highlight:

rgba(238, 236, 233, 0.06)

--overlay:

rgba(15, 15, 14, 0.60)

--success:

#7FB86B

--success-soft:

rgba(127, 184, 107, 0.12)

--danger:

#FF7F79

--danger-soft:

rgba(255, 127, 121, 0.12)

--on-danger:

#2A2B2A

--danger-hover:

#FF9A95

--warning:

#E0C060

--warning-soft:

rgba(224, 192, 96, 0.12)

--info:

#6FBAB9

--info-soft:

rgba(111, 186, 185, 0.12)

--rose:

#DA8FB2

--rose-soft:

rgba(218, 143, 178, 0.12)

--chart-1:

#2387D7

--chart-2:

#738C1B

--chart-3:

#C06492

--chart-4:

#B37519

--chart-5:

#3B8F8E

--chrome:

#592941

--chrome-fg:

#EEECE9

--chrome-muted-fg:

#C4C2C0

--chrome-border:

#61605F

--chrome-highlight:

rgba(255, 255, 255, 0.08)

--chrome-accent:

#C8F135

--chrome-accent-soft:

rgba(200, 241, 53, 0.16)

--ease-out:

cubic-bezier(0.32, 0.72, 0, 1)

--ease-in:

cubic-bezier(0.4, 0, 1, 1)