Theme UI - hdknr/gatsby-home GitHub Wiki
Setup Theme UI
This recipe helps you start developing with the Theme UI (https://theme-ui.com) styling library.
Step 1 / 4
Install packages.
Proposed changes
NPMPackage:
* Install theme-ui@latest
NPMPackage:
* Install gatsby-plugin-theme-ui@latest
NPMPackage:
* Install @theme-ui/presets@latest
---
Step 1
Install packages.
✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]
✅ Installed NPM package @theme-ui/[email protected]
tep 2 / 4
Add the plugin gatsby-plugin-theme-ui to your gatsby-config.js.
Proposed changes
GatsbyPlugin:
* Install gatsby-plugin-theme-ui in gatsby-config.js
---
- Original - 0
+ Modified + 1
@@ -43,6 +43,7 @@
},
"gatsby-plugin-styled-components",
"gatsby-plugin-react-helmet",
+ "gatsby-plugin-theme-ui",
],
}
---
Step 3 / 4
Write out Theme UI configuration files.
Proposed changes
File:
* Write src/gatsby-plugin-theme-ui/index.js
---
- Original - 0
+ Modified + 8
+ // See other presets to try at
https://theme-ui.com/packages/presets
+ import { funk } from '@theme-ui/presets'
+ export default {
+ ...funk,
+ styles: {
+ ...funk.styles,
+ },
+ }
---
File:
* Write src/gatsby-plugin-theme-ui/components.js
---
- Original - 0
+ Modified + 1
+ export default {}
---
Step 3
Write out Theme UI configuration files.
✅ Wrote file src/gatsby-plugin-theme-ui/index.js
✅ Wrote file src/gatsby-plugin-theme-ui/components.js
Step 4 / 4
Success!
You're ready to get started!
* Read the docs: https://theme-ui.com (https://theme-ui.com)
* Learn about the theme specification: https://system-ui.com (https://system-ui.com)
note: if you're running this recipe on the default starter (or any other starter with base css),
you'll need to remove the require to layout.css in the components/layout.js file as otherwise they 'll override some theme-ui styles.
The recipe finished successfully!
✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]
✅ Installed NPM package @theme-ui/[email protected]
✅ Installed gatsby-plugin-theme-ui in gatsby-config.js
✅ Wrote file src/gatsby-plugin-theme-ui/index.js
✅ Wrote file src/gatsby-plugin-theme-ui/components.js