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 */