Theme: Retro Terminal
Phosphor-monitor aesthetic — maximum commitment. Requires config/wirekit.php → 'sans' => 'vt323':
/* WireKit Theme: Retro Terminal — Phosphor-monitor aesthetic.
Fully self-contained color palette — inherits NOTHING from Default.
No .dark override block — this theme IS a dark theme.
⚠ If your app uses class="dark" for dark-mode toggling, wrap
the entire block in @layer theme { .dark { ... } } instead of
@theme, so Default's .dark values don't override Retro tokens.
Prerequisite: config/wirekit.php → 'sans' => 'vt323'
All colors WCAG AA/AAA verified on #0d0d0d (inline ratios). */
@theme {
/* Radius — null. */
--radius-wk: 0px;
/* Shadows — phosphor glow, not box-shadow. */
--shadow-wk-sm: none;
--shadow-wk-md: 0 0 8px rgba(0, 255, 65, 0.15);
--shadow-wk-lg: 0 0 16px rgba(0, 255, 65, 0.2);
/* Font — VT323: pixel font inspired by DEC VT320 terminal.
Only Regular (400) available — heading-weight and body-weight
both 400. 0.06em tracking for pixel-font breathing room. */
--font-wk-sans: 'VT323', 'Courier New', monospace;
--font-wk-mono: 'VT323', 'Courier New', monospace;
--font-wk-heading-weight: 400;
--font-wk-body-weight: 400;
--font-wk-letter-spacing: 0.06em;
--font-wk-line-height: 1.5;
/* Text sizes — slightly larger for VT323 legibility. */
--text-wk-sm: 0.9375rem;
--text-wk-md: 1rem;
--text-wk-lg: 1.125rem;
/* Motion — none. Instant, like a real terminal. */
--transition-wk-duration: 0ms;
/* Border — 1px terminal-style lines. */
--border-wk-width: 1px;
/* Focus ring — fix: was 1px (WCAG 2.4.11 FAIL, < 2px minimum).
2px meets minimum. 0px offset: ring directly on element edge
(terminal-authentic, overrides Default's 2px gap). */
--ring-wk-width: 2px;
--ring-wk-offset: 0px;
/* Disabled opacity — lower than Default (0.5) for the dark canvas. */
--opacity-wk-disabled: 0.35;
/* Accent & Ring — #00ff41 on #0d0d0d: ~14.3:1 AAA ✓ */
--color-wk-accent: #00ff41;
--color-wk-accent-hover: #33ff66;
--color-wk-accent-content: #00ff41;
--color-wk-accent-fg: #0d0d0d;
--color-wk-ring: #00ff41;
--color-wk-ring-offset: #0d0d0d;
/* Backgrounds — near-black canvas with subtle elevation steps. */
--color-wk-bg: #0d0d0d;
--color-wk-bg-elevated: #1a1a1a;
--color-wk-bg-subtle: #1a1a1a;
--color-wk-bg-muted: #1f1f1f;
--color-wk-bg-input: #0d0d0d;
/* Text — 4 green tiers, all WCAG verified on #0d0d0d. */
--color-wk-text: #00ff41; /* ~14.3:1 AAA */
--color-wk-text-muted: #00dd38; /* ~10.9:1 AAA */
--color-wk-text-subtle: #00bb30; /* ~7.8:1 AAA */
--color-wk-text-placeholder: #009926; /* ~5.4:1 AA */
/* Borders — all ≥ 3:1 on #0d0d0d.
#00bb30: ~7.8:1 ✓ #008022: ~4.0:1 ✓ */
--color-wk-border: #00bb30;
--color-wk-border-subtle: #008022;
--color-wk-border-hover: #00ff41;
/* Form controls read --color-wk-border-strong, not --color-wk-border.
Without these the inputs render with the stock neutral gray edge — on a
phosphor-green terminal, the one element that must not look borrowed. */
--color-wk-border-strong: #00bb30; /* 7.5:1 on #0d0d0d ✓ */
--color-wk-border-strong-hover: #00ff41; /* 14.2:1 — brightens away from the fill ✓ */
--color-wk-border-error: #ff4444;
/* Danger — fix: danger-fg was inherited as white from Default.
white on #ff4444 = 3.29:1 — WCAG 1.4.3 FAIL!
#0d0d0d on #ff4444 = ~5.91:1 AA ✓
#0d0d0d on #ff6666 (hover) = ~7.13:1 AAA ✓ */
--color-wk-danger: #ff4444;
--color-wk-danger-hover: #ff6666;
--color-wk-danger-fg: #0d0d0d;
--color-wk-danger-text: #ff6666;
/* Success — explicitly set for palette consistency.
#0d0d0d on #00ff41 = ~14.3:1 AAA ✓ */
--color-wk-success: #00ff41;
--color-wk-success-hover: #33ff66;
--color-wk-success-fg: #0d0d0d;
--color-wk-success-text: #00ff41;
/* Warning — amber terminal glow.
#0d0d0d on #ffaa00 = ~10.5:1 AAA ✓ */
--color-wk-warning: #ffaa00;
--color-wk-warning-hover: #ffcc33;
--color-wk-warning-fg: #0d0d0d;
/* Info — cyan accent. #00ddff on #0d0d0d: ~12.1:1 AAA ✓ */
--color-wk-info: #00ddff;
/* Overlay & Scrollbar — green-tinted scrollbar. */
--color-wk-overlay: rgba(0, 0, 0, 0.8);
--color-wk-scrollbar-thumb: #008022;
--color-wk-scrollbar-thumb-hover: #00bb30;
--color-wk-scrollbar-track: transparent;
}
Retro Terminal uses hardcoded hex values for a complete custom color scheme — it inherits nothing from Default. VT323 is bundled with WireKit (config/wirekit.php → 'sans' => 'vt323'). Every color is WCAG AA/AAA verified against the #0d0d0d canvas — do not lower any value's lightness without re-running contrast math, or contrast drops below the AA threshold. If your app toggles class="dark", wrap the block in @layer theme { .dark { ... } } so Default's dark overrides don't win the cascade.
Design notes
Retro Terminal commits fully to a phosphor-monitor aesthetic: green-on-near-black, the VT323 pixel font, and no compromises toward a conventional look. It is a statement theme, not a quiet default — every surface reads like a CRT console.
Best for: hacker / CTF tooling, developer products, and playful or nostalgic brands. Avoid it for long-form reading or broad general audiences, where a saturated single-hue palette tires the eye.
Accessibility
Every color is WCAG-verified against the #0d0d0d background: the primary green #00ff41 is ~14.3:1 (AAA), the muted tier ~10.9:1 (AAA), and the focus ring is 2px (fixing a sub-minimum 2.4.11 area). Note that an all-green palette can be hard for some low-vision and color-vision-deficient users — if your audience is broad, offer the default theme as a switchable alternative.