Terms of Service Privacy Policy

Registry Health Inspect

Afterglow Theme – shadcn/ui Theme by afterglowui | shadcnregistry

Registries
afterglowui
Afterglow Theme

Afterglow Theme

theme

The full afterglow palette: dusk-toned surfaces with an ember, rose and violet glow.

pnpm dlx shadcn@latest add "https://afterglowui.vercel.app/r/afterglow-theme.json"

Light Mode

--background:

oklch(0.985 0.005 80)

--foreground:

oklch(0.22 0.02 285)

--card:

oklch(1 0 0)

--card-foreground:

oklch(0.22 0.02 285)

--muted:

oklch(0.955 0.008 285)

--muted-foreground:

oklch(0.5 0.02 285)

--border:

oklch(0.22 0.02 285 / 11%)

--ring:

oklch(0.68 0.19 40)

--glow:

oklch(0.7 0.19 45)

--glow-foreground:

oklch(0.22 0.05 40)

--glow-2:

oklch(0.64 0.22 12)

--glow-3:

oklch(0.56 0.21 300)

--radius:

0.875rem

--glass:

oklch(1 0 0 / 55%)

--gloss-highlight:

oklch(1 0 0 / 95%)

--gloss-shade:

oklch(0.3 0.03 285 / 10%)

--gloss-depth:

oklch(0.32 0.03 285 / 20%)

--gloss-edge:

oklch(0.22 0.02 285 / 10%)

--liquid-tint:

oklch(1 0 0 / 18%)

--liquid-fallback:

oklch(1 0 0 / 55%)

--liquid-rim:

oklch(1 0 0 / 95%)

--liquid-edge:

oklch(0.2 0.02 285 / 10%)

--liquid-shadow:

oklch(0.22 0.02 285 / 26%)

--liquid-glow:

oklch(1 0 0 / 55%)

--liquid-shade:

oklch(0.25 0.03 285 / 14%)

Dark Mode

--background:

#000000

--foreground:

oklch(0.96 0.008 80)

--card:

#171717

--card-foreground:

oklch(0.96 0.008 80)

--muted:

oklch(0.21 0 0)

--muted-foreground:

oklch(0.7 0 0)

--border:

oklch(1 0 0 / 9%)

--ring:

oklch(0.8 0.16 55)

Theme

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-border:

var(--border)

--color-ring:

var(--ring)

--color-glow:

var(--glow)

--color-glow-foreground:

var(--glow-foreground)

--color-glow-2:

--glow:

oklch(0.8 0.16 55)

--glow-foreground:

oklch(0.22 0.05 40)

--glow-2:

oklch(0.7 0.2 15)

--glow-3:

oklch(0.65 0.2 300)

--glass:

oklch(0.19 0 0 / 55%)

--gloss-highlight:

oklch(1 0 0 / 16%)

--gloss-shade:

oklch(0 0 0 / 30%)

--gloss-depth:

oklch(0.04 0 0 / 60%)

--gloss-edge:

oklch(1 0 0 / 9%)

--liquid-tint:

oklch(0.2 0 0 / 22%)

--liquid-fallback:

oklch(0.2 0 0 / 45%)

--liquid-rim:

oklch(1 0 0 / 60%)

--liquid-edge:

oklch(1 0 0 / 10%)

--liquid-shadow:

oklch(0 0 0 / 50%)

--liquid-glow:

oklch(1 0 0 / 24%)

--liquid-shade:

oklch(0 0 0 / 28%)

var(--glow-2)

--color-glow-3:

var(--glow-3)

--color-glass:

var(--glass)

--color-gloss-highlight:

var(--gloss-highlight)

--shadow-gloss:

inset 0 1px 0 0 var(--gloss-highlight), inset 0 -1px 0 0 var(--gloss-shade), 0 0 0 1px var(--gloss-edge), 0 1px 2px 0 var(--gloss-depth), 0 4px 12px -4px var(--gloss-depth)

--shadow-glass:

inset 0 1px 0 0 var(--gloss-highlight), inset 0 -10px 24px -18px var(--gloss-shade), inset 0 0 0 1px var(--gloss-edge), 0 2px 6px -1px var(--gloss-depth), 0 18px 40px -12px var(--gloss-depth)

--shadow-well:

inset 0 1px 3px 0 var(--gloss-depth), inset 0 0 0 1px var(--gloss-edge), 0 1px 0 0 var(--gloss-highlight)

--radius-sm:

calc(var(--radius) - 4px)

--radius-md:

calc(var(--radius) - 2px)

--radius-lg:

var(--radius)

--radius-xl:

calc(var(--radius) + 4px)