Theming

Let's start by creating a simple theme.

Create the following file in your site: src/@reflexjs/gatsby-theme-base/theme.js. This is where you are going to define your theme values.

Next, run gatsby clean && gatsby develop to clear caches and restart the development server.

We are going to start with the base preset and add custom some colors, fontSizes and lineHeights.

export default {
  preset: base, 
  colors: {
    text: "#000",
    background: "#fff",
    primary: "#2a9d8f",
    secondary: "#e76f51",
  },
  fonts: {
    body: '"Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: "Georgia, serif",
    monospace: "Menlo, monospace",
  },
}

Styling

Once you have created your theme, you can now use the theme values in any .mdx or React component.

<H1 fontFamily="heading" color="primary">
  This is heading
</H1>