@codynhat/gatsby-theme-cactus NPM

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:

Overwrite all Gatsby Theme Cactus styles. Add gatsby-plugin-theme-ui/index.js to your site's src folder
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