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'

const theme = {
  ...base,
  colors: {
    text: 'white',
    background: 'black',
    primary: 'cyan',
    secondary: 'magenta',
  },
}

export default theme

Options

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