Skip to main content

Customization

Nocturne ships with a premium design out of the box. But you can make it yours.

This section covers:

FileWhat It Controls
src/css/nocturne.cssColors, fonts, layout, spacing
src/components/React components
docusaurus.config.tsTheme settings

What You Can Customize​

Colors​

Nocturne uses CSS variables. Change one variable, update everywhere.

Fonts​

Serif for headings, sans for body. Swap them in the CSS.

Layout​

Sidebar width, content width, spacing — all in the CSS.

Components​

React components for navbar, footer, blog list, homepage sections.

Dark Mode​

Nocturne ships dark by default. You can change the default, or disable the toggle.

Before You Start​

Customization means editing code. You'll need:

  • A text editor — VS Code recommended
  • Basic familiarity with CSS
  • Basic familiarity with React (for components)

If you're not comfortable editing code, use Decap CMS for content changes instead.

  1. Colors — start here, biggest visual impact
  2. Fonts — next, defines the feel
  3. Layout — spacing, widths, grid
  4. Components — only if you need custom behavior

Don't change everything at once. Change one thing, see the result, iterate.

File Structure​

src/
├── css/
│   └── nocturne.css        ← Main stylesheet
├── components/
│   ├── Home/               ← Homepage sections
│   ├── Blog/               ← Blog components
│   └── ...
├── data/                   ← JSON data files
└── pages/                  ← Static pages

What's Next?​

Start with the theme — colors, fonts, layout.

👉 Next: Theme →