https://github.com/goncharenko/gatsby-emotion-dark-mode

A Gatsby plugin for toggling dark mode and injecting themes using emotion
https://github.com/goncharenko/gatsby-emotion-dark-mode

emotion emotionjs gatsby gatsby-plugin gatsbyjs

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/goncharenko/gatsby-emotion-dark-mode
• Owner: goncharenko
• License: mit
• Created: 2020-03-11T16:52:00.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-27T17:45:30.000Z (over 3 years ago)
• Last Synced: 2024-10-01T15:59:53.376Z (3 months ago)
• Topics: emotion, emotionjs, gatsby, gatsby-plugin, gatsbyjs
• Language: TypeScript
• Homepage:
• Size: 35.2 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![David](https://img.shields.io/david/dev/goncharenko/gatsby-emotion-dark-mode)](https://github.com/goncharenko/gatsby-emotion-dark-mode)

[![npm](https://img.shields.io/npm/v/gatsby-emotion-dark-mode)](https://www.npmjs.com/package/gatsby-emotion-dark-mode)

[![GitHub](https://img.shields.io/github/license/goncharenko/gatsby-emotion-dark-mode)](https://github.com/goncharenko/gatsby-emotion-dark-mode/blob/master/LICENSE)

# Gatsby Emotion Dark Mode

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

based on 

## 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`

```javascript

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](https://emotion.sh/)

    -   Use this [plugin](https://www.gatsbyjs.org/packages/gatsby-plugin-emotion/) for gatsby integration

## Usage

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

```typescript

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

```typescript

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

```typescript

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`

```typescript

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

export const Layout = (props) => {

    let theme = useContext(ThemeManagerContext);

    return (

        


            

                 theme.toggleDark()}

                    checked={theme.isDark}

                />

                Dark mode

            

        

    );

};

```