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

Installation

Install the package

$ npm i gatsby-emotion-dark-mode

or

$ 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' },
            },
        },
    ],
};

Requirements

You must have the following installed in your gatsby project:

• emotion
  • Use this plugin for gatsby integration

Usage

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 (
        <div>
            <label>
                <input
                    type="checkbox"
                    onChange={() => theme.toggleDark()}
                    checked={theme.isDark}
                />
                Dark mode
            </label>
        </div>
    );
};