useColorModeValue | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Responsive

Features

Utility Props

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

Migration

Upgrading to 3.2.0 from 3.x

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

useColorModeValue

useColorModeValue is a custom hook that can retrieve a value from parameters passed based on active color mode value.

Import

Copy
import { useColorModeValue } from 'native-base';

Example


Playground
function UseColorMode() {
  const {
    toggleColorMode
  } = useColorMode();
  return <Center>
      <Box p="4" flex="1" bg={useColorModeValue("warmGray.50", "coolGray.800")} maxW="300" w="100%">
        <Text fontSize="lg" display="flex" mb={20}>
          The active color mode is{" "}
          <Text bold fontSize="18px">
            {useColorModeValue("Light", "Dark")}
          </Text>
        </Text>
        <Button onPress={toggleColorMode}>Toggle</Button>
      </Box>
    </Center>;
}

const Example = () => {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
};function UseColorMode() {
  const {
    toggleColorMode
  } = useColorMode();
  return <Center>
      <Box p="4" flex="1" bg={useColorModeValue("warmGray.50", "coolGray.800")} maxW="300" w="100%">
        <Text fontSize="lg" display="flex" mb={20}>
          The active color mode is{" "}
          <Text bold fontSize="18px">
            {useColorModeValue("Light", "Dark")}
          </Text>
        </Text>
        <Button onPress={toggleColorMode}>Toggle</Button>
      </Box>
    </Center>;
}

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

Return value

Accepts 2 parameters and returns either of the two, based on current color-mode (first parameter for light mode and second parameter for dark mode).

Quick Nav

useColorModeValue | NativeBase | Universal Components for React and React Native