# gatsby-plugin-use-dark-mode

> Gatsby plugin to prevent a flash of default styles when using the use-dark-mode hook

Latest version **2.1.1** (published 2025-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-use-dark-mode
pnpm add gatsby-plugin-use-dark-mode
yarn add gatsby-plugin-use-dark-mode
bun add gatsby-plugin-use-dark-mode
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: no vulnerabilities; has provenance.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2025-11-27 |
| First published | 2019-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 47 |
| Author | Justin Hall |
| Maintainers | wkovacs64 |
| Keywords | gatsby, gatsby-plugin, use-dark-mode, dark-mode |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-use-dark-mode
- Repository: https://github.com/wKovacs64/gatsby-plugin-use-dark-mode
- Homepage: https://github.com/wKovacs64/gatsby-plugin-use-dark-mode#readme
- Issues: https://github.com/wKovacs64/gatsby-plugin-use-dark-mode/issues
- npm.io page: https://npm.io/package/gatsby-plugin-use-dark-mode

## Dependencies (1)

- [esbuild](https://npm.io/package/esbuild.md) ~0.27.0

## Recent versions

- 2.1.1 (latest) — 2025-11-27
- 2.1.0 — 2024-12-31
- 2.0.1 — 2023-02-13
- 2.0.0 — 2022-11-27
- 1.6.1 — 2022-11-22
- 1.6.0 — 2022-10-25
- 1.5.0 — 2022-04-19
- 1.4.1 — 2022-04-09
- 1.4.0 — 2021-10-21
- 1.3.0 — 2021-03-04
- 1.2.0 — 2020-11-19
- 1.1.2 — 2019-06-05
- 1.1.1 — 2019-05-20
- 1.1.0 — 2019-03-11
- 1.0.0 — 2019-03-09

## README

# [gatsby-plugin-use-dark-mode][home]

<!-- prettier-ignore -->
> [!WARNING]
> **This project is no longer maintained and has been archived.** It probably still works, but if
> you are starting a new Gatsby project, please consider alternative solutions for implementing dark mode.

[![npm version][npm-image]][npm-url] [![Build Status][ci-image]][ci-url]

A [Gatsby][gatsby] plugin to prevent a flash of default styles when using the [`use-dark-mode`][udm]
hook if the user is not using the default theme. Specifically, this plugin handles the injection of
the [`noflash.js`][udm-noflash] logic.

## Install

```sh
npm install gatsby-plugin-use-dark-mode use-dark-mode
```

## Usage

Add the plugin to your `gatsby-config.js`.

<!-- prettier-ignore -->
```js
module.exports = {
  plugins: [
    'gatsby-plugin-use-dark-mode',
  ],
};
```

Follow the [`use-dark-mode`][udm] documentation for further instructions.

### Advanced Configuration

If you would like to change the class names that are applied, specify the storage key, or skip the
script minification process, you may do so through plugin options:

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-use-dark-mode',
      options: {
        classNameDark: 'dark-mode',
        classNameLight: 'light-mode',
        storageKey: 'darkMode',
        minify: true,
      },
    },
  ],
};
```

> Note: You will also need to pass the corresponding [options to `useDarkMode`][udm-parameters].

## Limitations

[`useDarkMode`][udm] can be [configured][udm-parameters] to specify which DOM element receives the
class and to use an alternate storage provider if desired. This plugin does not currently support
those options, so it will only work if you are using the defaults (`document.body` and
`localStorage`).

[home]: https://github.com/wKovacs64/gatsby-plugin-use-dark-mode
[npm-image]: https://img.shields.io/npm/v/gatsby-plugin-use-dark-mode.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/gatsby-plugin-use-dark-mode
[ci-image]:
  https://img.shields.io/github/actions/workflow/status/wKovacs64/gatsby-plugin-use-dark-mode/ci.yml?logo=github&style=flat-square
[ci-url]: https://github.com/wKovacs64/gatsby-plugin-use-dark-mode/actions?query=workflow%3Aci
[gatsby]: https://www.gatsbyjs.org
[udm]: https://github.com/donavon/use-dark-mode#readme
[udm-noflash]: https://github.com/donavon/use-dark-mode#that-flash
[udm-parameters]: https://github.com/donavon/use-dark-mode#parameters

---
_Source: https://npm.io/package/gatsby-plugin-use-dark-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._