Skip to main content

Configuration

The Hoverkraft theme now inherits from @docusaurus/theme-classic and focuses on providing consistent brand styling through CSS and static assets. There are no special hoverkraft theme options — the theme is intentionally opinionated about branding.

Version Compatibility

Theme VersionDocusaurus VersionReact VersionNode VersionStatus
1.0.03.x19.x≥18.0✅ Stable
0.1.13.x19.x≥18.0✅ Stable
0.1.03.x19.x≥18.0⚠️ Package issue - use 0.1.1+

Upgrading

When upgrading the theme:

# Check current version
npm list @hoverkraft/docusaurus-theme

# Update to latest
npm update @hoverkraft/docusaurus-theme

# Or install specific version
npm install @hoverkraft/docusaurus-theme@1.0.0

Breaking Changes:

  • None in current versions

Deprecations:

  • HoverkraftHero.brandedText prop - use HoverkraftBrandHighlight component instead

How the theme is applied

The theme is activated by listing @hoverkraft/docusaurus-theme in the themes array of your site configuration. See the installation guide for the step-by-step snippet.

Once enabled, the package delegates runtime behavior (color mode, Prism, etc.) to @docusaurus/theme-classic and layers Hoverkraft-specific CSS overrides and static assets on top.

What you can and can't change

  • You can use standard Docusaurus configuration (navbar, footer, presets, etc.).
  • Visual changes are expected to be done via CSS overrides in your site src/css/custom.css.
  • Structural or functional changes require swizzling the relevant component (for example Logo, Layout, or Footer).

Applying custom CSS

Add your visual overrides to src/css/custom.css in your site. Example:

/* src/css/custom.css */
.navbar__brand img {
max-height: 36px;
}
.footer {
padding-top: 2rem;
}

Swizzling

To modify theme components directly, swizzle them into your site:

npx docusaurus swizzle @hoverkraft/docusaurus-theme <ComponentName> --typescript

After swizzling, you'll have a local copy of the component inside your site (src/theme/), and you must maintain compatibility with future theme updates.

Migration notes

If you are upgrading from a previous version that exposed more customization, follow these steps:

  1. Remove legacy hoverkraft entries from themeConfig.
  2. Move any visual overrides into src/css/custom.css.
  3. If you relied on custom components, swizzle them into your project and adjust as needed.

Troubleshooting

For publishing or workspace build issues—such as missing assets after installation—follow the migration guide troubleshooting steps so there is a single source of truth for those commands.