We are working on the next version of the Flex theme. See https://github.com/reflexjs/reflexjs

@arshad/gatsby-themes

A collection of open source, well designed, highly customizable and 100% free Gatsby themes for blazing fast sites.

Themes

Flex

Flex is a Gatsby theme that lets you build your site by writing simple components inside Markdown files.

Phoenix

A Gatsby theme that bundles a blog, portfolio, photography and podcast. It uses Tailwind CSS for theming and includes code highlighting with Prism, RSS feed, a dark mode and great typography.

Architecture

All included themes are composed themes, which means they make use of multiple core themes for core types and a child theme for styles and latent component shadowing. This architecture allows themes to be flexible and customizable.

The following diagram shows an example of theme composition for @arshad/gatsby-theme-phoenix.

As you can see, you can easily swap @arshad/gatsby-theme-phoenix with your own theme and styles, keeping all functionality unchanged.

Core themes

The following core themes are available. They bundle core types and functionality. They include no styles and are meant to be consumed by other themes or sites. Use them to compose and build your own themes.

To learn more about theme composition, check out the official docs.

Name	Version	Description
@arshad/gatsby-theme-core		Shared types and helpers for @arshad/gatsby-themes
@arshad/gatsby-theme-blog-core		Adds a Post type that you can use to build a blog. Includes post excerpt, featured image, tags/categories and paginated pages.
@arshad/gatsby-theme-page-core		Adds a Page type with MDX support. Includes code highlighting with prismjs.
@arshad/gatsby-theme-photo-core		Adds a Photo type that you can use to build a photography site.
@arshad/gatsby-theme-podcast-core		Adds a Podcast and PodcastEpisode types that you can use to build a podcast site. Podcast episodes are pulled from podcast feed.
@arshad/gatsby-theme-portfolio-core		Adds a Project types that you can use to build a portfolio site.

Click on the theme page to learn more about the core theme and how to use it.

Usage

Browse our free themes or create your own. You can mix and match core themes to compose your Gatsby site.

Example

To build a portfolio site with a blog, run the following command in your site.

yarn add @arshad/gatsby-theme-portfolio-core @arshad/gatsby-theme-blog-core

Then enable the themes in your gatsby-config.js

// gatsby-config.js
...
  plugins: [
    `@arshad/gatsby-theme-blog-core`,
    `@arshad/gatsby-theme-portfolio-core`
  ]
...

To disable a core theme, run yarn remove @arshad/gatsby-theme-name and then remove it from your gatsby-config.js file.

Support

Need help? Create an issue on the main repo @arshad/gatsby-themes or ask me @arshadcn.

License