All of the components in quark are themable. Along with the color palette values, a full theme can also specify different shades of a primary color (primaryColor, primaryColorDark, and primaryColorLight). To provide custom colors, wrap your entire application in a Theme component:

const ThemedApp = () => (
  <Theme
    colors={{
      primaryColor: 'green',
      primaryColorDark: 'darkgreen',
      primaryColorLight: 'lightgreen',
    }}
  >
    <App />
  </Theme>
)

Retrieving theme colors is easily achieved with the GetTheme component.

<GetTheme>
  {({ primaryColor }) => <div style={{backgroundColor: primaryColor}} />}
</GetTheme>