Themes

Moire offers several meticulously designed themes, each with its own unique visual style and atmosphere.

Available Themes

Classic (Default)

Receipt (Retro Style)

Features:

• 🧾 Simulates the texture of paper receipts
• 📝 Monochrome black and white design

Preview:

theme: "receipt"

---

Cyberpunk (Hacker Style)

Features:

• 💻 Hacker terminal style
• ⚡ Dynamic scanline effects

Preview:

theme: "cyberpunk"

---

Academic (Formal Style)

Features:

• 🎓 Serif fonts
• 📄 Formal notebook layout

Preview:

theme: "academic"

---

Pixel (Game Style)

Features:

• 🎮 8-bit pixel art
• 🎨 Bright colors

Preview:

theme: "pixel"

Bento (Modern Style)

• Rounded card layout
• Fluid background

Preview:

theme: "bento"

How to Switch Themes

Modify the theme field in moire.config.ts:

export default {
  title: "My Blog",
  theme: "cyberpunk", // Change to your desired theme
  // ... other configs
}

Commit to GitHub and wait for the build to complete.

Custom Themes (Advanced)

If you’re familiar with frontend development or Vibe Coding, you can even create your own theme!

Theme files are located at: src/themes/your-theme/

You will need to:

1. Create an index.svelte component
2. Define CSS styles
3. Reference your-theme in the configuration

Refer to the Developer Docs for a detailed tutorial.

Theme Roadmap

Upcoming themes:

• 🌙 Midnight - Minimalist dark mode
• ✍️ Handwriting - Handwritten note style

Next Steps

Learn about Markdown support and image uploads.

Markdown Support Check out the supported Markdown syntax