gatsby-plugin-theme-ui
Gatsby plugin for adding Theme UI context
npm i theme-ui @theme-ui/mdx gatsby-plugin-theme-ui @emotion/react @mdx-js/react
// gatsby-config.jsmodule.exports = {plugins: ['gatsby-plugin-theme-ui'],}
In addition to providing context, this plugin will also prevent a flash of unstyled colors when using color modes.
Options
Key | Default value | Description |
---|---|---|
prismPreset | null | The name of the preset you'd like to use to style code blocks inside your markdown files. The available presets can be found in the theme-ui docs. You can also use a package string of your own choosing. |
preset | null | This can be a JSON theme object or a string package name. Make sure the package you're requiring is installed in your dependencies. |
injectColorFlashScript | true | By default, the plugin injects a script tag to prevent color mode flashing. Set this option to false to omit the script. Useful for AMP (Accelerated Mobile Pages) pages. |
Note that this plugin assumes the theme object is exported as
default
.
The theme module you include in options is considered your base theme. Any further customization and shadowing will be merged with it.
Using options
// gatsby-config.jsmodule.exports = {plugins: [{resolve: 'gatsby-plugin-theme-ui',options: {prismPreset: 'night-owl',preset: '@theme-ui/preset-funk',},},],}
Customizing the theme
To customize the theme used in your Gatsby site, shadow the
src/gatsby-plugin-theme-ui/index.js
module.
const theme = {colors: {text: '#111',background: '#fff',},}export default theme
Load theme from custom path
If you prefer to load your theme from a custom path (instead of the standard
src/gatsby-plugin-theme-ui/index.js
), you can require it in your
gatsby-config.js
file:
module.exports = {plugins: [{resolve: 'gatsby-plugin-theme-ui',options: {preset: require('./src/theme'),},},],}
Note that gatsby-config.js
does not support ES6 modules, so you should use
module.exports
in your theme file:
module.exports = {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.
import baseTheme from 'gatsby-theme-blog/src/gatsby-plugin-theme-ui'const theme = {...baseTheme,colors: {...baseTheme.colors,text: '#111',background: '#fff',},}export default theme
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 a nested modes
object to
theme.colors
.
const theme = {colors: {text: '#000',background: '#fff',modes: {dark: {text: '#fff',background: '#000',},},},}export default theme
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.
const components = {h1: (props) => (<h1 {...props}><a href={`#${props.id}`}>{props.children}</a></h1>),}export default components
MIT License
Edit the page on GitHub