useContrastText | NativeBase

useContrastText is a custom hook that provides color contrast text color (either lightText or darkText) against the background color that is passed as a parameter.

Import

Copy
import { useContrastText } from "native-base";

Examples

Basic


Playground
const Example = () => {
  const bgDark = "coolGray.900";
  const bgLight = "coolGray.100";
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <Center>
      <VStack space="4">
        <Button bg={bgDark} _text={{
        color: colorContrastDark
      }}>
          NativeBase
        </Button>
        <Button bg={bgLight} _text={{
        color: colorContrastLight
      }}>
          NativeBase
        </Button>
      </VStack>
    </Center>;
};const Example = () => {
  const bgDark = "coolGray.900";
  const bgLight = "coolGray.100";
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <Center>
      <VStack space="4">
        <Button bg={bgDark} _text={{
        color: colorContrastDark
      }}>
          NativeBase
        </Button>
        <Button bg={bgLight} _text={{
        color: colorContrastLight
      }}>
          NativeBase
        </Button>
      </VStack>
    </Center>;
};

Using Accessible Colors

By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better

color and contrast accessibility

with the help of

useAccessibleColors

hook.


Playground
const ButtonTemplate = ({
  shade
}) => {
  const colorContrast = useContrastText(`emerald.${shade}`);
  return <Center>
      <Button colorScheme="emerald" key={`emerald.${shade}`} bg={`emerald.${shade}`} _text={{
      color: colorContrast
    }} mb={1}>
        Save
      </Button>
    </Center>;
};

const Example = () => {
  const [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <Center>
      <Stack space="3" direction={["column", "row"]}>
        {Object.keys(colors.yellow).map((key, index) => {
        if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
      })}
      </Stack>
      <HStack mt="6" space="3">
        <Text>Toggle Accessible Colors</Text>
        <Switch onValueChange={toggleAccessibleColors} colorScheme="coolGray" />
      </HStack>
    </Center>;
};const ButtonTemplate = ({
  shade
}) => {
  const colorContrast = useContrastText(`emerald.${shade}`);
  return <Center>
      <Button colorScheme="emerald" key={`emerald.${shade}`} bg={`emerald.${shade}`} _text={{
      color: colorContrast
    }} mb={1}>
        Save
      </Button>
    </Center>;
};

const Example = () => {
  const [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <Center>
      <Stack space="3" direction={["column", "row"]}>
        {Object.keys(colors.yellow).map((key, index) => {
        if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
      })}
      </Stack>
      <HStack mt="6" space="3">
        <Text>Toggle Accessible Colors</Text>
        <Switch onValueChange={toggleAccessibleColors} colorScheme="coolGray" />
      </HStack>
    </Center>;
};

Return value

Accepts a background color and returns a text color that maintains the contrast ratio for better accessibility.

Quick Nav

Using Accessible Colors

Return value

MadeWithNativeBase

gluestack-ui

useContrastText | NativeBase | Universal Components for React and React Native