Give each project its own visual identity with custom background and text colors.

Per-project color schemes

Create unique visual identities for individual projects by setting custom background and text colors. Perfect for matching project branding or creating visual variety.

Basic syntax

Add a color field to your project's frontmatter:

---
title: "Dark Theme Project"
description: "Sleek, modern design"
color: "#111111, #ffffff"
---

Format: "background-color, text-color" (both as hex codes)

Color examples

Dark themes:

color: "#000000, #ffffff"  # Pure black, white text
color: "#1a1a2e, #eaeaea"  # Dark navy, light text
color: "#2c3e50, #ecf0f1"  # Deep blue, cream text

Light themes:

color: "#ffffff, #333333"  # White, dark text
color: "#f8f9fa, #212529"  # Light gray, charcoal text
color: "#fef9ef, #2d3436"  # Warm cream, dark text

Brand colors:

color: "#0066cc, #ffffff"  # Brand blue, white text
color: "#ff6b6b, #ffffff"  # Coral, white text
color: "#2ecc71, #ffffff"  # Emerald, white text

Using multiple colors (arrays)

You can also specify colors as an array:

---
title: "Multi-Color Project"
colors: ["#1a1a2e", "#ffffff"]
---

Where colors apply

Custom colors affect:

• Project page background
• Text color on that page
• Creates visual distinction from other projects

Best practices

• Ensure contrast — Dark background needs light text (and vice versa)
• Match branding — Use colors from the project's actual brand guidelines
• Be purposeful — Not every project needs custom colors
• Test readability — Make sure all text is easily readable

Colors in static export

Custom colors are fully preserved when you export your website. The generated HTML includes the color styles inline.