@affectionatedoor/gatsby-theme-ui v4.2.0

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
• Add fonts
• Change colors

Theme options

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"
};

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