Skip to content
Theme UI
GitHub

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

Edit the page on GitHub
Previous:
Theme Spec
Next:
Guides