gatsby-plugin-theme-ui

gatsby-plugin-theme-ui

Gatsby plugin for adding Theme UI context

npm i theme-ui gatsby-plugin-theme-ui @emotion/core @mdx-js/react

// gatsby-config.js
module.exports = {
  plugins: ['gatsby-plugin-theme-ui'],
}

Customizing the theme

To customize the theme used in your Gatsby site, shadow the src/gatsby-plugin-theme-ui/index.js module.

// src/gatsby-plugin-theme-ui/index.js
export default {
  colors: {
    text: '#111',
    background: '#fff',
  },
}

Extending a theme

To extend a Gatsby theme that uses Theme UI, import the base theme and export a new theme object.

// src/gatsby-plugin-theme-ui/index.js
import baseTheme from 'gatsby-theme-blog/src/gatsby-plugin-theme-ui'

export default {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    text: '#111',
    background: '#fff',
  },
}

You can also import and use presets from @theme-ui/presets to use as a starting point.

Color Modes

To enable support for multiple color modes, add an initialColorMode field to your theme.js object.

// src/gatsby-plugin-theme-ui/index.js
export default {
  initialColorMode: 'light',
  colors: {
    text: '#000',
    background: '#fff',
    modes: {
      dark: {
        text: '#fff',
        background: '#000',
      },
    },
  },
}

Components

Custom MDX components that will receive styles from the theme can be included by adding a src/gatsby-plugin-theme-ui/components.js module.

// src/gatsby-plugin-theme-ui/components.js
export default {
  h1: props => (
    <h1 {...props}>
      <a href={`#${props.id}`}>{props.children}</a>
    </h1>
  ),
}

MIT License

Changelog

v0.2.23 2019-07-29

• Add base colors to prism presets #249
• Add key to element in gatsby-plugin-theme-ui #248
• Add metadata to packages #244
• Update docs