gatsby-plugin-perfect-dark-mode
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-modeAdd 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>
)
}