@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

    2

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    61 kB

    Total Files

    43

    Last publish

    Collaborators

    • affectionatedoor