[ [0xB1] Extras ] Theme Gallery

Theme Gallery

> Explore all 12 terminal themes with live previews and instant switching.

Overview

[ [0xB1] STATUS ]

Interactive gallery showcasing all themes: 5 CRT phosphor, 6 retro computer themes, and 1 minimal black & white. Click any theme to instantly preview it across the entire site.

Features

[ [0x01] 12_COMPLETE_ ]

STATUS: READY

DESC: CRT, Retro, Minimal

[ [0x02] LIVE_PREVIEW ]

STATUS: READY

DESC: See before you select

[ [0x03] OKLCH_COLORS ]

STATUS: READY

DESC: Perceptually uniform

[ [0x04] WCAG_2.2_AA ]

STATUS: READY

DESC: Fully accessible

Usage

[ [0xE6] SELECT A THEME ]

Click any theme card to instantly apply it

1// Theme is automatically applied to:
2// 1. All UI components
3// 2. All marketing pages
4// 3. All docs pages
5// 4. Charts and data visualizations
6
7// No code changes needed!

[ [0x78] THEME PERSISTENCE ]

Selected theme is saved to localStorage

1// Automatic localStorage save
2localStorage.setItem('theme', 'gameboy');
3
4// Retrieved on page load
5const savedTheme = localStorage.getItem('theme');
6document.documentElement.setAttribute('data-theme', savedTheme);

[ [0x53] PROGRAMMATIC THEME SWITCHING ]

Change themes programmatically

1// Update theme attribute
2document.documentElement.setAttribute('data-theme', 'c64');
3
4// All components automatically update
5// No re-render needed

Interactive Theme Gallery

[ [0xBB] THEME GALLERY ]

Click any theme below to instantly preview it across the entire site. Your selection is automatically saved to localStorage.

[0xgr] GREEN CRT[CRT]

Classic green phosphor terminal

[PREVIEW]:

PRIMARYOUTLINE

[0xre] RED CRT[CRT]

Warm red monochrome display

[PREVIEW]:

PRIMARYOUTLINE

[0xbl] BLUE CRT[CRT]

Cool blue terminal aesthetic

[PREVIEW]:

PRIMARYOUTLINE

[0xam] AMBER CRT[CRT]

Vintage amber monochrome

[PREVIEW]:

PRIMARYOUTLINE

[0xpu] PURPLE CRT[CRT]

Retro purple phosphor

[PREVIEW]:

PRIMARYOUTLINE

[0xga] GAME BOY[RETRO]

DMG-01 LCD green

[PREVIEW]:

PRIMARYOUTLINE

[0xc6] COMMODORE 64[RETRO]

Iconic C64 blue

[PREVIEW]:

PRIMARYOUTLINE

[0xgb] GAME BOY POCKET[RETRO]

Monochrome LCD

[PREVIEW]:

PRIMARYOUTLINE

[0xvi] VIC-20[RETRO]

Cyan Commodore display

[PREVIEW]:

PRIMARYOUTLINE

[0xat] ATARI 800[RETRO]

Classic Atari blue

[PREVIEW]:

PRIMARYOUTLINE

[0xsp] ZX SPECTRUM[RETRO]

Sinclair bright mode

[PREVIEW]:

PRIMARYOUTLINE

[0xbw] BLACK & WHITE[MINIMAL]

Pure grayscale aesthetic

[PREVIEW]:

PRIMARYOUTLINE

[INFO]: All 12 themes use OKLCH color space for perceptual uniformity. Themes automatically adapt component styling, maintaining WCAG 2.2 AA accessibility compliance.

Theme Categories

[ [0xBA] CRT PHOSPHOR (5 THEMES) ]

├─ Green CRT: Classic green phosphor terminal

├─ Red CRT: Warm red monochrome display

├─ Blue CRT: Cool blue terminal aesthetic

├─ Amber CRT: Vintage amber monochrome

└─ Purple CRT: Retro purple phosphor

[ [0x10] RETRO COMPUTER (6 THEMES) ]

├─ Game Boy: DMG-01 iconic LCD green

├─ Commodore 64: Classic C64 blue

├─ Game Boy Pocket: Monochrome silver LCD

├─ VIC-20: Cyan Commodore display

├─ Atari 800: Vintage Atari blue

└─ ZX Spectrum: Sinclair bright mode

[ [0xB8] MINIMAL (1 THEME) ]

└─ Black & White: Pure grayscale aesthetic

Technical Details

[ [0x69] OKLCH COLOR SYSTEM ]

All themes use OKLCH (Oklab Lightness Chroma Hue) color space for perceptually uniform color mixing and gradients.

Format: oklch(lightness% chroma hue)

Example: oklch(40% 0.25 140)

Benefits: Better dark mode, reliable gradients, perceptual uniformity

[ [0xB3] ACCESSIBILITY COMPLIANCE ]

All 12 themes pass WCAG 2.2 AA accessibility requirements:

✓ Text contrast ≥4.5:1 (normal text)

✓ Non-text contrast ≥3:1 (borders, controls)

✓ Focus indicators visible on all themes

✓ Status colors distinguishable

Usage

[ [0xE6] SELECT A THEME ]

Click any theme card to instantly apply it

1// Theme is automatically applied to:
2// 1. All UI components
3// 2. All marketing pages
4// 3. All docs pages
5// 4. Charts and data visualizations
6
7// No code changes needed!

[ [0x78] THEME PERSISTENCE ]

Selected theme is saved to localStorage

1// Automatic localStorage save
2localStorage.setItem('theme', 'gameboy');
3
4// Retrieved on page load
5const savedTheme = localStorage.getItem('theme');
6document.documentElement.setAttribute('data-theme', savedTheme);

[ [0x53] PROGRAMMATIC THEME SWITCHING ]

Change themes programmatically

1// Update theme attribute
2document.documentElement.setAttribute('data-theme', 'c64');
3
4// All components automatically update
5// No re-render needed

Interactive Theme Gallery

[ [0xBB] THEME GALLERY ]

Click any theme below to instantly preview it across the entire site. Your selection is automatically saved to localStorage.

[0xgr] GREEN CRT[CRT]

Classic green phosphor terminal

[PREVIEW]:

PRIMARYOUTLINE

[0xre] RED CRT[CRT]

Warm red monochrome display

[PREVIEW]:

PRIMARYOUTLINE

[0xbl] BLUE CRT[CRT]

Cool blue terminal aesthetic

[PREVIEW]:

PRIMARYOUTLINE

[0xam] AMBER CRT[CRT]

Vintage amber monochrome

[PREVIEW]:

PRIMARYOUTLINE

[0xpu] PURPLE CRT[CRT]

Retro purple phosphor

[PREVIEW]:

PRIMARYOUTLINE

[0xga] GAME BOY[RETRO]

DMG-01 LCD green

[PREVIEW]:

PRIMARYOUTLINE

[0xc6] COMMODORE 64[RETRO]

Iconic C64 blue

[PREVIEW]:

PRIMARYOUTLINE

[0xgb] GAME BOY POCKET[RETRO]

Monochrome LCD

[PREVIEW]:

PRIMARYOUTLINE

[0xvi] VIC-20[RETRO]

Cyan Commodore display

[PREVIEW]:

PRIMARYOUTLINE

[0xat] ATARI 800[RETRO]

Classic Atari blue

[PREVIEW]:

PRIMARYOUTLINE

[0xsp] ZX SPECTRUM[RETRO]

Sinclair bright mode

[PREVIEW]:

PRIMARYOUTLINE

[0xbw] BLACK & WHITE[MINIMAL]

Pure grayscale aesthetic

[PREVIEW]:

PRIMARYOUTLINE

[INFO]: All 12 themes use OKLCH color space for perceptual uniformity. Themes automatically adapt component styling, maintaining WCAG 2.2 AA accessibility compliance.

Theme Categories

[ [0xBA] CRT PHOSPHOR (5 THEMES) ]

├─ Green CRT: Classic green phosphor terminal

├─ Red CRT: Warm red monochrome display

├─ Blue CRT: Cool blue terminal aesthetic

├─ Amber CRT: Vintage amber monochrome

└─ Purple CRT: Retro purple phosphor

[ [0x10] RETRO COMPUTER (6 THEMES) ]

├─ Game Boy: DMG-01 iconic LCD green

├─ Commodore 64: Classic C64 blue

├─ Game Boy Pocket: Monochrome silver LCD

├─ VIC-20: Cyan Commodore display

├─ Atari 800: Vintage Atari blue

└─ ZX Spectrum: Sinclair bright mode

[ [0xB8] MINIMAL (1 THEME) ]

└─ Black & White: Pure grayscale aesthetic

Technical Details

[ [0x69] OKLCH COLOR SYSTEM ]

All themes use OKLCH (Oklab Lightness Chroma Hue) color space for perceptually uniform color mixing and gradients.

Format: oklch(lightness% chroma hue)

Example: oklch(40% 0.25 140)

Benefits: Better dark mode, reliable gradients, perceptual uniformity

[ [0xB3] ACCESSIBILITY COMPLIANCE ]

All 12 themes pass WCAG 2.2 AA accessibility requirements:

✓ Text contrast ≥4.5:1 (normal text)

✓ Non-text contrast ≥3:1 (borders, controls)

✓ Focus indicators visible on all themes

✓ Status colors distinguishable