Hacker Theme Showcase

Terminal Aesthetics, Serious Content

// background: connected-nodes-blue.jpg

Opening

The hacker theme is designed for technical presentations — backend engineering, system architecture, and code-heavy talks. It uses JetBrains Mono for code, an indigo/purple palette, and optional background images for visual impact.

System Architecture

How the pieces fit together

Section: Architecture

Section slides use the circuit-board-dark.jpg background image automatically. The h1 gets the theme's indigo accent color with a matching border. Use section slides to break your talk into logical chapters.

Under the Hood

// TEMPLATE ENGINE

slyds uses templar for include resolution — each slide is composed into index.html via {{# include #}} directives at build time.

Key insight: Slides are pure HTML fragments. No template syntax in slide files — only index.html uses templar directives. This keeps slides portable and editable with any HTML tool.

// BUILD PIPELINE

Template Engine

The nerdy-bg class adds the abstract-purple-waves.jpg background with a dark overlay. Use this for deep-dive technical content. The h3 elements render in JetBrains Mono uppercase — great for section labels within a slide.

Deployment

// ZERO INFRASTRUCTURE

The built output is a single HTML file with everything inlined:

Asset Strategy Result
CSS <link> → <style> Embedded in document
JavaScript <script src> → inline Embedded in document
Images File → base64 data URI Embedded in document
Fonts CSS @import (remote) Loaded at view time
Host anywhere: GitHub Pages, S3, email the file, open from disk — it just works.

Deployment

The server-bg class adds the server-rack-blue.jpg background — perfect for infrastructure and deployment topics. The table uses the hacker theme's monospace headers with indigo accent colors. Note how the hover effect highlights rows.

Live Code

// CONTENT ACCESS VIA CSS SELECTORS

// Read slide content with CSS selectors
$ slyds query slides/01-title.html "h1"
Hacker Theme Showcase

// Modify content safely through the DOM
$ slyds query slides/01-title.html "h1" --set "New Title"

// Append content to a slide
$ slyds query slides/03-nerdy.html "ul" \
    --append "<li>New pipeline step</li>"

The slyds query command uses goquery (CSS selectors) for safe HTML access — no regex, no string hacking.

Code Demo

Code blocks in the hacker theme use JetBrains Mono with a very dark background (#0a0d14) and cyan text (#73d1ff). The pre element gets a subtle inset shadow and dark border. This is ideal for showing terminal output or code snippets.

Progress-Aware Styling

Every slide receives CSS custom properties from the engine:

Property Value Use Case
--slide-index 0-based position Conditional per-slide styling
--slide-progress 0% to 100% Gradual transitions through deck
--total-slides Slide count Relative calculations
Watch the h1 border: It shifts from indigo to cyan as you advance through slides, using color-mix(in srgb, #7b93ff, #73d1ff var(--slide-progress)).

Progress-Aware CSS

The slyds.js engine sets CSS custom properties on every slide element. Themes can use these for dynamic styling — the hacker theme shifts the h1 border color from indigo to cyan as you progress through the deck. This creates a subtle visual progression that reinforces the audience's sense of progress.

Theme Features

Visual

  • JetBrains Mono + Inter fonts
  • Indigo/purple color palette
  • 7 background images included
  • Dark overlays with backdrop blur
  • Progress-aware color shifting

Technical

  • Terminal-style code blocks
  • Monospace table headers
  • Themed callout boxes
  • Alternating slide tints
  • Custom .nerdy-bg / .server-bg

Feature Summary

The two-column layout in the hacker theme inherits the dark palette and font choices. Use it for feature comparisons, pros/cons lists, or any side-by-side content. The col-left class gets a subtle right border for visual separation.

Ship It

Build presentations that look as good as your code.

$ slyds init "My Talk" --theme hacker -n 8
$ slyds serve    # hack on slides
$ slyds build    # ship it

// background: earth-network-blue.jpg

Closing

The closing slide uses the earth-network-blue.jpg background automatically via the conclusion-slide class. End your talk with a clear call to action and the commands they need to get started. The hacker theme is designed for engineers presenting to engineers — skip the fluff, show the code.

1 /