GatsbyJS Theme Octahedroid

A marketing component library styled with Tailwind CSS and Theme UI

Get started

Install Gatsby CLI:

npm i --global gatsby-cli

Create new Gatsby project:

gatsby new my-new-website

Add this theme as a dependency for your site and the tailwindcss library:

cd my-new-website
npm install gatsby-theme-octahedroid tailwindcss
or
yarn add gatsby-theme-octahedroid tailwindcss

Then in your gatsby-config.js file use the theme as a plugin and in the options themePath add your theme file route like this:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-octahedroid`,
      options: {
        root: __dirname,
        themePath: `${__dirname}/theme`
      }
    }
  ]
};

Theme requirements

In your site src/ create a folder called images/ and put the images you want to use in your site, this is for the theme to be able to create faster images.

Theme provider

In order for Theme UI to use you new theme settings you need to use the <ThemeProvider /> component and pass your theme file as the theme prop, we recommend the use of a Layout component for this, an example of a layout component is included in the src/components/layout-example.js.

Theme configuration

If you want to change the components color, fonts, sizes, etc you must create a theme.js file at the root of your project, you can extend the original theme by shadowing the original theme file like this:

const baseTheme = require('gatsby-theme-octahedroid/theme');

const myTheme = {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    primary: '#0CBFC7',
    secondary: '#542c85',
    accent: '#E8DA8B',
    darkShade: '#37375B',
    lightShade: '#F7F7F7'
  },
  height:{
    ...baseTheme.height,
    hero: '700px'
  },
  styles: {
    ...baseTheme.styles,
    h1: {
      ...baseTheme.heading,
      fontSize: "4rem",
    },
    h2: {
      ...baseTheme.heading,
      fontSize: "2.5rem",
    },
    h3: {
      ...baseTheme.heading,
      fontSize: "2rem",
    },
    h4: {
      ...baseTheme.heading,
      fontSize: "1.5rem",
    },
    h5: {
      ...baseTheme.heading,
      fontSize: "1.25rem",
      fontWeight: 'body',
    },
    h6: {
      ...baseTheme.heading,
      fontSize: "1rem",
    },
  }
}
// console.log(myTheme);
module.exports = myTheme;

Deploy

Resources

• Gatsby documentation
• Tailwind documentation
• Theme-UI documentation

Credits

• Images - undraw.co

Support

For issues and features request, use Github or access the support page provided by Octahedorid

Upcoming featured

@TODO post install scripts for initial setup