gatsby-theme-ui
Gatsby (theme) plugin for adding theme-ui context
npm i theme-ui gatsby-theme-ui @emotion/core @mdx-js/react
// gatsby-config.jsmoduleexports = __experimentalThemes: 'gatsby-theme-ui' plugins:
Customizing the theme
To customize the theme used in your Gatsby site, shadow files in a src/gatsby-theme-ui/
directory.
The src/gatsby-theme-ui/index.js
module is the main export for themes.
// example src/gatsby-theme-ui/index.js colors: text: '#111' background: '#fff'
Extending a theme
To extend an existing theme, import the module and merge, assign or override properties in your shadowing src/gatsby-theme-ui/index.js
file.
// example with extending ...baseTheme // extending the colors only colors: ...baseThemecolors text: '#111' background: '#fff'
Color Modes
To enable support for multiple color modes, add an initialColorMode
field to your theme.js
object.
// src/theme.js initialColorMode: 'light' colors: text: '#000' background: '#fff' modes: dark: text: '#fff' background: '#000'
MIT License