useColorMode | NativeBase

NativeBase

3.4.x

Search

⌘

K

Introduction

Setup NativeBase Provider

Resources

Contribution

Creating a Universal App with NativeBase and Solito

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

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

More

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

useColorMode

useColorMode is a custom hook that can set the color mode or retrieve it.

Import

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

Example


Playground
function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center>
      <Box p="4" flex="1" maxW="300" mt={10} w="100%" bg={colorMode === "dark" ? "coolGray.800" : "warmGray.50"} safeArea>
        <Text fontSize="lg" display="flex" mb="20">
          The active color mode is{" "}
          <Text bold fontSize="lg">
            {colorMode}
          </Text>
        </Text>
        <Button onPress={toggleColorMode} h={10}>
          Toggle
        </Button>
      </Box>
    </Center>;
}

const Example = () => {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
};function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center>
      <Box p="4" flex="1" maxW="300" mt={10} w="100%" bg={colorMode === "dark" ? "coolGray.800" : "warmGray.50"} safeArea>
        <Text fontSize="lg" display="flex" mb="20">
          The active color mode is{" "}
          <Text bold fontSize="lg">
            {colorMode}
          </Text>
        </Text>
        <Button onPress={toggleColorMode} h={10}>
          Toggle
        </Button>
      </Box>
    </Center>;
}

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

Return

Name

Type

Description

Default

colorMode

light, dark

The active color mode.

light

setColorMode

function

Use to set color mode.

-

toggleColorMode

function

Use to toggle between light and dark mode.

-

Quick Nav

Import

Example

Return

useColorMode | NativeBase | Universal Components for React and React Native