{"id":16515782,"url":"https://github.com/insin/gatsby-plugin-dark-mode","last_synced_at":"2026-03-05T04:34:43.971Z","repository":{"id":48653494,"uuid":"174326715","full_name":"insin/gatsby-plugin-dark-mode","owner":"insin","description":"A Gatsby plugin which handles some of the details of implementing a dark mode theme","archived":false,"fork":false,"pushed_at":"2021-07-15T17:31:19.000Z","size":10,"stargazers_count":70,"open_issues_count":13,"forks_count":19,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-21T00:40:33.815Z","etag":null,"topics":["dark-mode","gatsby","gatsby-plugin","theming"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-07T10:54:22.000Z","updated_at":"2025-09-01T15:25:47.000Z","dependencies_parsed_at":"2022-08-27T03:24:32.531Z","dependency_job_id":null,"html_url":"https://github.com/insin/gatsby-plugin-dark-mode","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/insin/gatsby-plugin-dark-mode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fgatsby-plugin-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fgatsby-plugin-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fgatsby-plugin-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fgatsby-plugin-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/gatsby-plugin-dark-mode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fgatsby-plugin-dark-mode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30110441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T03:40:26.266Z","status":"ssl_error","status_checked_at":"2026-03-05T03:39:15.902Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","gatsby","gatsby-plugin","theming"],"created_at":"2024-10-11T16:18:16.816Z","updated_at":"2026-03-05T04:34:43.948Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-dark-mode\r\n\r\nA Gatsby plugin which handles some of the details of implementing a dark mode theme.\r\n\r\nIt provides:\r\n\r\n- Browser code for toggling and persisting the theme (from [Dan Abramov](https://twitter.com/dan_abramov)'s [overreacted.io](https://overreacted.io) implementation)\r\n- 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.\r\n- A [React](https://reactjs.org) component for implementing theme toggling UI in your site.\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install gatsby-plugin-dark-mode\r\n```\r\n\r\n```js\r\n// gatsby-config.js\r\n\r\nmodule.exports = {\r\n  plugins: ['gatsby-plugin-dark-mode'],\r\n}\r\n```\r\n\r\n## How to use\r\n\r\n### Implement theme toggling UI\r\n\r\nThe 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.\r\n\r\nHere's an example of using `ThemeToggler` with a checkbox to toggle the theme:\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { ThemeToggler } from 'gatsby-plugin-dark-mode'\r\n\r\nclass MyComponent extends React.Component {\r\n  render() {\r\n    return (\r\n      \u003cThemeToggler\u003e\r\n        {({ theme, toggleTheme }) =\u003e {\r\n          // Don't render anything at compile time. Deferring rendering until we\r\n          // know which theme to use on the client avoids incorrect initial\r\n          // state being displayed.\r\n          if (theme == null) {\r\n            return null\r\n          }\r\n          return (\r\n            \u003clabel\u003e\r\n              \u003cinput\r\n                type=\"checkbox\"\r\n                onChange={(e) =\u003e\r\n                  toggleTheme(e.target.checked ? 'dark' : 'light')\r\n                }\r\n                checked={theme === 'dark'}\r\n              /\u003e{' '}\r\n              Dark mode\r\n            \u003c/label\u003e\r\n          )\r\n        }}\r\n      \u003c/ThemeToggler\u003e\r\n    )\r\n  }\r\n}\r\n```\r\n\r\nThe toggled theme will be persisted across visits in `localStorage.theme`.\r\n\r\n### Implement theming\r\n\r\nThe default theme names are `'light'` and `'dark'` - the plugin adds the current theme name to the `\u003cbody\u003e` element's `className`, so you can use [global styles](https://www.gatsbyjs.org/docs/creating-global-styles) to implement theming.\r\n\r\nA nice option is to use CSS variables like so:\r\n\r\n```css\r\n/* global.css */\r\n\r\nbody {\r\n  --bg: white;\r\n  --textNormal: #222;\r\n  --textTitle: #222;\r\n  --textLink: blue;\r\n  --hr: hsla(0, 0%, 0%, 0.2);\r\n\r\n  background-color: var(--bg);\r\n}\r\n\r\nbody.dark {\r\n  -webkit-font-smoothing: antialiased;\r\n\r\n  --bg: darkslategray;\r\n  --textNormal: rgba(255, 255, 255, 0.88);\r\n  --textTitle: white;\r\n  --textLink: yellow;\r\n  --hr: hsla(0, 0%, 100%, 0.2);\r\n}\r\n```\r\n\r\nYou can then use these variables in your site's components...\r\n\r\n```js\r\nclass Layout extends React.Component {\r\n  render() {\r\n    return (\r\n      \u003cdiv\r\n        style={{\r\n          backgroundColor: 'var(--bg)',\r\n          color: 'var(--textNormal)',\r\n          transition: 'color 0.2s ease-out, background 0.2s ease-out',\r\n        }}\r\n      \u003e\r\n        ...\r\n      \u003c/div\u003e\r\n    )\r\n  }\r\n}\r\n```\r\n\r\n...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/):\r\n\r\n```js\r\n// typography.js\r\n\r\nimport './global.css'\r\n\r\nimport Typography from 'typography'\r\nimport Wordpress2016 from 'typography-theme-wordpress-2016'\r\n\r\nWordpress2016.overrideThemeStyles = () =\u003e ({\r\n  a: {\r\n    color: 'var(--textLink)',\r\n  },\r\n  // gatsby-remark-autolink-headers - don't underline when hidden\r\n  'a.anchor': {\r\n    boxShadow: 'none',\r\n  },\r\n  // gatsby-remark-autolink-headers - use theme colours for the link icon\r\n  'a.anchor svg[aria-hidden=\"true\"]': {\r\n    stroke: 'var(--textLink)',\r\n  },\r\n  hr: {\r\n    background: 'var(--hr)',\r\n  },\r\n})\r\n```\r\n\r\n## Acknowledgements\r\n\r\nThe 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.\r\n\r\n## MIT Licensed\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fgatsby-plugin-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Fgatsby-plugin-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fgatsby-plugin-dark-mode/lists"}