@affectionatedoor/gatsby-theme-ui

A basic configuration of theme-ui as a Gatsby theme. Also includes some useful components. In this link you can find examples.

Usage no npm install needed!

<script type="module">
  import affectionatedoorGatsbyThemeUi from 'https://cdn.skypack.dev/@affectionatedoor/gatsby-theme-ui';
</script>

README

gatsby-theme-ui

A basic configuration of theme-ui as a Gatsby theme. Also includes some useful components. In this link you can find examples.

Table of contents

Theme options

Name Description Type Default
imageDirectory Images for sharp string src/images
pageDirectory This exists to make mdx files available to GraphQL queries. string src/pages
logoFilename Place the logo inside the imageDirectory. string gatsby-icon.png
gatsbyMdxConfig You can't configure gatsby-plugin-mdx multiple times so with this option you can override it object See baseGatsbyMdxConfig in gatsby-config

Add fonts

Say you want to use the Lora font, both for headings and body.

  1. Install the typeface package:
yarn add typeface-lora
  1. Override (shadow) the theme's fonts.js by creating the following file at src/@affectionatedoor/gatsby-theme-ui/theme/fonts.js:
export default {
  body: '"Lora", sans-serif',
  heading: '"Lora", serif',
  monospace: "Menlo, monospace"
};
  1. Import the package at both gatsby-ssr.js and gatsby-browser.js:
import "typeface-lora";

Change colors

If you want to change the colors or add a new color mode, shadow the src/theme/colors.js file.