Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.


useColorMode is a custom hook which return current color mode.


To use the useColorMode in your project, import useColorMode from @gluestack-ui/themed as demonstrated below.
import { useColorMode } from "@gluestack-ui/themed"
Let's use our useColorMode value to give background color to View from react-native.
import { View } from "react-native"
import { useColorMode } from "@gluestack-ui/themed"
function Example() {
const colorMode = useColorMode()
return (
width: 100,
height: 100,
backgroundColor: colorMode === "light" ? "white" : "black",