Rototo

Theming with Semantic Tokens

Fri, 02 Jan 2026 00:00:00 GMT

All theme variables live in src/styles.css. Components use semantic tokens — never raw palette colors:

<!-- ✅ Use semantic tokens -->
<div class="bg-card text-card-foreground border-border rounded-lg border">
  <p class="text-muted-foreground">Subtle text</p>
</div>

<!-- ❌ Don't hardcode palette colors -->
<div class="bg-seagull-100 text-seagull-900">…</div>

Making it yours

The template ships four palettes: seagull (neutral), hyacinth (primary), asparagus (secondary), and earth (accent). To rebrand:

Pick new palette names that evoke your brand.
Find-and-replace the names in src/styles.css.
Adjust the OKLCH values — the OKLCH color picker helps.

Dark mode overrides live in the .dark block of the same file.

Welcome to Indigo Static

Thu, 01 Jan 2026 00:00:00 GMT

This is a sample post living in the blog content collection at src/content/blog/. Delete it and add your own.

What ships in the box

Content collections with a zod-validated frontmatter schema
Type-safe i18n with locale-prefixed routes (/, /ja/)
Dark mode with a system/light/dark picker and no flash on load
RSS at /feed.xml and a sitemap at /sitemap-index.xml
MDX support in pages and posts

Code blocks

Shiki dual themes follow the site theme automatically:

const greeting: string = "Hello, static world";
console.log(greeting);

Where to start

Update src/consts.ts with your site's name and description.
Set site in astro.config.mjs to your production URL.
Translate the UI strings in src/translations/.
Replace this post with your own content.