LightOnDark

When you set a dark background, wrap the children in LightOnDark and components like Text and form fields will automatically switch to the light versions. You can use DarkOnLight to switch back. Use the useLightOnDark hook to add support for this function.

<LightOnDark>
  <Text headingLevel={2} font="tiemposHeadline" size="12xl" bold>Hello world</Text>
  <Select />
  <Well>
    <DarkOnLight>
      <Text>Hello again</Text>
    </DarkOnLight>
  </Well>
</LightOnDark>