Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wkovacs64/gatsby-plugin-use-dark-mode
Gatsby plugin to prevent a flash of default styles when using the use-dark-mode hook
https://github.com/wkovacs64/gatsby-plugin-use-dark-mode
dark-mode gatsby gatsby-plugin plugin react react-hooks theming
Last synced: 5 days ago
JSON representation
Gatsby plugin to prevent a flash of default styles when using the use-dark-mode hook
- Host: GitHub
- URL: https://github.com/wkovacs64/gatsby-plugin-use-dark-mode
- Owner: wKovacs64
- License: mit
- Created: 2019-03-08T17:21:26.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-10T19:46:43.000Z (about 1 month ago)
- Last Synced: 2024-10-14T09:03:45.265Z (30 days ago)
- Topics: dark-mode, gatsby, gatsby-plugin, plugin, react, react-hooks, theming
- Language: TypeScript
- Homepage:
- Size: 20.6 MB
- Stars: 48
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# [gatsby-plugin-use-dark-mode][home]
[![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`.
```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