~ /dotfiles
[🔍]

Building a Terminal-Inspired Theme with Astro

• 2 min read
#astro #tailwind #design

There’s something magical about the terminal. The blinking cursor, the monospace fonts, the satisfying click of keys. It reminds us of a simpler time in computing when every interaction felt intentional.

Why Terminal Aesthetics?

As developers, we spend countless hours in our terminals. There’s a comfort in the minimalism—no flashy animations, no distracting colors, just you and your code. This theme captures that essence while still being modern and accessible.

The Tech Stack

This theme is built with:

  • Astro - For lightning-fast static site generation
  • Tailwind CSS v4 - The new CSS-first approach
  • JetBrains Mono - The perfect coding font
  • TypeScript - Because types are nice

Key Design Decisions

Terminal Window Chrome

The classic red/yellow/green buttons immediately signal “this is a terminal.” We use them throughout the design to frame content:

.terminal-button-red { background-color: #ff5f56; }
.terminal-button-yellow { background-color: #ffbd2e; }
.terminal-button-green { background-color: #27ca40; }

The Blinking Cursor

Nothing says “terminal” like a blinking cursor. It’s subtle but adds life to the page:

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

Command-Line Headers

Instead of boring headings, we use command prompts. $ ls ~/posts is more fun than “Recent Posts.”

Getting Started

To use this theme, clone the repository and customize the colors to match your brand. The CSS variables make it easy:

.dark {
  --color-primary: #e2777a;
  --color-accent: #7ec699;
  --color-terminal-prompt: #7ec699;
}

What’s Next?

I’m planning to add:

  • Light mode support
  • Search functionality
  • More component variants
  • Animation options

Stay tuned for updates!

Thanks for reading. If you use this theme, I’d love to see what you build with it.