Getting Started with Gatsby

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

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

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