https://github.com/insin/gatsby-plugin-dark-mode
A Gatsby plugin which handles some of the details of implementing a dark mode theme
https://github.com/insin/gatsby-plugin-dark-mode
dark-mode gatsby gatsby-plugin theming
Last synced: 16 days ago
JSON representation
A Gatsby plugin which handles some of the details of implementing a dark mode theme
- Host: GitHub
- URL: https://github.com/insin/gatsby-plugin-dark-mode
- Owner: insin
- License: mit
- Created: 2019-03-07T10:54:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-07-15T17:31:19.000Z (about 4 years ago)
- Last Synced: 2025-08-27T01:10:27.827Z (about 1 month ago)
- Topics: dark-mode, gatsby, gatsby-plugin, theming
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 69
- Watchers: 1
- Forks: 18
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# gatsby-plugin-dark-mode
A Gatsby plugin which handles some of the details of implementing a dark mode theme.
It provides:
- Browser code for toggling and persisting the theme (from [Dan Abramov](https://twitter.com/dan_abramov)'s [overreacted.io](https://overreacted.io) implementation)
- Automatic use of a dark mode theme (via the `prefers-color-scheme` [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)) if you've configured your system to use dark colour themes when available.
- A [React](https://reactjs.org) component for implementing theme toggling UI in your site.
## Install
```sh
npm install gatsby-plugin-dark-mode
```
```js
// gatsby-config.js
module.exports = {
plugins: ['gatsby-plugin-dark-mode'],
}
```
## How to use
### Implement theme toggling UI
The plugin module exports a `ThemeToggler` component which takes a `children` [render prop](https://reactjs.org/docs/render-props.html), providing the current `theme` name and a `toggleTheme` function to change the theme.
Here's an example of using `ThemeToggler` with a checkbox to toggle the theme:
```jsx
import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'
class MyComponent extends React.Component {
render() {
return (
{({ theme, toggleTheme }) => {
// Don't render anything at compile time. Deferring rendering until we
// know which theme to use on the client avoids incorrect initial
// state being displayed.
if (theme == null) {
return null
}
return (
toggleTheme(e.target.checked ? 'dark' : 'light')
}
checked={theme === 'dark'}
/>{' '}
Dark mode
)
}}
)
}
}
```
The toggled theme will be persisted across visits in `localStorage.theme`.
### Implement theming
The default theme names are `'light'` and `'dark'` - the plugin adds the current theme name to the `` element's `className`, so you can use [global styles](https://www.gatsbyjs.org/docs/creating-global-styles) to implement theming.
A nice option is to use CSS variables like so:
```css
/* global.css */
body {
--bg: white;
--textNormal: #222;
--textTitle: #222;
--textLink: blue;
--hr: hsla(0, 0%, 0%, 0.2);
background-color: var(--bg);
}
body.dark {
-webkit-font-smoothing: antialiased;
--bg: darkslategray;
--textNormal: rgba(255, 255, 255, 0.88);
--textTitle: white;
--textLink: yellow;
--hr: hsla(0, 0%, 100%, 0.2);
}
```
You can then use these variables in your site's components...
```js
class Layout extends React.Component {
render() {
return (
...
)
}
}
```
...and in your [Typography config](https://www.gatsbyjs.org/docs/typography-js/#creating-the-typography-configuration) if you're using `gatsby-plugin-typography`, which is included in the [Gatsby Starter Blog](https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/):
```js
// typography.js
import './global.css'
import Typography from 'typography'
import Wordpress2016 from 'typography-theme-wordpress-2016'
Wordpress2016.overrideThemeStyles = () => ({
a: {
color: 'var(--textLink)',
},
// gatsby-remark-autolink-headers - don't underline when hidden
'a.anchor': {
boxShadow: 'none',
},
// gatsby-remark-autolink-headers - use theme colours for the link icon
'a.anchor svg[aria-hidden="true"]': {
stroke: 'var(--textLink)',
},
hr: {
background: 'var(--hr)',
},
})
```
## Acknowledgements
The theme detecting/switching/persistence code and the suggested theming implementation are entirely from the [implementation of overreacted.io](https://github.com/gaearon/overreacted.io) by [Dan Abramov](https://twitter.com/dan_abramov) - I'm just publishing them as a plugin to make them easier to use in my own blog, and for reuse by others.
## MIT Licensed