Skip to main content
The useTheme hook provides a simple way to access the current theme colors based on the user’s color scheme preference (light or dark mode). It returns the appropriate color palette and a boolean indicating whether dark mode is active.

​
Usage

import { useTheme } from "@/hooks/useTheme";

export function MyComponent() {
  const { theme, isDark } = useTheme();

  return (
    <View style={{ backgroundColor: theme.backgroundRoot }}>
      <Text style={{ color: theme.text }}>
        {isDark ? "Dark mode is enabled" : "Light mode is enabled"}
      </Text>
    </View>
  );
}

​
Return Value

The hook returns an object with two properties:
​
theme
object
required
The current theme color palette based on the active color scheme. Contains all color tokens defined in Colors constant.
​
isDark
boolean
required
Boolean indicating whether dark mode is currently active. true when the user has dark mode enabled, false otherwise.

​
Examples

​
Basic Styling

import { View, Text } from "react-native";
import { useTheme } from "@/hooks/useTheme";

export function WorkoutCard() {
  const { theme } = useTheme();

  return (
    <View
      style={{
        backgroundColor: theme.backgroundDefault,
        borderColor: theme.border,
        borderWidth: 1,
        padding: 16,
        borderRadius: 12,
      }}
    >
      <Text style={{ color: theme.text, fontSize: 18, fontWeight: "600" }}>
        Morning Workout
      </Text>
      <Text style={{ color: theme.textSecondary, fontSize: 14 }}>
        45 minutes
      </Text>
    </View>
  );
}

​
Conditional Rendering Based on Theme

import { View, Image } from "react-native";
import { useTheme } from "@/hooks/useTheme";

export function LogoHeader() {
  const { isDark } = useTheme();

  return (
    <View>
      <Image
        source={isDark ? require("./logo-dark.png") : require("./logo-light.png")}
        style={{ width: 120, height: 40 }}
      />
    </View>
  );
}

​
Using Training Type Colors

import { View, Text } from "react-native";
import { useTheme } from "@/hooks/useTheme";

type TrainingType = "t1" | "t2" | "t3a" | "t3b";

interface TrainingBadgeProps {
  type: TrainingType;
  label: string;
}

export function TrainingBadge({ type, label }: TrainingBadgeProps) {
  const { theme } = useTheme();

  return (
    <View
      style={{
        backgroundColor: theme[type],
        paddingHorizontal: 12,
        paddingVertical: 6,
        borderRadius: 16,
      }}
    >
      <Text style={{ color: theme.buttonText, fontSize: 12, fontWeight: "600" }}>
        {label}
      </Text>
    </View>
  );
}

​
When to Use

Styling Components

Use useTheme to apply theme-aware colors to your components’ styles, ensuring they adapt to the user’s color scheme preference.

Conditional Logic

Use the isDark value for conditional rendering when you need different behavior or assets in light vs. dark mode.

Dynamic Backgrounds

Use theme colors for backgrounds, borders, and other visual elements that should match the current theme.

Accessible Colors

Leverage the pre-defined color palette that ensures proper contrast ratios for text readability in both modes.
The useTheme hook internally uses useColorScheme to detect the current color scheme and returns the corresponding color palette from the Colors constant.

useColorScheme

Get the raw color scheme value (“light” or “dark”)

useScreenOptions

Apply theme-aware navigation options to screens

Build docs developers (and LLMs) love

Get started for freeTalk to us