Create a Custom Theme

{
  styles: {
    pre: {
      fontFamily: 'monospace',
      fontSize: 1,
      p: 3,
      color: 'text',
      bg: 'muted',
      overflow: 'auto',
      code: {
        color: 'inherit'
      },
      variant: 'prism'
    },
    root: {
      margin: 0,
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body'
    },
    img: {
      maxWidth: '100%',
      height: 'auto'
    },
    h1: {
      variant: 'text.display'
    },
    h2: {
      variant: 'text.heading',
      fontSize: 5
    },
    h3: {
      variant: 'text.heading',
      fontSize: 4
    },
    h4: {
      variant: 'text.heading',
      fontSize: 3
    },
    h5: {
      variant: 'text.heading',
      fontSize: 2
    },
    h6: {
      variant: 'text.heading',
      fontSize: 1
    },
    a: {
      color: 'primary',
      '&:hover': {
        color: 'secondary'
      }
    },
    code: {
      fontFamily: 'monospace',
      fontSize: 1
    },
    inlineCode: {
      fontFamily: 'monospace',
      color: 'secondary',
      bg: 'muted'
    },
    table: {
      width: '100%',
      my: 4,
      borderCollapse: 'separate',
      borderSpacing: 0
    },
    th: {
      verticalAlign: 'bottom',
      borderBottomWidth: '2px',
      textAlign: 'left',
      py: '4px',
      pr: '4px',
      pl: 0,
      borderColor: 'muted',
      borderBottomStyle: 'solid'
    },
    td: {
      verticalAlign: 'top',
      borderBottomWidth: '1px',
      textAlign: 'left',
      py: '4px',
      pr: '4px',
      pl: 0,
      borderColor: 'muted',
      borderBottomStyle: 'solid'
    },
    hr: {
      border: 0,
      borderBottom: '1px solid',
      borderColor: 'muted'
    },
    xray: {
      '*': {
        outline: '1px solid rgba(0, 192, 255, .25)'
      }
    },
    navlink: {
      display: 'inline-block',
      fontWeight: 'bold',
      color: 'inherit',
      textDecoration: 'none',
      ':hover,:focus': {
        color: 'primary'
      }
    }
  },
  colors: {
    text: 'var(--theme-ui-colors-text)',
    background: 'var(--theme-ui-colors-background)',
    primary: 'var(--theme-ui-colors-primary)',
    secondary: 'var(--theme-ui-colors-secondary)',
    muted: 'var(--theme-ui-colors-muted)',
    highlight: 'var(--theme-ui-colors-highlight)',
    gray: 'var(--theme-ui-colors-gray)',
    accent: 'var(--theme-ui-colors-accent)',
    darken: 'var(--theme-ui-colors-darken)',
    modes: {
      dark: {
        text: 'var(--theme-ui-colors-modes-dark-text)',
        background: 'var(--theme-ui-colors-modes-dark-background)',
        primary: 'var(--theme-ui-colors-modes-dark-primary)',
        secondary: 'var(--theme-ui-colors-modes-dark-secondary)',
        muted: 'var(--theme-ui-colors-modes-dark-muted)',
        highlight: 'var(--theme-ui-colors-modes-dark-highlight)',
        gray: 'var(--theme-ui-colors-modes-dark-gray)',
        accent: 'var(--theme-ui-colors-modes-dark-accent)'
      },
      deep: {
        text: 'var(--theme-ui-colors-modes-deep-text)',
        background: 'var(--theme-ui-colors-modes-deep-background)',
        primary: 'var(--theme-ui-colors-modes-deep-primary)',
        secondary: 'var(--theme-ui-colors-modes-deep-secondary)',
        highlight: 'var(--theme-ui-colors-modes-deep-highlight)',
        accent: 'var(--theme-ui-colors-modes-deep-accent)',
        muted: 'var(--theme-ui-colors-modes-deep-muted)',
        gray: 'var(--theme-ui-colors-modes-deep-gray)'
      },
      swiss: {
        text: 'var(--theme-ui-colors-modes-swiss-text)',
        background: 'var(--theme-ui-colors-modes-swiss-background)',
        primary: 'var(--theme-ui-colors-modes-swiss-primary)',
        secondary: 'var(--theme-ui-colors-modes-swiss-secondary)',
        highlight: 'var(--theme-ui-colors-modes-swiss-highlight)',
        accent: 'var(--theme-ui-colors-modes-swiss-accent)',
        muted: 'var(--theme-ui-colors-modes-swiss-muted)',
        gray: 'var(--theme-ui-colors-modes-swiss-gray)'
      }
    }
  },
  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,
    72
  ],
  fontWeights: {
    body: 400,
    heading: 800,
    bold: 700,
    display: 800
  },
  lineHeights: {
    body: 1.5,
    heading: 1.25
  },
  sizes: {
    sidebar: 256,
    container: 1024
  },
  text: {
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading'
    },
    block: {
      variant: 'default',
      my: 2,
      textAlign: 'justify',
      textAlignLast: 'last',
      textJustify: 'auto'
    },
    display: {
      variant: 'text.heading',
      fontSize: [
        5,
        6
      ],
      fontWeight: 'display',
      letterSpacing: '-0.03em',
      mt: 3
    },
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.2em'
    }
  },
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      fontWeight: 'bold'
    },
    secondary: {
      variant: 'buttons.primary',
      color: 'background',
      bg: 'secondary'
    },
    black: {
      fontWeight: 'bold',
      color: 'background',
      bg: 'text',
      '&:hover, &:focus': {
        bg: 'primary'
      }
    }
  },
  links: {
    button: {
      display: 'inline-block',
      textDecoration: 'none',
      fontWeight: 'bold',
      fontSize: 2,
      p: 3,
      color: 'background',
      bg: 'text',
      borderRadius: 6,
      '&:hover, &:focus': {
        color: 'background',
        bg: 'primary'
      }
    },
    nav: {
      display: 'block',
      width: '100%',
      px: 2,
      py: 2,
      color: 'inherit',
      textDecoration: 'none',
      fontSize: 1,
      fontWeight: 'bold',
      bg: 'transparent',
      transitionProperty: 'background-color',
      transitionTimingFunction: 'ease-out',
      transitionDuration: '.2s',
      borderRadius: 2,
      '&:hover': {
        bg: 'highlight'
      },
      '&.active': {
        color: 'primary',
        bg: 'highlight'
      }
    }
  },
  badges: {
    primary: {
      color: 'background'
    },
    highlight: {
      color: 'text',
      bg: 'highlight'
    },
    accent: {
      color: 'background',
      bg: 'accent'
    },
    outline: {
      color: 'primary',
      bg: 'transparent',
      boxShadow: 'inset 0 0 0 1px'
    },
    circle: {
      height: 16,
      minWidth: 16,
      lineHeight: '16px',
      textAlign: 'center',
      borderRadius: 9999
    }
  },
  images: {
    avatar: {
      width: 48,
      height: 48,
      borderRadius: 9999
    }
  },
  cards: {
    primary: {
      padding: 2,
      borderRadius: 4,
      boxShadow: '0 0 8px rgba(0, 0, 0, 0.125)'
    },
    compact: {
      padding: 1,
      borderRadius: 2,
      border: '1px solid',
      borderColor: 'muted'
    }
  },
  forms: {
    label: {
      fontSize: 1,
      fontWeight: 'bold'
    },
    input: {
      borderColor: 'gray',
      '&:focus': {
        borderColor: 'primary',
        boxShadow: function boxShadow(t){return"0 0 0 2px "+t.colors.primary;},
        outline: 'none'
      }
    },
    select: {
      borderColor: 'gray',
      '&:focus': {
        borderColor: 'primary',
        boxShadow: function boxShadow(t){return"0 0 0 2px "+t.colors.primary;},
        outline: 'none'
      }
    },
    textarea: {
      borderColor: 'gray',
      '&:focus': {
        borderColor: 'primary',
        boxShadow: function boxShadow(t){return"0 0 0 2px "+t.colors.primary;},
        outline: 'none'
      }
    },
    slider: {
      bg: 'muted'
    }
  },
  alerts: {
    primary: {
      color: 'background'
    },
    secondary: {
      color: 'background',
      bg: 'secondary'
    },
    accent: {
      color: 'background',
      bg: 'accent'
    },
    highlight: {
      color: 'text',
      bg: 'highlight'
    }
  },
  layout: {
    container: {
      p: 3
    }
  },
  prism: {
    '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': {
      color: 'gray'
    },
    '.comment': {
      fontStyle: 'italic'
    },
    '.property, .tag, .boolean, .number, .constant, .symbol, .deleted, .function, .class-name, .regex, .important, .variable': {
      color: 'accent'
    },
    '.atrule, .attr-value, .keyword': {
      color: 'primary'
    },
    '.selector, .attr-name, .string, .char, .builtin, .inserted': {
      color: 'secondary'
    }
  },
  rawColors: {
    text: '#000000',
    background: '#ffffff',
    primary: '#3333ee',
    secondary: '#111199',
    muted: '#f6f6f6',
    highlight: '#efeffe',
    gray: '#777777',
    accent: '#660099',
    darken: 'rgba(0, 0, 0, .25)',
    modes: {
      dark: {
        text: '#ffffff',
        background: '#060606',
        primary: '#33ccff',
        secondary: '#ee00ff',
        muted: '#191919',
        highlight: '#29112c',
        gray: '#999999',
        accent: '#cc00ff'
      },
      deep: {
        text: 'hsl(210, 50%, 96%)',
        background: 'hsl(230, 25%, 18%)',
        primary: 'hsl(260, 100%, 80%)',
        secondary: 'hsl(290, 100%, 80%)',
        highlight: 'hsl(260, 20%, 40%)',
        accent: 'hsl(290, 100%, 80%)',
        muted: 'hsla(230, 20%, 0%, 20%)',
        gray: 'hsl(210, 50%, 60%)'
      },
      swiss: {
        text: 'hsl(10, 20%, 20%)',
        background: 'hsl(10, 10%, 98%)',
        primary: 'hsl(10, 80%, 50%)',
        secondary: 'hsl(10, 60%, 50%)',
        highlight: 'hsl(10, 40%, 90%)',
        accent: 'hsl(250, 60%, 30%)',
        muted: 'hsl(10, 20%, 94%)',
        gray: 'hsl(10, 20%, 50%)'
      }
    }
  }
}