Using Theme | NativeBase | Universal Components for React and React Native

Playground
function ColorPalete() {
  const {
    colors
  } = useTheme();
  return <SimpleGrid columns={5}>
      {Object.keys(colors['emerald']).map(colorKey => <Box p={5} bg={`emerald.${colorKey}`} />)}
    </SimpleGrid>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1} p={3}>
        <ColorPalete />
      </Center>
    </NativeBaseProvider>;
}
function ColorPalete() {
  const {
    colors
  } = useTheme();
  return <SimpleGrid columns={5}>
      {Object.keys(colors['emerald']).map(colorKey => <Box p={5} bg={`emerald.${colorKey}`} />)}
    </SimpleGrid>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1} p={3}>
        <ColorPalete />
      </Center>
    </NativeBaseProvider>;
}

Playground
function Tokens() {
  const [contrastThreshold, lightText] = useToken('colors', ['contrastThreshold', 'lightText']);
  return <Center bg="emerald.400" flexDirection="row" p={4} rounded={4}>
      Contrast threshold is:{' '}
      <Text color={lightText} fontWeight="bold">
        {contrastThreshold}
      </Text>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Tokens />
      </Center>
    </NativeBaseProvider>;
}
function Tokens() {
  const [contrastThreshold, lightText] = useToken('colors', ['contrastThreshold', 'lightText']);
  return <Center bg="emerald.400" flexDirection="row" p={4} rounded={4}>
      Contrast threshold is:{' '}
      <Text color={lightText} fontWeight="bold">
        {contrastThreshold}
      </Text>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Tokens />
      </Center>
    </NativeBaseProvider>;
}

Playground
function UseContrastingTextHook() {
  const bgDark = 'emerald.700';
  const bgLight = 'emerald.200';
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <Stack space={4}>
      <Button bg={bgDark} _text={{
      color: colorContrastDark
    }}>
        NativeBase
      </Button>
      <Button bg={bgLight} _text={{
      color: colorContrastLight
    }}>
        NativeBase
      </Button>
    </Stack>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseContrastingTextHook />
      </Center>
    </NativeBaseProvider>;
}
function UseContrastingTextHook() {
  const bgDark = 'emerald.700';
  const bgLight = 'emerald.200';
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <Stack space={4}>
      <Button bg={bgDark} _text={{
      color: colorContrastDark
    }}>
        NativeBase
      </Button>
      <Button bg={bgLight} _text={{
      color: colorContrastLight
    }}>
        NativeBase
      </Button>
    </Stack>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseContrastingTextHook />
      </Center>
    </NativeBaseProvider>;
}

Playground
function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center flex={1} bg={colorMode === 'dark' ? 'black' : 'white'}>
      <Text fontSize="lg" display="flex">
        The active color mode is <Text bold>{colorMode}</Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
}
function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center flex={1} bg={colorMode === 'dark' ? 'black' : 'white'}>
      <Text fontSize="lg" display="flex">
        The active color mode is <Text bold>{colorMode}</Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
}

Playground
function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center flex={1} bg={useColorModeValue('white', 'black')}>
      <Text fontSize="lg" display="flex">
        The active color mode is{' '}
        <Text bold>{useColorModeValue('Light', 'Dark')}</Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
}
function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center flex={1} bg={useColorModeValue('white', 'black')}>
      <Text fontSize="lg" display="flex">
        The active color mode is{' '}
        <Text bold>{useColorModeValue('Light', 'Dark')}</Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
}