Get unlimited public & private packages + team-based management with npm Teams.Learn more »

@affectionatedoor/gatsby-theme-ui

4.2.0 • Public • Published

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.

Keywords

none

Install

npm i @affectionatedoor/gatsby-theme-ui

DownloadsWeekly Downloads

8

Version

4.2.0

License

MIT

Unpacked Size

61 kB

Total Files

43

Last publish

Collaborators

  • avatar