Terminal Theme

theme

The tokens, typography, motion and CRT effects used by every component.

Provided by afterglow

Open in

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://afterglow.thebuilder.dk/r/theme.json"

Files

No files found

Styles

Light Mode

--amber:

#ffbc57

--azure:

#8dbdf5

--ember:

#ff5a65

--ink:

#e9f6f1

--ink-muted:

#87a39d

--line:

rgb(132 255 224 / 0.22)

--line-strong:

rgb(132 255 224 / 0.55)

--panel:

#0b1515

--panel-raised:

#091212

--panel-sunken:

#081210

--phosphor:

#86fadd

--phosphor-bright:

#d9ffef

--phosphor-dim:

#4d8477

--signal:

#ff5b82

--signal-soft:

#e84970

--violet:

#b890ff

--void:

#05090a

--window-bevel-dark:

#5c7269

--window-bevel-light:

#e7eeeb

--window-border:

#263d38

--window-close:

#ff5d7f

--window-collapse:

#ffd45d

--window-control:

#2b443e

--window-footer:

#536c65

--window-footer-text:

#263e38

--window-grip:

#3d554f

--window-inset:

#d8e2de

--window-rule:

#1b302b

--window-surface:

#b6c4be

--window-text:

#09100f

--window-text-muted:

#38544d

--window-titlebar-dark:

#a2b4ac

--window-titlebar-light:

#c3cfca

--window-zoom:

#68d9b4

--accent:

#17403a

--accent-foreground:

#d9ffef

--background:

#05090a

--border:

rgb(132 255 224 / 0.22)

--card:

#0b1515

--card-foreground:

#e9f6f1

--chart-1:

#86fadd

--chart-2:

#ff5b82

--chart-3:

#ffbc57

--chart-4:

#8dbdf5

--chart-5:

#b890ff

--destructive:

#ff5a65

--destructive-foreground:

#ffffff

--foreground:

#e9f6f1

--info:

#8dbdf5

--input:

rgb(132 255 224 / 0.22)

--metric:

#d9ffef

--muted:

#0d1b1a

--muted-foreground:

#87a39d

--popover:

#091212

--popover-foreground:

#e9f6f1

--primary:

#86fadd

--primary-foreground:

#05090a

--radius:

0rem

--ring:

#d9ffef

--scrim:

rgb(1 5 6 / 0.72)

--secondary:

#10201f

--secondary-foreground:

#86fadd

--sidebar:

#091212

--sidebar-accent:

#17403a

--sidebar-accent-foreground:

#d9ffef

--sidebar-border:

rgb(132 255 224 / 0.22)

--sidebar-foreground:

#e9f6f1

--sidebar-primary:

#86fadd

--sidebar-primary-foreground:

#05090a

--sidebar-ring:

#d9ffef

--warning:

#ffbc57

Dark Mode

--amber:

#ffbc57

--azure:

#8dbdf5

--ember:

#ff5a65

--ink:

#e9f6f1

--ink-muted:

#87a39d

--line:

rgb(132 255 224 / 0.22)

--line-strong:

rgb(132 255 224 / 0.55)

--panel:

#0b1515

--panel-raised:

#091212

--panel-sunken:

#081210

Theme

--background-image-beam:

linear-gradient(180deg, transparent 44%, color-mix(in srgb, var(--phosphor) 16%, transparent) 50%, transparent 56%)

--background-image-window-grip:

repeating-linear-gradient(-45deg, transparent 0 2px, var(--window-grip) 2px 3px)

--background-image-window-titlebar:

repeating-linear-gradient(var(--window-titlebar-light) 0 1px, var(--window-titlebar-dark) 1px 3px)

--font-heading:

var(--font-mono)

--font-mono:

var(--afterglow-font-mono, ui-monospace, monospace)

--font-sans:

var(--afterglow-font-sans, ui-sans-serif, sans-serif)

--text-1xs:

0.6875rem

--text-2xs:

0.625rem

--text-3xs:

0.5625rem

CSS

--phosphor-bright:

#d9ffef

--phosphor-dim:

#4d8477

--signal-soft:

#e84970

--window-bevel-dark:

#5c7269

--window-bevel-light:

#e7eeeb

--window-border:

#263d38

--window-close:

#ff5d7f

--window-collapse:

#ffd45d

--window-control:

#2b443e

--window-footer:

#536c65

--window-footer-text:

#263e38

--window-grip:

#3d554f

--window-inset:

#d8e2de

--window-rule:

#1b302b

--window-surface:

#b6c4be

--window-text:

#09100f

--window-text-muted:

#38544d

--window-titlebar-dark:

#a2b4ac

--window-titlebar-light:

#c3cfca

--window-zoom:

#68d9b4

--accent-foreground:

#d9ffef

--background:

#05090a

--border:

rgb(132 255 224 / 0.22)

--card-foreground:

#e9f6f1

--destructive:

#ff5a65

--destructive-foreground:

#ffffff

--foreground:

#e9f6f1

--input:

rgb(132 255 224 / 0.22)

--muted-foreground:

#87a39d

--popover-foreground:

#e9f6f1

--primary-foreground:

#05090a

--scrim:

rgb(1 5 6 / 0.72)

--secondary:

#10201f

--secondary-foreground:

#86fadd

--sidebar-accent:

#17403a

--sidebar-accent-foreground:

#d9ffef

--sidebar-border:

rgb(132 255 224 / 0.22)

--sidebar-foreground:

#e9f6f1

--sidebar-primary:

#86fadd

--sidebar-primary-foreground:

#05090a

--sidebar-ring:

#d9ffef

--tracking-terminal:

0.1em

--tracking-terminal-2xl:

0.16em

--tracking-terminal-3xl:

0.18em

--tracking-terminal-lg:

0.12em

--tracking-terminal-sm:

0.08em

--tracking-terminal-xl:

0.14em

--tracking-terminal-xs:

0.06em

--color-amber:

var(--amber)

--color-azure:

var(--azure)

--color-ember:

var(--ember)

--color-ink:

var(--ink)

--color-ink-muted:

var(--ink-muted)

--color-line:

var(--line)

--color-line-strong:

var(--line-strong)

--color-panel:

var(--panel)

--color-panel-raised:

var(--panel-raised)

--color-panel-sunken:

var(--panel-sunken)

--color-phosphor:

var(--phosphor)

--color-phosphor-bright:

var(--phosphor-bright)

--color-phosphor-dim:

var(--phosphor-dim)

--color-signal:

var(--signal)

--color-signal-soft:

var(--signal-soft)

--color-violet:

var(--violet)

--color-void:

var(--void)

--color-window-bevel-dark:

var(--window-bevel-dark)

--color-window-bevel-light:

var(--window-bevel-light)

--color-window-border:

var(--window-border)

--color-window-close:

var(--window-close)

--color-window-collapse:

var(--window-collapse)

--color-window-control:

var(--window-control)

--color-window-footer:

var(--window-footer)

--color-window-footer-text:

var(--window-footer-text)

--color-window-grip:

var(--window-grip)

--color-window-inset:

var(--window-inset)

--color-window-rule:

var(--window-rule)

--color-window-surface:

var(--window-surface)

--color-window-text:

var(--window-text)

--color-window-text-muted:

var(--window-text-muted)

--color-window-titlebar-dark:

var(--window-titlebar-dark)

--color-window-titlebar-light:

var(--window-titlebar-light)

--color-window-zoom:

var(--window-zoom)

--color-accent:

var(--accent)

--color-accent-foreground:

var(--accent-foreground)

--color-background:

var(--background)

--color-border:

var(--border)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-chart-1:

var(--chart-1)

--color-chart-2:

var(--chart-2)

--color-chart-3:

var(--chart-3)

--color-chart-4:

var(--chart-4)

--color-chart-5:

var(--chart-5)

--color-destructive:

var(--destructive)

--color-destructive-foreground:

var(--destructive-foreground)

--color-foreground:

var(--foreground)

--color-info:

var(--info)

--color-input:

var(--input)

--color-metric:

var(--metric)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-popover:

var(--popover)

--color-popover-foreground:

var(--popover-foreground)

--color-primary:

var(--primary)

--color-primary-foreground:

var(--primary-foreground)

--color-ring:

var(--ring)

--color-scrim:

var(--scrim)

--color-secondary:

var(--secondary)

--color-secondary-foreground:

var(--secondary-foreground)

--color-sidebar:

var(--sidebar)

--color-sidebar-accent:

var(--sidebar-accent)

--color-sidebar-accent-foreground:

var(--sidebar-accent-foreground)

--color-sidebar-border:

var(--sidebar-border)

--color-sidebar-foreground:

var(--sidebar-foreground)

--color-sidebar-primary:

var(--sidebar-primary)

--color-sidebar-primary-foreground:

var(--sidebar-primary-foreground)

--color-sidebar-ring:

var(--sidebar-ring)

--color-warning:

var(--warning)

--animate-alarm:

terminal-alarm 2.4s var(--ease-terminal) infinite

--animate-beam:

terminal-beam 1s var(--ease-terminal) both

--animate-caret:

terminal-caret 1.1s steps(1) infinite

--animate-chart-in:

terminal-chart-in 260ms steps(6, end) both

--animate-close:

terminal-close 120ms steps(3, end) forwards

--animate-fade-in:

terminal-fade-in 140ms ease-out

--animate-fade-out:

terminal-fade-out 120ms ease-in forwards

--animate-led:

terminal-led 1.6s steps(2) infinite

--animate-line-in:

terminal-line-in 420ms var(--ease-terminal) both

--animate-open:

terminal-open 180ms steps(4, end)

--animate-pixel:

terminal-pixel 800ms linear infinite

--animate-select-fold-in-down:

terminal-select-fold-in-down 140ms steps(4, end)

--animate-select-fold-in-up:

terminal-select-fold-in-up 140ms steps(4, end)

--animate-select-fold-out-down:

terminal-select-fold-out-down 100ms steps(3, end) forwards

--animate-select-fold-out-up:

terminal-select-fold-out-up 100ms steps(3, end) forwards

--animate-slide-in-bottom:

terminal-slide-in-bottom 220ms var(--ease-terminal)

--animate-slide-in-left:

terminal-slide-in-left 220ms var(--ease-terminal)

--animate-slide-in-right:

terminal-slide-in-right 220ms var(--ease-terminal)

--animate-slide-in-top:

terminal-slide-in-top 220ms var(--ease-terminal)

--animate-slide-out-bottom:

terminal-slide-out-bottom 170ms var(--ease-terminal) forwards

--animate-slide-out-left:

terminal-slide-out-left 170ms var(--ease-terminal) forwards

--animate-slide-out-right:

terminal-slide-out-right 170ms var(--ease-terminal) forwards

--animate-slide-out-top:

terminal-slide-out-top 170ms var(--ease-terminal) forwards

--animate-sweep:

terminal-sweep 1.15s ease-in-out infinite

--animate-toast-in:

terminal-toast-in 180ms steps(3, end) both

--animate-toast-out:

terminal-toast-out 100ms steps(2, end) forwards

--animate-type:

terminal-type 560ms steps(24) both

--ease-terminal:

cubic-bezier(0.2, 0.7, 0.3, 1)

--shadow-glow:

0 0 18px color-mix(in srgb, var(--phosphor) 18%, transparent)

--shadow-glow-destructive:

0 0 18px color-mix(in srgb, var(--destructive) 20%, transparent)

--shadow-glow-progress:

0 0 12px color-mix(in srgb, var(--phosphor) 50%, transparent)

--shadow-glow-signal:

0 0 34px 2px color-mix(in srgb, var(--signal) 55%, transparent)

--shadow-glow-slider:

0 0 10px color-mix(in srgb, var(--phosphor) 35%, transparent)

--shadow-glow-slider-hover:

0 0 14px color-mix(in srgb, var(--phosphor) 60%, transparent)

--shadow-glow-slider-track:

0 0 10px color-mix(in srgb, var(--phosphor) 45%, transparent)

--shadow-glow-strong:

0 0 34px 2px color-mix(in srgb, var(--phosphor) 40%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--phosphor) 20%, transparent)

--shadow-kbd:

0 2px 0 rgb(0 0 0 / 0.45)

--shadow-panel:

0 2rem 5rem rgb(0 0 0 / 0.7), 0 0 50px color-mix(in srgb, var(--phosphor) 8%, transparent)

--shadow-panel-signal:

0 2rem 5rem rgb(0 0 0 / 0.7), 0 0 50px color-mix(in srgb, var(--signal) 10%, transparent)

--shadow-signal-control:

inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 18px color-mix(in srgb, var(--signal) 12%, transparent)

--shadow-window:

0 2rem 8rem #000

--text-shadow-phosphor:

0 0 8px color-mix(in srgb, var(--phosphor) 35%, transparent)

--text-shadow-signal:

0 0 10px rgb(255 91 130 / 0.45)