Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

David npm GitHub

Gatsby Emotion Dark Mode

A Gatsby plugin for toggling dark mode and injecting themes using emotion.

based on https://github.com/gperl27/gatsby-styled-components-dark-mode


Install the package

$ npm i gatsby-emotion-dark-mode


$ yarn add gatsby-emotion-dark-mode

Add the plugin to your gatsby-config.js

module.exports = {
    plugins: [
            resolve: `gatsby-emotion-dark-mode`,
            options: {
                light: { mainColor: 'brandyRose' },
                dark: { mainColor: 'manatee' },


You must have the following installed in your gatsby project:


The plugin expects two options in your gatsby-config.js file:

light: object;
dark: object;

Accessing the styles

We can now utilize the power of emotion. Any component wrapped in a styled has access to your theme!

in a component

const MyLightOrDarkComponent = styled.div`
    background-color: ${(props) => props.theme.mainColor};

In theme you’ll also have access to isDark

So you could do conditionally styling inside your components if you wanted to

const MyLightOrDarkComponent = styled.div`
    color: ${(props) =>
        props.theme.isDark ? props.theme.darkColor : props.theme.lightColor};

Toggling the theme

Somewhere in your app, you’ll want to provide functionality to actually change the theme from one theme to the other, or to respect the current system dark mode setting.

The plugin exposes this functionality through ThemeManagerContext

Consuming the context will get you access to

prop type description
isDark boolean state that describes if your app is in dark mode or not
toggleDark (value?: boolean) => void function that toggles dark/light mode

Example - light/dark mode toggle

in a presumed src/component/layout.tsx

import { ThemeManagerContext } from 'gatsby-emotion-dark-mode';

export const Layout = (props) => {
    let theme = useContext(ThemeManagerContext);

    return (
                    onChange={() => theme.toggleDark()}
                Dark mode
© 2023 Gatsby, Inc.