Valhalla

Take a deep dive into our latest launch, the Valhalla Content Hub!

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Gatsby Theme Cactus logo

Gatsby Theme Cactus

Example Demo using this theme, hosted on Netlify

A simple Gatsby theme inspired by Hexo Theme Cactus

Features

  • 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

Download

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'
        */
      },
    },
  ],
};

Content

Blog

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

Assets

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

Styles

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,

Licence

MIT

© 2022 Gatsby, Inc.