Gatsby-theme-ui-blog NPM

gatsby-theme-ui-blog

Minimal Gatsby MDX blog theme built with Theme UI. Use this as a starting point for building custom blog themes with Theme UI.

npm i gatsby-theme-ui-blog

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-theme-ui-blog',
  ]
}

Shadowing

Shadow the following components to customize styles and page layout:

Component	Description	Props
`src/gatsby-theme-ui-blog/posts.js`	Index page for all blog posts	`{ posts }`
`src/gatsby-theme-ui-blog/post.js`	Full blog post article page	`{ title, date, children, keywords, tags }`
`src/gatsby-theme-ui-blog/layout.js`	Wrapping layout component for the Post and Posts components		all page-level props

Theming

Use gatsby-plugin-theme-ui to override or customize the theme.

npm i gatsby-plugin-theme-ui

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-theme-ui-blog',
    'gatsby-plugin-theme-ui',
  ]
}

// shadow src/gatsby-plugin-theme-ui/index.js
import base from 'gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui'

export default {
  ...base,
  colors: {
    text: 'white',
    background: 'black',
    primary: 'cyan',
    secondary: 'magenta',
  }
}

Options

This theme is based off of gatsby-theme-blog-core and uses all the same options.

Key	Default value	Description
`basePath`	`/`	Root url for all blog posts
`contentPath`	`content/posts`	Location of blog posts
`assetPath`	`content/assets`	Location of assets
`mdx`	`true`	Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off)