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.jsmodule.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.jsmodule.exports = {plugins: ['gatsby-theme-ui-blog', 'gatsby-plugin-theme-ui'],}
// shadow src/gatsby-plugin-theme-ui/index.jsimport 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.
| 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) |