Customizing the theme

Nehalem offers several way of customization:

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

Theming

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.

Metadata

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: `https://nehalem.netlify.com`, // 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: [ `bloggers`, `geeks`, `nerds`, `people`, `everyone` ], // 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="https://nehalist.io" rel="noopener" target="_blank">nehalist.io</a>. Go get me on <a href="https://github.com/nehalist/gatsby-theme-nehalem" rel="noopener" target="_blank">GitHub</a> and don't forget to leave a star in case you like me!`, social: { facebook: ``, twitter: `https://twitter.com/nehalist`, linkedin: `https://www.linkedin.com/in/kevin-hirczy-7a9377106/`, instagram: ``, youtube: ``, github: `https://github.com/nehalist`, 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:

Logo

  • 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.

Avatar

  • 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.

Comments

  • 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, ...).

SidebarContent

  • 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.

PageSidebarContent

  • 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 .

Meysam Hadeli

Hey, I'm Meysam Hadeli, a .NET and Golang Software Engineer, interested in Microservices, CQRS, Event Driven Architecture, DDD.