NEW RELEASE:

Centralized data layer for multiple content sources or frameworks. Dive deep into Valhalla

ContactSign Up for Free
Official Plugin
View plugin on GitHub

Gatsby Theme Blog Dark Mode

This theme enables a darkmode toggle in the header of your blog. It leverages colors.mode.dark in Theme UI which you can change by shadowing.

Install instructions

Note: This theme is designed to work as an add-on to gatsby-theme-blog and will not work without it!

  1. Install the dependencies
npm install gatsby-theme-blog-darkmode gatsby-theme-blog
  1. Configure your site
// gatsby-config.js
module.exports = {
  plugins: [`gatsby-theme-blog`, `gatsby-theme-blog-darkmode`],
}

Shadowing styles

To shadow styles, create src/gatsby-plugin-theme-ui/index.js. Include an object with the styles you’d prefer.

const theme = {
  colors: {
    modes: {
      dark: {
        text: tomato,
      },
    },
  },
}

export default theme

If you’d like to override only some styles you’ll want to deepmerge.

import { merge } from "theme-ui"
import darkmode from "gatsby-theme-blog-darkmode/src/gatsby-plugin-theme-ui"

const theme = merge(darkmode, {
  colors: {
    modes: {
      dark: {
        text: `tomato`,
      },
    },
  },
})

export default theme

Migrating to gatsby-theme-blog 2.0

Once you install this as a parallel theme be sure to update your shadowed paths. Files inside this theme, such as the sun and moon assets, will now be referenced inside the gatsby-theme-blog-darkmode directory.

© 2022 Gatsby, Inc.