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