gatsby-emotion-dark-mode
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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

    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:

    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>
        );
    };

    Install

    npm i gatsby-emotion-dark-mode

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    26

    Last publish

    Collaborators

    • goncharenko