Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby plugin for themes (and switching between them)

This is a style system agnostic plugin. No matter what style system you are using (styled-components, emotion, theme-ui …), you can use them with this plugin.

How to Use

In your gatsby-config.js file.

module.exports = {
  // ...
    resolve: `gatsby-plugin-themes`,
    options: {
      themes: [
  // ...

And anywhere in any of your components.

import React, { useContext } from 'react'
import { ThemeContext } from 'gatsby-plugin-themes'
// ...
const { theme, next } = useContext(ThemeContext)

Here the theme is one of your modules decleared in the gatsby-config.js file (in this example, dark.js or light.js). And I don’t care what’s in it, nor how you use it, you are the boss.

The next is a function to toggle between your themes. And that’s about it. Enjoy.

© 2023 Gatsby, Inc.