Styling and Overrides

Customize a Nova site's appearance by overriding its design tokens or targeting the theme's CSS class hooks from your own stylesheet.

Summary

Nova exposes two override surfaces: design tokens (CSS custom properties) and class hooks (the nova-* class names on every themed element).

Tokens are the recommended path because one value change cascades everywhere. Class hooks handle the cases a token cannot reach.

Your stylesheet loads after the entire preset layer, so overrides win at equal specificity without !important.

Add a Custom Stylesheet

Nova does not expose a theme.customCss option. Register your stylesheet with the core Docusaurus clientModules array instead, which imports it globally on every page.

const config = {
  clientModules: [
    './src/css/custom.css',
  ],
};

Paths are resolved from the site root. The file loads after Nova's own styles — see Load Order and Specificity.

Override Design Tokens

This is the recommended approach. Redefine any --nova-* custom property inside a :root block, and the theme picks up the new value wherever that token is used.

/* Change the brand color and corner radius for every preset. */
:root {
  --nova-color-primary-600: #2563eb;
  --nova-shape-radius: 0.25rem;
}

/* Dark-mode tokens live under the dark data-theme selector. */
:root[data-theme='dark'] {
  --nova-color-primary-600: #3b82f6;
}

• Because the theme reads these variables at use time, a redefinition takes effect regardless of stylesheet order.
• The full token catalog — colors, fonts, shape, depth, motion, and grid — is listed in CSS Architecture, and color derivation is covered in Color Pipeline.

Target Class Hooks

When no token exists for what you want to change, target the element's nova-* class directly. Every block and swizzled theme component carries a descriptive class named after its role.

/* Restyle elements that have no dedicated token. */
.nova-hero {
  padding-block: 4rem;
}

.nova-admonition-icon {
  opacity: 0.6;
}

• Class names follow the pattern nova-<component>-<element> (for example, nova-blog-post-item-footer). Inspect an element in your browser devtools to find the exact hook.
• For block-level tweaks, the Nova block components also accept className and style props — see a block page such as Install Strip.

Load Order and Specificity

Your stylesheet is a site-level client module, which Docusaurus appends after every preset and theme stylesheet, including Nova's preset layer. A rule at the same specificity therefore overrides Nova's default without !important.