Styling — Dark Theme

Website Rebuild with Astro

Chapter 5 · Styling — Dark Theme

Nothing new to introduce here — this chapter applies astro1's own Chapter 6 material directly: a global stylesheet for the site's own established dark theme, plus a scoped style block for the breadcrumb nav.

The Global Stylesheet

/* src/styles/global.css */
body {
  background: #0f1117;
  color: #c9d1d9;
  font-family: system-ui, sans-serif;
  margin: 0;
}

// src/layouts/PageLayout.astro
---
import '../styles/global.css';
// ...rest unchanged from Chapter 4
---

Imported once, in the layout every page already routes through — the same pattern astro1 Chapter 6 established.

A Scoped Style for the Breadcrumb

<nav class="breadcrumb">
  {breadcrumb.map((crumb) => <a href={`/${crumb.fullPath}`}>{crumb.title}</a>)}
</nav>

<style define:vars={{ accent: '#FF5D01' }}>
  .breadcrumb {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
  }
  .breadcrumb a {
    color: #8b949e;
    text-decoration: none;
  }
  .breadcrumb a:hover {
    color: var(--accent);
  }
</style>

Scoped automatically, with no risk of colliding with any other nav element elsewhere on the site — and define:vars binds the frontmatter's own accent color directly into the hover state, exactly as astro1 Chapter 6 demonstrated.

Nothing new — by design

This chapter is deliberately light. Every technique here — scoped styles, define:vars, a plain imported global stylesheet — was already covered in full in astro1's own Chapter 6. Applying already-known material to a real project is the point, not re-deriving it.

Hands-On Exercises

Exercise 1

Add global.css with the dark theme applied via PageLayout's own frontmatter import, and confirm it applies site-wide across every route.

📄 View solution

Exercise 2

Add a second, unrelated component with its own nav element styled differently, and confirm the breadcrumb's own scoped styles never leak into it.

📄 View solution

Exercise 3

Use define:vars to bind the accent color into the breadcrumb's own hover state, and confirm changing the frontmatter's own accent value changes the rendered hover color.

📄 View solution

Chapter 5 Quick Reference

global.css imported in the layout — applies the dark theme site-wide
Scoped styles, automatic — the breadcrumb's own rules never collide with anything else
define:vars — binds a frontmatter value into a real CSS custom property
No new material — everything here is astro1 Chapter 6, applied directly
Next chapter: The Database: Drizzle ORM