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

1.0.0 • Public • Published

gatsby-plugin-perfect-dark-mode

Version Size

This plugin makes it easy to add perfect-dark-mode to Gatsby.

Installation

You do not need to add perfect-dark-mode to <head> like you do for react-perfect-dark-mode. This plugin puts perfect-dark-mode in <head> for you.

yarn add gatsby-plugin-perfect-dark-mode

Add gatsby-plugin-perfect-dark-mode to your gatsby-config.js file.

Usage

In a component you can use the hook:

import React from 'react'
import { usePerfectDarkMode } from 'gatsby-plugin-perfect-dark-mode'

export const Toggle = () => {
  const { mode, updateMode } = usePerfectDarkMode()
  return (
    <button
      style={{ visibility: mode !== undefined ? 'visible' : 'hidden' }}
      onClick={() =>
        updateMode(
          (mode, modes, modeIndex) => modes[(modeIndex + 1) % modes.length],
        )
      }
    >
      {mode}
    </button>
  )
}

Readme

Keywords

Package Sidebar

Install

npm i gatsby-plugin-perfect-dark-mode

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

2.71 kB

Total Files

6

Last publish

Collaborators

  • dylanvann