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