Getting Started with Gatsby

To use Theme UI with Gatsby, install and use gatsby-plugin-theme-ui.

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

Add the plugin to your gatsby-config.js.

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

Create a theme file located at src/gatsby-plugin-theme-ui/index.js.

// example theme file
const theme = {
  colors: {
    text: '#000',
    background: '#fff',
  },
}

export default theme

With gatsby-plugin-theme-ui, there is no need to manually use the ThemeProvider component. Use the sx prop, color modes, and other features just as you would with any other application.

For more information, see the documentation for gatsby-plugin-theme-ui.