Community Plugin
View plugin on GitHubgatsby-plugin-theme
A Gatsby plugin for easily adding emotion theme context.
Installation
$ npm install gatsby-plugin-theme @emotion/react
# or yarn
$ yarn add gatsby-plugin-theme @emotion/reactUsage
Include the plugin in your gatsby-config.js file.
module.exports = {
plugins: ['gatsby-plugin-theme']
}options
theme: emotion theme context objectstyles: emotion global styles
// in gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-theme',
options: {
theme: {
primary: '#6b46c1',
muted: '#667f99'
},
styles: t => ({
body: {
color: t.primary
}
})
}
}
]
}Recipes
Theme Context
in ./gatsby-config.js:
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-theme',
options: {
theme: {
primary: '#6b46c1',
muted: '#667f99'
}
}
}
]
}in ./src/pages/index.js:
import React from 'react'
/** @param {import('gatsby').PageProps} */
export default () => (
<div css={{ width: 750 }}>
<h1 css={t => ({ color: t.primary })}>Hello</h1>
</div>
)Color Modes
in ./gatsby-config.js:
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-theme',
options: {
theme: {
primary: '#6b46c1',
muted: '#667f99',
modes: {
dark: {
primary: '#9f7aea',
muted: '#7e93b4'
}
}
}
}
}
]
}in ./src/pages/index.js:
import React from 'react'
import { useTheme } from '@emotion/react'
/** @param {import('gatsby').PageProps} */
export default () => {
const { mode, setMode } = useTheme()
return (
<div css={{ width: 750 }}>
<button onClick={() => setMode('dark')}>dark mode</button>
<h1 css={t => ({ color: t.primary })}>{mode}</h1>
</div>
)
}Global Styles
in ./gatsby-config.js:
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-theme',
options: {
theme: {
primary: '#6b46c1',
muted: '#667f99',
modes: {
dark: {
primary: '#9f7aea',
muted: '#7e93b4'
}
}
},
styles: t => ({
body: {
color: t.primary
}
})
}
}
]
}Contributing
- Fork it on GitHub!
- Clone the fork to your own machine.
- Checkout your feature branch:
git checkout -b my-awesome-feature - Commit your changes to your own branch:
git commit -am 'Add some feature' - Push your work back up to your fork:
git push -u origin my-awesome-feature - Submit a Pull Request so that we can review your changes.
NOTE: Be sure to merge the latest from “upstream” before making a pull request!