How to use @theme-ui/typography - 5 common examples

import moraga from 'typography-theme-moraga'
import { toTheme } from '@theme-ui/typography'
import { merge } from 'lodash/fp'

import * as modes from './modes'
import prism from './prism'
import styles from './styles'

moraga.headerWeight = 700
const typography = toTheme(moraga)

export default merge(typography, {
  initialColorMode: 'light',
  // Show errors above playground editor
  showLiveError: true,
  // Show preview of the code inside playground
  showLivePreview: true,
  // Show editor when a playground is rendered
  showPlaygroundEditor: true,
  // Show dark/light mode switch toggle in header
  showDarkModeSwitch: true,
  // Display edit this page button on every page
  showMarkdownEditButton: true,
  // Wrap the playground editor and preview in iframes to avoid style/script collisions
  useScopingInPlayground: false,
  colors: {

//@ts-ignore
import moraga from 'typography-theme-moraga';
//@ts-ignore
import { toTheme } from '@theme-ui/typography';
import { merge, get } from 'lodash';

import * as modes from './modes';
import prism from './prism';
import { Theme } from '../types';

moraga.headerWeight = 700;
const typography = toTheme(moraga);

const getTheme = (theme?: Theme): Theme =>
  merge(theme, typography, {
    prism,
    initialColorMode: 'light',
    colors: {
      ...modes.light,
      modes: {
        dark: modes.dark,
      },
    },
    fonts: {
      monospace: 'Inconsolata',
    },
    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
    fontWeights: {

export default props => {
  const [themeName, setTheme] = useState(themeNames[0])

  const typographyTheme = typographyThemes[themeName]
  const theme = toTheme(typographyTheme)
  theme.styles.h1 = {
    fontSize: [5, 5],
  }

  return (
    <div>
      
         {
            setTheme(e.target.value)</div>

import "typeface-montserrat"
import "typeface-merriweather"
import { toTheme } from "@theme-ui/typography"
import wordpress2016 from "typography-theme-wordpress-2016"

export default toTheme(wordpress2016)

import "typeface-montserrat"
import "typeface-merriweather"
import { toTheme } from "@theme-ui/typography"
import typography from "typography-theme-wordpress-2016"
import merge from "deepmerge"

const typographyTheme = toTheme(typography)

const innerMargin = 85
const content = 420

const darkerBlue = "#0f8f5e"
const lightBlue = "#aaf6d9"
const lighterBlue = "#ebfcf6"

const theme = merge.all([
  typographyTheme,
  {
    colors: {
      background: "#FAF9F5",
      text: "rgb(51,51,51)",
      darkBackground: "#202226",
      lightText: "#DFDDD9",