Void — Screenshots¶

Visual gallery of the Void theme — real browser captures framed like macOS windows (and a phone bezel for mobile), all live from the repository.

Home¶

The home page with glass navigation, dot-matrix background, and Nothing Red accents.

Dark Mode¶

Default dark mode with pure black canvas and translucent glass panels.

Light Mode¶

Light mode with white canvas and subtle glass effects.

Search¶

Full-screen search modal with instant results and keyboard navigation.

Sidebar Navigation¶

Collapsible sidebar with section grouping and active page tracking.

Code Blocks¶

Syntax-highlighted code blocks with one-click copy button.

Mobile¶

Responsive mobile layout with drawer navigation.

Installation¶

Getting started — quick install guide.

Configuration¶

Full configuration reference for the theme and plugin.

Design Overview¶

Design language overview — glass depth and NothingOS minimalism.

Color Tokens¶

Color token system with semantic roles.

Typography¶

Dot-matrix inspired typographic scale.

Glass Effects¶

Frosted glass panels and dynamic transparency.

Buttons¶

Button styles and states.

Cards¶

Card components for content layouts.

Forms¶

Form inputs, selects, and validation states.

Plugin¶

The Void MkDocs plugin — full configuration reference.

Generating Screenshots¶

Screenshots are captured from a real headless browser (Playwright + system Chrome/Edge) and framed for a premium, product-shot look — desktop pages get macOS-style window chrome with traffic lights and a soft drop shadow, while the mobile shot is wrapped in a phone bezel with a dynamic island.

pip install playwright pillow
mkdocs serve
python tools/screenshots_gen.py --real

The tool renders every page in a real browser (JS, WebFonts, highlight.js), captures at 2× device scale for sharp high-DPI output, and never falls back to dummy placeholders:

• Light Mode is captured via prefers-color-scheme emulation plus a seeded preference.
• The Search shot opens the search modal and types a query so real results are visible.
• The Mobile shot narrows the viewport and opens the drawer navigation.

See tools/screenshots_gen.py for options: --real --wait MS, --url <server>, --scale <n>.

Back to README