Customizing the theme

Nehalem offers several way of customization:

  • change the appearance of it (Theming)
  • change metadata
  • component shadowing


Theming relies on the component shadowing technique - which basically means you need to create a file which mirrors the original file. To change our appearance we'll have to shadow our theme.ts file.

Just create this file under src/@nehalist/gatsby-theme-nehalem/styles/theme.ts and add the following content:

const Theme: DefaultTheme = {
  layout: {
   backgroundColor: `#fafafa`,
   primaryColor: `#a4cbb8`,
   linkColor: `#a4cbb8`,
  breakpoints: {
   xs: `425px`,
   sm: `576px`,
   md: `768px`,
   lg: `992px`,
   xl: `1300px`,
  fonts: {
   base: `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, ` +
     `Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif`,
  components: {
   container: {
     width: `1260px`,
   header: {
     height: `440px`,
     background: `linear-gradient(-45deg, #44596e, #a4cbb8) repeat scroll 0 0 transparent`,

export default Theme;

And change the values to your needs.


Another way to change Nehalem is to change the siteMetadata within your gatsby-config.js. The default configuration is:

siteMetadata: {
  // Your site title
  title: `nehalem`,
  // Your site url
  siteUrl: ``,
  // Your site description
  description: `A Gatsby theme for %TOPICS%`,
  // These topics will be inserted at %TOPICS% in the description and used for the Typed component
  topics: [
  // The main menu
  menu: [
      name: 'Home',
      path: '/'
      name: 'Example',
      path: '/page'
  // Links in the footer
  footerMenu: [
      name: 'RSS',
      path: '/rss.xml'
  // En- or disable search
  search: true,
  // Basically who are you and where to find you
  author: {
    name: `nehalem`,
    description: `I'm <strong>nehalem</strong>, a Gatsby theme by 
    <a href="" rel="noopener" target="_blank"></a>. Go get me on 
    <a href="" rel="noopener" target="_blank">GitHub</a> and don't forget to leave
    a star in case you like me!`,
    social: {
      facebook: ``,
      twitter: ``,
      linkedin: ``,
      instagram: ``,
      youtube: ``,
      github: ``,
      twitch: ``

Component shadowing

In case you've never heard of component shadowing I highly recommend to read the official docs regarding this topic. (I honestly had no idea about this when I started to work on this theme)

Nehalem provides a bunch of placeholder components which are meant to be shadowed by you - even though you don't have to do this (since most things can be done by simply editing the theme and gatsby-config.js).

Available placeholder components are:

  • Original path: src/components/logo/index.tsx
  • Shadowed path would be: src/@nehalist/gatsby-theme-nehalem/components/logo/index.tsx

This is the logo shown in the navigation.


  • Original path: src/components/avatar/index.tsx
  • Shadowed path would be: src/@nehalist/gatsby-theme-nehalem/components/avatar/index.tsx

Your avatar picture shown in the bio.


  • Original path: src/components/comments/index.tsx
  • Shadowed path would be: src/@nehalist/gatsby-theme-nehalem/comments/index.tsx

The <Comments> component is embedded beneath every post and should make it easier for you to embed comments (like Commento, Disqus, ...).


  • Original path: src/components/sidebar-content/index.tsx
  • Shadowed path would be: src/@nehalist/gatsby-theme-nehalem/sidebar-content/index.tsx

The sidebar content on the front page.


  • Original path: src/components/page-sidebar-content/index.tsx
  • Shadowed path would be: src/@nehalist/gatsby-theme-nehalem/page-sidebar-content/index.tsx

The sidebar content for pages.

Cover image by @alex_andrews

Published under  on .



I'm nehalem, a Gatsby theme by If you like what you see feel free to give a star on GitHub!