Theme

Nocturne's theme lives in CSS variables. Change one variable, update the entire site.

This page shows you where to change what.

---

File Location

src/css/nocturne.css

This is the main stylesheet. All CSS variables are at the top.

---

Colors

Nocturne uses CSS variables for colors. Open nocturne.css and look for :root:

:root {
  --nocturne-bg: #0a0a0a;
  --nocturne-bg-secondary: #141414;
  --nocturne-text: #f5f1ea;
  --nocturne-text-muted: #a8a29e;
  --nocturne-accent: #6b8e5a;
  --nocturne-accent-hover: #7fa36c;
  --nocturne-border: #2a2a2a;
  --nocturne-border-strong: #3a3a3a;
}

Variable	What It Controls
--nocturne-bg	Main background
--nocturne-bg-secondary	Cards, sections
--nocturne-text	Main text
--nocturne-text-muted	Secondary text
--nocturne-accent	Links, buttons, highlights
--nocturne-accent-hover	Hover state
--nocturne-border	Subtle borders
--nocturne-border-strong	Emphasized borders

Changing a Color

Open nocturne.css, find the variable, change the value:

:root {
  --nocturne-accent: #d4a574;     /* from green to gold */
}

Save. The site updates instantly.

Light Mode Colors

Nocturne has a light mode too:

[data-theme='light'] {
  --nocturne-bg: #f5f1ea;
  --nocturne-bg-secondary: #ffffff;
  --nocturne-text: #1a1a1a;
  --nocturne-text-muted: #6b6b6b;
  --nocturne-accent: #4a5d4e;
  --nocturne-border: #e0dcd5;
}

Change these to customize light mode separately.

---

Fonts

Nocturne uses two font families:

• Serif — for headings
• Sans — for body text

Defined in nocturne.css:

:root {
  --nocturne-font-serif: 'Playfair Display', Georgia, serif;
  --nocturne-font-sans: 'Inter', -apple-system, sans-serif;
}

Changing a Font

Replace the font name:

:root {
  --nocturne-font-serif: 'Cormorant Garamond', Georgia, serif;
}

Loading a New Font

Nocturne loads fonts from docusaurus.config.ts:

themeConfig: {
  // Not configured by default — add your own font loading
}

Add the font via Google Fonts in src/css/nocturne.css:

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&display=swap');

Then set the variable to use it.

---

Layout

Layout settings in nocturne.css:

:root {
  --nocturne-max-width: 1400px;
  --nocturne-content-width: 720px;
  --nocturne-sidebar-width: 280px;
  --nocturne-radius: 12px;
  --nocturne-spacing: 1.5rem;
}

Variable	What It Controls
--nocturne-max-width	Page max width
--nocturne-content-width	Main content max width
--nocturne-sidebar-width	Sidebar width
--nocturne-radius	Border radius
--nocturne-spacing	Base spacing

Changing Layout

:root {
  --nocturne-content-width: 820px;    /* wider content */
  --nocturne-radius: 0;                /* square corners */
}

---

Dark Mode Default

Nocturne uses dark mode by default. To change:

docusaurus.config.ts:

themeConfig: {
  colorMode: {
    defaultMode: 'light',     // or 'dark'
    disableSwitch: false,
    respectPrefersColorScheme: true,
  },
},

Setting	What It Does
defaultMode	Initial theme
disableSwitch	Hide the theme toggle
respectPrefersColorScheme	Follow OS setting

---

Common Customizations

Change Accent to Gold

:root {
  --nocturne-accent: #d4a574;
  --nocturne-accent-hover: #e0b88a;
}

Use System Fonts Only

:root {
  --nocturne-font-serif: Georgia, serif;
  --nocturne-font-sans: -apple-system, system-ui, sans-serif;
}

Wider Content

:root {
  --nocturne-content-width: 900px;
}

Remove Border Radius

:root {
  --nocturne-radius: 0;
}

---

Testing Your Changes

1. Save the CSS file
2. The dev server reloads automatically
3. Check both dark and light mode
4. Check mobile view
5. Run npm run build to verify production

---

Troubleshooting

Colors don't change

1. Check the variable name — must match exactly
2. Check that you edited :root — not a specific selector
3. Refresh with Ctrl + Shift + R

Font doesn't load

1. Check the @import URL
2. Check the font name — must match the font family exactly
3. Check the browser DevTools → Network tab

Light mode looks broken

1. Check [data-theme='light'] section
2. Make sure all variables are defined
3. Check contrast ratios

Layout is too wide / narrow

Adjust --nocturne-content-width and --nocturne-max-width.

---

What's Next?

Now let's customize the React components.

👉 Next: Components →