gatsby-plugin-theme-ui
Automatically adds Theme UI context to a Gatsby site or theme
npm i theme-ui gatsby-plugin-theme-ui// gatsby-config.js
module.exports = {
plugins: [
'gatsby-plugin-theme-ui',
]
}Add a src/theme.js file to your site to add values to the theme context.
// src/theme.js
export default {
colors: {
text: '#000',
background: '#fff',
primary: 'tomato',
},
}Color Modes
To enable support for multiple color modes, add an initialColorMode field to your theme.js object.
// src/theme.js
export default {
initialColorMode: 'light',
colors: {
text: '#000',
background: '#fff',
modes: {
dark: {
text: '#fff',
background: '#000',
}
}
},
}