Customization

Theme options

The look is configured in two places: the <Layout> props in app/layout.tsx (navbar, footer, sidebar behavior, edit links) and the neumorphic token layer in styles/neumorphic.css.

<Layout
  navbar={navbar}
  footer={footer}
  pageMap={await getPageMap()}
  docsRepositoryBase="https://github.com/your-org/your-repo/tree/main"
  sidebar={{ defaultMenuCollapseLevel: 1, toggleButton: true }}
  editLink="Edit this page on GitHub"
>
  {children}
</Layout>

Re-skinning a Nextra surface

Nextra exposes stable class hooks (.nextra-sidebar, .nextra-toc, .nextra-navbar, pre, …). Wrap any of them in the neumorphic recipe:

.nextra-sidebar {
  --_d: rgb(from var(--neu-base) calc(r * 0.84) calc(g * 0.84) calc(b * 0.84));
  --_l: rgb(from var(--neu-base) calc(r * 1.16) calc(g * 1.16) calc(b * 1.16));
  box-shadow: inset 6px 6px 12px var(--_d), inset -6px -6px 12px var(--_l);
}

Raised surfaces use outset shadows; recessed surfaces (search field, sidebar well, active nav item) use inset. Mixing the two is what sells the depth.

Changing the brand color

Swap one variable and the whole site re-tints — including every shadow:

:root { --neu-base: #ece4f0; --nextra-bg: 236 228 240; } /* soft lilac */