Theming

Styling components using a theme.

Create a theme

A theme is a file with values that you can reference when styling components.

Create the following file: /src/@reflexjs/gatsby-theme-core/theme.js.

This is where you are going to define your theme values.

Let's add some colors and fonts.

export default {
  colors: {
    text: "#000",
    background: "#fff",
    primary: "#07c",
    secondary: "#f8c",
  },
  fonts: {
    body: '"Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: "Georgia, serif",
    monospace: "Menlo, monospace",
  },
}

Now you can reference these values when styling components.

<H2 color="primary" fontFamily="heading">
  This is a heading
</H2>

Responsive

Use a pipe | to separate mobile-first responsive values.

<Button fontSize="12px|14px|16px" color="primary|secondary">
  Button
</Button>

This is a heading

Styling Blocks