How to use the gatsby-theme-apollo-core.colors.primary function in gatsby-theme-apollo-core

const Wrapper = styled.div({
  display: 'flex',
  alignItems: 'flex-start'
});

const InnerWrapper = styled.div({
  flexGrow: 1,
  width: 0
});

const BodyContent = styled.div({
  // style all anchors with an href and no prior classes
  // this helps avoid anchors with names and styled buttons
  'a[href]:not([class])': {
    color: colors.primary,
    textDecoration: 'none',
    ':hover': {
      textDecoration: 'underline'
    },
    code: {
      color: 'inherit'
    }
  },
  [['h1', 'h2', 'h3', 'h4', 'h5', 'h6']]: {
    '&[id]::before': {
      // inspired by https://css-tricks.com/hash-tag-links-padding/
      content: "''",
      display: 'block',
      marginTop: -HEADER_HEIGHT,
      height: HEADER_HEIGHT,
      visibility: 'hidden',

/>
      
      
        
          
            
              
                <span>{subtitle}</span>
                
              
            
            {versions &amp;&amp; versions.length &gt; 0 &amp;&amp; (

const Content = styled.div({
  padding: `8px ${horizontalPadding + iconSize + iconMargin}px`,
  color: colors.text1,
  p: {
    fontSize: '1rem'
  }
});

const lineItemNumberSize = 24;
const lineItemNumberOffset = lineItemNumberSize / 2;
const ListItemNumber = styled.div(size(lineItemNumberSize), {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: `1px solid ${colors.primary}`,
  borderRadius: '50%',
  fontSize: 14,
  color: colors.primary,
  textAlign: 'center',
  backgroundColor: 'white',
  position: 'absolute',
  top: 0,
  left: lineItemNumberSize / -2,
  svg: size(iconSize)
});

export const ExpansionPanelList = styled.ul({
  marginLeft: lineItemNumberOffset,
  borderLeft: `1px solid ${colors.primary}`,
  listStyle: 'none'
});

height: HEADER_HEIGHT,
      visibility: 'hidden',
      pointerEvents: 'none'
    },
    ':not(:hover) a svg': {
      visibility: 'hidden'
    },
    code: {
      whiteSpace: 'normal'
    },
    'a.anchor': {
      ':hover': {
        opacity: colors.hoverOpacity
      },
      svg: {
        fill: colors.primary
      },
      '&.before': {
        top: 'auto'
      }
    }
  },
  [['h2', 'h3', 'h4']]: {
    ':not(:first-child)': {
      marginTop: 56
    }
  },
  img: {
    display: 'block',
    maxWidth: '100%',
    margin: '0 auto'
  }

justifyContent: 'center',
  border: `1px solid ${colors.primary}`,
  borderRadius: '50%',
  fontSize: 14,
  color: colors.primary,
  textAlign: 'center',
  backgroundColor: 'white',
  position: 'absolute',
  top: 0,
  left: lineItemNumberSize / -2,
  svg: size(iconSize)
});

export const ExpansionPanelList = styled.ul({
  marginLeft: lineItemNumberOffset,
  borderLeft: `1px solid ${colors.primary}`,
  listStyle: 'none'
});

const StyledListItem = styled.li({
  marginBottom: 0,
  paddingLeft: lineItemNumberOffset + 8,
  fontSize: '1rem',
  lineHeight: 1.5,
  position: 'relative',
  ':first-of-type h4': {
    marginTop: 0
  },
  ':not(:last-child)': {
    marginBottom: 28
  },
  h4: {

const Container = styled.footer({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  padding: 32,
  fontSize: 14,
  color: colors.text1,
  backgroundColor: colors.background
});

const Colophon = styled.span({
  marginTop: 8,
  marginBottom: 20,
  a: {
    color: colors.primary,
    textDecoration: 'none',
    ':hover': {
      textDecoration: 'underline'
    }
  }
});

const FooterNav = styled.nav({
  textAlign: 'center',
  a: {
    margin: '0 12px',
    color: 'inherit',
    textDecoration: 'none',
    ':hover': {
      textDecoration: 'underline'
    }

content: "''",
      display: 'block',
      marginTop: -headerHeight,
      height: headerHeight,
      visibility: 'hidden',
      pointerEvents: 'none',
    },
    ':not(:hover) a svg': {
      visibility: 'hidden',
    },
    'a.anchor': {
      ':hover': {
        opacity: colors.hoverOpacity,
      },
      svg: {
        fill: colors.primary,
      },
    },
  },
  [['h2', 'h3', 'h4']]: {
    ':not(:first-child)': {
      marginTop: 56,
    },
  },
  img: {
    display: 'block',
    maxWidth: '100%',
    margin: '0 auto',
  },
  table,
})

':hover': {
    zIndex: 1,
    [subpageElements]: {
      opacity: 1,
      visibility: 'visible'
    }
  }
}));

const StyledAnchor = styled.a({
  display: 'flex',
  alignItems: 'center',
  height: '100%',
  padding: '0 4px',
  fontSize: 18,
  color: colors.primary,
  textDecoration: 'none',
  ':hover': {
    opacity: colors.hoverOpacity
  }
});

const SubpageAnchor = styled.a({
  display: 'block',
  color: colors.text1,
  textDecoration: 'none',
  whiteSpace: 'nowrap',
  ':hover': {
    opacity: colors.hoverOpacity
  },
  ':not(:last-child)': {
    marginBottom: 8