My objective
Implementing 'gatsby-plugin-dark-mode' in a Typescript Gatsby project
Steps taken so far
- Installed 'gatsby-plugin-dark-mode' using
yarn add gatsby-plugin-dark-mode - Included 'gatsby-plugin-dark-mode' in gatsby-config.js
module.exports = {
plugins: ['gatsby-plugin-dark-mode'],
}
- Created a ThemeToggler component and imported 'gatsby-plugin-dark-mode'
import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'
class MyComponent extends React.Component {
render() {
return (
<ThemeToggler>
{({ theme, toggleTheme }) => (
<label>
<input
type="checkbox"
onChange={e => toggleTheme(e.target.checked ? 'dark' : 'light')}
checked={theme === 'dark'}
/>{' '}
Dark mode
</label>
)}
</ThemeToggler>
)
}
}
Issue encountered
Could not find a declaration file for module 'gatsby-plugin-dark-mode'. '/Desktop/my-blog/gatsby-casper/node_modules/gatsby-plugin-dark-mode/index.js' implicitly has an 'any' type.Questions & seeking assistance
- Am I missing something important?
- Is 'gatsby-plugin-dark-mode' not compatible with Typescript in Gatsby?
- If it is possible to use 'gatsby-plugin-dark-mode' with Typescript in Gatsby, please point out what I might be overlooking.