Customisation

Colour palette

Override the dark or light palette via themeColor / themeColorLight:

blogTheme({
  : {
    : '#fb923c',
    : '#dc2626',
    : '#1a0a00',
    : '#2d1200',
  },
  : {
    : '#c2410c',
    : '#fef9f0',
    : '#fde8c8',
  },
})

Any key you omit keeps the theme default. At runtime these are injected as CSS custom properties scoped to [data-theme="dark"] .sp-blog-root and [data-theme="light"] .sp-blog-root.

CSS custom properties

All components read these variables. Override them in your own styles for fine-grained control:

Swapping components

The scaffolded files under src/routes/ import components from @sveltepress/theme-blog/components/*. To replace one — say the post cards — edit src/routes/+page.svelte and substitute your own component:

<script lang="ts">
  import  from '$lib/MyGrid.svelte'

  const {  } = ()
</script>

< ={.posts} />

The theme re-exports these building blocks:

• @sveltepress/theme-blog/PostLayout.svelte
• @sveltepress/theme-blog/components/MasonryGrid.svelte
• @sveltepress/theme-blog/components/Timeline.svelte
• @sveltepress/theme-blog/components/Pagination.svelte
• @sveltepress/theme-blog/components/Sidebar.svelte
• @sveltepress/theme-blog/components/SearchModal.svelte
• @sveltepress/theme-blog/components/ReadingProgress.svelte
• @sveltepress/theme-blog/components/GiscusComments.svelte
• @sveltepress/theme-blog/components/RelatedPosts.svelte
• @sveltepress/theme-blog/components/TaxonomyHeader.svelte

Deploying under a subpath

Read BASE_PATH in svelte.config.js and SITE_URL in vite.config.ts:

export default {
  kit: {
    paths: {
      base: process.env.BASE_PATH ?? '',
      relative: false,
    },
  },
}

blogTheme({
  : .. ?? 'http://localhost:4173',
  // ...
})

Then build with both set, e.g. for GitHub Pages project site at user.github.io/repo/blog:

BASE_PATH=/repo/blog SITE_URL=https://user.github.io/repo/blog \
  pnpm vite build && pnpm pagefind --site dist

All internal links in the theme components use SvelteKit's $app/paths base, so they resolve correctly under the subpath. OG image URLs and RSS item URLs use SITE_URL so social crawlers get fully-qualified URLs.

Adding pages

Anything under src/routes/ that isn't reserved by the scaffolder is yours. Wrap custom pages in GlobalLayout automatically by leaving src/routes/+layout.svelte untouched — every route renders inside the sidebar + main grid.