Theme Press Config

Theme Config Reference ​

The table below lists the Press-specific themeConfig options. Site-wide options such as title, url, search, and lastUpdated still live under siteConfig.

Home Page ​

Use layout: home and configure the hero and features in frontmatter.

---
layout: home

title: Acme Docs

hero:
  name: Acme
  text: Build faster with Acme
  tagline: Everything you need to install, configure, and extend Acme.
  image:
    src: /logo.png
    alt: Acme Logo
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
      type: fly
    - theme: alt
      text: View on GitHub
      link: https://github.com/acme/project

features:
  - icon: i-logos:vitejs
    title: Fast
    details: Powered by Vite and Valaxy.
  - icon: i-logos:vue
    title: Extensible
    details: Use Vue components directly in Markdown.
---

hero.image follows VitePress’s ThemeableImage format. It accepts a string, a { src, alt } object, or a { light, dark, alt } object. Press does not inject a default Valaxy logo: when hero.image is omitted, the home page has no hero image. Root-absolute image paths are adjusted using the configured Vite base.

The fly action uses siteConfig.favicon for its hover icon instead of a theme-hardcoded asset.

Internal action links are adjusted automatically when i18nRouting is enabled.

Home layout and orbital visual ​

The home page uses a split layout by default, with the heading and actions on the left and hero.image on the right. Without an image, it automatically centers the content. Set hero.layout: center to explicitly choose the centered layout.

The optional orbit visual takes inspiration from Valaxy’s “V + Galaxy” identity, surrounding your logo with orbital paths and moving lights. It always uses the configured hero.image.

hero:
  name: VALAXY
  text: Next Generation Static Blog Framework
  tagline: Simple, powerful, and performant.
  layout: split
  visual: orbit
  animation: true
  image:
    src: /valaxy-logo.png
    alt: Valaxy Logo
  imageCaption: V + Galaxy
  command: pnpm create valaxy
  actions:
    - theme: brand
      text: Get started
      link: /guide/getting-started

featuresTitle: From a spark to your own universe.
featuresDescription: Focus on your words. Make it yours.

The CSS animation requires no video or WebGL. It supports manual pausing, pauses outside the viewport, and respects prefers-reduced-motion. Light and dark image variants continue to work with { light, dark, alt }.

Existing hero and features configurations require no migration. PressHome retains the home-hero-before, home-hero-after, home-features-before, home-features-after, and default slots. Override PressHomeOrbit.vue or PressHomeCommand.vue for custom visuals or command UI.

Customize the design with --pr-home-max-width, --pr-font-display, --pr-c-accent, --pr-c-orbit-glow, and --pr-c-orbit-line. The primary color still follows themeConfig.colors.primary.

Footer And Edit Link ​

The edit link appears at the bottom of article pages. :path is replaced with the current page relative path.

export default defineValaxyConfig<PressTheme.Config>({
  siteConfig: {
    lastUpdated: true,
  },
  themeConfig: {
    editLink: {
      pattern: 'https://github.com/acme/project/edit/main/docs/:path',
      text: 'Edit this page',
    },
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright (c) 2026 Acme.',
    },
  },
})

Set nav: false in page frontmatter to hide previous/next page navigation for that page.

Page Layouts ​

Press provides these common layouts:

Example archive pages:

---
title: Posts
layout: posts
---

---
title: Tags
layout: tags
---

Styling ​

Set the theme primary color through themeConfig.colors.primary:

export default defineValaxyConfig<PressTheme.Config>({
  themeConfig: {
    colors: {
      primary: '#0078E7',
    },
  },
})

You can also override Press CSS variables in your own styles:

:root {
  --pr-nav-height-mobile: 56px;
  --pr-nav-text: var(--va-c-text-1);
}

Component Customization ​

Like other Valaxy themes, Press components can be overridden by creating a component with the same name in your site. Common extension points include:

For lower-level theme authoring details, see Write A Theme.