\n\nExample [Demo](https://gatsby-theme-cactus.netlify.com/) using this theme, hosted on Netlify\n\nA simple Gatsby theme inspired by [Hexo Theme Cactus](https://github.com/probberechts/hexo-theme-cactus)\n\n## Features\n\n- GatsbyJS - for blazingly fast static websites built with React\n- Theme UI - themeable design system for modern styling\n- MDX - markdown evolved\n- Lazy loading - for images and inc webp support\n- Font Awesome icons\n- Responsive design\n- Light & dark mode - uses `prefers-color-scheme` media query\n\n## Getting Started\n\nUnsure what a Gatsby theme is or how to use them, the [Gatsby docs](https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes/) are a great place to start, including [how to use a theme](https://www.gatsbyjs.org/docs/themes/using-a-gatsby-theme).\n\n> Want to see an example of how to use it? Check out a demo site [repo](https://github.com/chrismwilliams/gatsby-theme-cactus/tree/master/demo)\n\n### Download\n\nTo install this theme, run in the root of your Gatsby site:\n\n```sh\n# use npm or yarn\nnpm install --save @chrismwilliams/gatsby-theme-cactus\n```\n\nThen add the theme and any options to `gatsby-config.js`.\n\n### Theme Options\n\n| Key | Default Value | Description |\n| ----------- | --------------- | --------------------------------------- |\n| `basePath` | `/` | Root url for the theme |\n| `postsPath` | `content/posts` | Location of posts |\n| `pagesPath` | `content/pages` | Location of additional pages (optional) |\n\n#### Example usage\n\n```js\nmodule.exports = {\n plugins: [\n {\n resolve: `@chrismwilliams/gatsby-theme-cactus`,\n options: {\n /*\n Gatsby Theme Cactus options\n - basePath: defaults to '/'\n - contentPath: defaults to 'content/posts'\n - assetPath: default to 'content/assets'\n */\n },\n },\n ],\n};\n```\n\n### Content\n\n_Blog_\n\nAny `.mdx` or `.md` files added to the `./content/posts` folder will be transformed into blog pages and added to your site.\n\nTo create your own blog page, shadow the file within your site `./src/gatsby-theme-blog-core/components/post.js`\n\n_Assets_\n\nAny images for pages or blogs live in `./content/assets`\n\n### Styles\n\nNote - 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.\n\nHere you have a couple of options:\n\n1. Overwrite all Gatsby Theme Cactus styles. Add `gatsby-plugin-theme-ui/index.js` to your site's `src` folder\n\n2. 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](https://github.com/chrismwilliams/gatsby-theme-cactus/blob/master/demo/src/gatsby-plugin-theme-ui/index.js)\n\nIf 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.\n\n```js\n// @chrismwilliams/gatsby-theme-cactus/src/gatsby-plugin-theme-ui/colors.js\nexport default {\n text: `#c9cacc`,\n accent: `#eeeeee`,\n background: `#1d1f21`,\n primary: `#2bbc8a`,\n secondary: `#A953C6`,\n tertiary: `#666`,\n modes: {\n dark: {\n text: `#c9cacc`,\n accent: `#eeeeee`,\n background: `#1d1f21`,\n primary: `#2bbc8a`,\n },\n light: {\n text: `#363533`,\n accent: `#111111`,\n background: `#e2e0de`,\n primary: `#d44375`,\n },\n },\n};\n```\n\nNote 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\n\n```js\nuseColorSchemeMediaQuery: true,\n```\n\n## Licence\n\nMIT\n","readmeFilename":"README.md"}
![\"Gatsby](\"https://res.cloudinary.com/dqzlshiwt/image/upload/v1581006740/web/gatsby-theme-cactus.png\")