gatsby-plugin-theme

Build Status License NPM Downloads NPM Version Dependency Status devDependency Status Code Style

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/react

Usage

Include the plugin in your gatsby-config.js file.

module.exports = {
  plugins: ['gatsby-plugin-theme']
}

options

  • theme: emotion theme context object
  • styles: 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

  1. Fork it on GitHub!
  2. Clone the fork to your own machine.
  3. Checkout your feature branch: git checkout -b my-awesome-feature
  4. Commit your changes to your own branch: git commit -am 'Add some feature'
  5. Push your work back up to your fork: git push -u origin my-awesome-feature
  6. 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!

License

MIT © 汪磊