<p align="center"> <img alt="Gatsby Theme Cactus logo" src="https://res.cloudinary.com/dqzlshiwt/image/upload/v1581006740/web/gatsby-theme-cactus.png" width="70" /> </p> <h1 align="center"> Gatsby Theme Cactus </h1>

Usage no npm install needed!

<script type="module">
  import chrismwilliamsGatsbyThemeCactus from 'https://cdn.skypack.dev/@chrismwilliams/gatsby-theme-cactus';


Gatsby Theme Cactus logo

Gatsby Theme Cactus

Example Demo using this theme, hosted on Netlify

A simple Gatsby theme inspired by Hexo Theme Cactus


  • GatsbyJS - for blazingly fast static websites built with React
  • Theme UI - themeable design system for modern styling
  • MDX - markdown evolved
  • Lazy loading - for images and inc webp support
  • Font Awesome icons
  • Responsive design
  • Light & dark mode - uses prefers-color-scheme media query

Getting Started

Unsure what a Gatsby theme is or how to use them, the Gatsby docs are a great place to start, including how to use a theme.

Want to see an example of how to use it? Check out a demo site repo


To install this theme, run in the root of your Gatsby site:

# use npm or yarn
npm install --save @chrismwilliams/gatsby-theme-cactus

Then add the theme and any options to gatsby-config.js.

Theme Options

Key Default Value Description
basePath / Root url for the theme
postsPath content/posts Location of posts
pagesPath content/pages Location of additional pages (optional)

Example usage

module.exports = {
  plugins: [
      resolve: `@chrismwilliams/gatsby-theme-cactus`,
      options: {
          Gatsby Theme Cactus options
          - basePath: defaults to '/'
          - contentPath: defaults to 'content/posts'
          - assetPath: default to 'content/assets'



Any .mdx or .md files added to the ./content/posts folder will be transformed into blog pages and added to your site.

To create your own blog page, shadow the file within your site ./src/gatsby-theme-blog-core/components/post.js


Any images for pages or blogs live in ./content/assets


Note - your own site will take precedence over any theme, that includes any sub-themes another theme uses. You also don't have to dive into another theme's theme to shadow/overwrite files.

Here you have a couple of options:

  1. Overwrite all Gatsby Theme Cactus styles. Add gatsby-plugin-theme-ui/index.js to your site's src folder

  2. Extended or overwrite properties by adding gatsby-plugin-theme-ui/index.js to your src folder and compose theme styles by importing it from @chrismwilliams/gatsby-theme-cactus/src/gatsby-plugin-theme-ui. An example can be found here

If you prefer to simply change the colours, you can shadow Gatsby Theme Cactus's colours by adding a gatsby-plugin-theme-ui/colors.js in your site's src folder with the same properties as Gatsby Theme Cactus, which shown below.

// @chrismwilliams/gatsby-theme-cactus/src/gatsby-plugin-theme-ui/colors.js
export default {
  text: `#c9cacc`,
  accent: `#eeeeee`,
  background: `#1d1f21`,
  primary: `#2bbc8a`,
  secondary: `#A953C6`,
  tertiary: `#666`,
  modes: {
    dark: {
      text: `#c9cacc`,
      accent: `#eeeeee`,
      background: `#1d1f21`,
      primary: `#2bbc8a`,
    light: {
      text: `#363533`,
      accent: `#111111`,
      background: `#e2e0de`,
      primary: `#d44375`,

Note also that Gatsby Theme Cactus uses the prefers-color-scheme media query to set either the default dark or light mode depending on user preference. To change this, shadow and change the property found in the gatsby-plugin-theme-ui/index.js file

useColorSchemeMediaQuery: true,