Building a DOS Theme for Hugo

This post documents the process of creating a text-mode Hugo theme from scratch - no Bootstrap, no npm, just Hugo and SCSS.

Design Decisions

The key insight was that a DOS text-mode interface is actually simpler than modern web design. No gradients, no rounded corners, no subtle shadows. Just:

  1. A fixed-width monospace font
  2. A 16-color palette
  3. Box-drawing borders (single and double)
  4. Drop shadows made of solid color blocks

The CGA Palette

The entire theme uses only 16 colors from the original CGA adapter:

PALETTE.PNG
EGA Color Palette
The original EGA 16-color palette

These 16 colors were enough to create every DOS interface you remember.

CSS Tricks

Box Shadows for Depth

In DOS, windows had a “shadow” on the right and bottom edges. We achieve this with CSS:

.dos-window {
  border: 6px double white;
  box-shadow: 10px 10px black;
}

The original text-decoration: blink is deprecated, so we use CSS animations:

@keyframes blink {
  0%, 49% { visibility: visible; }
  50%, 100% { visibility: hidden; }
}

Buttons with Decorators

The iconic < Button > uses pseudo-elements:

.btn::before { content: "< "; }
.btn::after  { content: " >"; }

Progressive Enhancement

The theme works without JavaScript. When JS is available, you get:

Boot animation - the blue screen reveal effect
Code copy buttons - click to copy blocks or individual lines
This is what an error alert looks like in the theme

Here are some interfaces that inspired this theme:

DOSGRID.PNG
DOS character grid reference
DOS character grid - every pixel is on a strict 8x14 grid

What’s Next

Future plans include:

  • CRT scanline effect via CSS background patterns
  • More color schemes (Commodore 64, ZX Spectrum)
  • Progressive JS enhancements
  • Text browser compatibility
  • Color scheme picker

640K ought to be enough for anybody. - Misattributed to Bill Gates