# Title 1

steps to add [theme-ui](https://theme-ui.com/) to your gatsby site. First we'll add it the same way we'd add it to any old React app (not using the gatsby plugin).

### install theme-ui

in terminal, type

npm i theme-ui @theme-ui/presets

then create a ThemeProvider component. This should be a file with a `.js` extension in your `src` folder. Maybe something like `/src/layout/style-1.js` or something. The basic structure is as follows:

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'

export default props => (
  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)

as you can see, you need to have a `theme` that's stored in the `./theme.js` file.

if you want to create MULTIPLE themes (and you may as well if you're just learning), change that third line to

import theme from './theme-1'

and then add a new file called `theme-1.js` right there in the same folder as your `style-1.js`. It can look something like this if you want to start with a preset and merge it with your new stuff:

import baseTheme from "@theme-ui/presets/funk"
import { merge } from "theme-ui"

export default merge(baseTheme, {
  colors: {
    text: "#222",
    primary: "tomato",
  },
})

or you can just create the WHOLE thing yourself like so:

export const theme = {
  breakpoints: ['40em', '52em', '64em'],
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  fonts: {
    body:
      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: 'inherit',
    monospace: 'Menlo, monospace',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
    secondary: '#30c',
    muted: '#f6f6f6',
  },
  text: {
    heading: {
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
    },
  },
  styles: {
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
    },
    h1: {
      variant: 'text.heading',
      fontSize: 5,
    },
    h2: {
      variant: 'text.heading',
      fontSize: 4,
    },
    h3: {
      variant: 'text.heading',
      fontSize: 3,
    },
    h4: {
      variant: 'text.heading',
      fontSize: 2,
    },
    h5: {
      variant: 'text.heading',
      fontSize: 1,
    },
    h6: {
      variant: 'text.heading',
      fontSize: 0,
    },
    pre: {
      fontFamily: 'monospace',
      overflowX: 'auto',
      code: {
        color: 'inherit',
      },
    },
    code: {
      fontFamily: 'monospace',
      fontSize: 'inherit',
    },
    table: {
      width: '100%',
      borderCollapse: 'separate',
      borderSpacing: 0,
    },
    th: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
    td: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
  },
}

## THEME UI SNIPPETS

if you have bits of code you are always reusing, go in to preferences => User Snippets, then add and save the following:

{
	"Theme UI Pragma": {
		"prefix": ["theme", "/**"],
		"body": ["/** @jsx jsx */", "import { jsx } from 'theme-ui'"],
		"description": "theme-ui pragma"
	},
	"Gatsby Page": {
		"prefix": ["page", "gpage"],
		"body": ["/** @jsx jsx */", 
			"import { jsx } from 'theme-ui'", 
			"",
			"export default () => {", 
			"\treturn (",
			"\t\t<div",
			"\t\t\tsx={{",
			"\t\t\t\t//fontFamily: \"sans-serif\"",
			"\t\t\t}}",
			"\t\t>",
			"\t\t\t${1:stuff goes here.}",
			"\t\t</div>",
			"\t)",
			"}"
		],
		"description": "create gatsby page"
	},
}