gatsby-plugin-theme-ui
Advanced tools
gatsby-plugin-theme-ui - npm Package Compare versions
Comparing version 0.2.6 to 0.2.18
| { | ||
| "name": "gatsby-plugin-theme-ui", | ||
| "version": "0.2.6", | ||
| "version": "0.2.18", | ||
| "main": "index.js", | ||
@@ -10,3 +10,3 @@ "author": "Brent Jackson", | ||
| }, | ||
| "gitHead": "795b398a5d8508891a8f81b579d9c5b221a5f34f" | ||
| "gitHead": "25f62f9ff339ba4e51cad8177478a2efb9c3193e" | ||
| } |
| # gatsby-plugin-theme-ui | ||
| Gatsby plugin for adding theme-ui context | ||
| Gatsby plugin for adding Theme UI context | ||
@@ -18,7 +18,7 @@ ```sh | ||
| To customize the theme used in your Gatsby site, shadow files in a `src/gatsby-plugin-theme-ui/` directory. | ||
| The `src/gatsby-plugin-theme-ui/index.js` module is the main export for themes. | ||
| To customize the theme used in your Gatsby site, | ||
| shadow the `src/gatsby-plugin-theme-ui/index.js` module. | ||
| ```js | ||
| // example src/gatsby-plugin-theme-ui/index.js | ||
| // src/gatsby-plugin-theme-ui/index.js | ||
| export default { | ||
@@ -34,23 +34,6 @@ colors: { | ||
| To extend an existing theme, import the [presets](https://theme-ui.com/presets) module by running `npm i @theme-ui/presets` then merge, assign or override properties in your shadowing `src/gatsby-plugin-theme-ui/index.js` file. | ||
| To extend a Gatsby theme that uses Theme UI, import the base theme and export a new theme object. | ||
| ```js | ||
| // example with extending | ||
| import { base } from '@theme-ui/presets' | ||
| export default { | ||
| ...base, | ||
| // extending the colors only | ||
| colors: { | ||
| ...base.colors, | ||
| text: '#111', | ||
| background: '#fff', | ||
| }, | ||
| } | ||
| ``` | ||
| To extend a theme in another Gatsby theme built with Theme UI, this same approach will work. | ||
| ```js | ||
| // example extending from a Gatsby theme | ||
| // src/gatsby-plugin-theme-ui/index.js | ||
| import baseTheme from 'gatsby-theme-blog/src/gatsby-plugin-theme-ui' | ||
@@ -68,2 +51,4 @@ | ||
| You can also import and use presets from [@theme-ui/presets](https://theme-ui.com/presets) to use as a starting point. | ||
| ## Color Modes | ||
@@ -95,3 +80,3 @@ | ||
| ```js | ||
| // example src/gatsby-plugin-theme-ui/components.js | ||
| // src/gatsby-plugin-theme-ui/components.js | ||
| export default { | ||
@@ -98,0 +83,0 @@ h1: props => ( |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-7.72%
5046
- Number of lines in readme file
- decreased by-14.56%
88
No dependency changes