
# useTheme
Returns the currently active theme including color schemes, spacing, typography, and other design tokens.

## Import

```tsx
import { useTheme } from '@coinbase/cds-mobile'
```

## Examples

### `useTheme` hook

The `useTheme` hook provides access to the current `theme` and `activeColorScheme`.

The `color` and `spectrum` objects automatically change based on the `activeColorScheme`.

```jsx
const theme = useTheme();
theme.activeColorScheme; // "light" or "dark"
theme.spectrum; // Resolves to lightSpectrum or darkSpectrum, depends on activeColorScheme
theme.color; // Resolves to lightColor or darkColor, depends on activeColorScheme
theme.color.bgPrimary; // "rgb(0,82,255)" or "rgb(87,139,250)", depends on activeColorScheme
theme.space[2]; // 16
theme.borderRadius[200]; // 8
theme.fontSize.display3; // 40
```

### Basic usage

```tsx
function Example() {
  const theme = useTheme();

  return (
    <VStack gap={2}>
      <Box padding={3} background="bgAlternate" borderRadius={300}>
        <Text>Current Color Scheme: {theme.activeColorScheme}</Text>
      </Box>

      <Box padding={3} background="bgAlternate" borderRadius={300}>
        <Text font="headline">Theme Colors</Text>
        <Text>Primary: {theme.color.bgPrimary}</Text>
        <Text>Background: {theme.color.bg}</Text>
        <Text>Text: {theme.color.fg}</Text>
      </Box>
    </VStack>
  );
}
```

### Styling with Theme values

```tsx
function Example() {
  const theme = useTheme();

  const styles = StyleSheet.create({
    container: {
      padding: theme.space[3],
      backgroundColor: theme.color.bgAlternate,
      borderRadius: theme.borderRadius[300],
      ...Platform.select({
        ios: {
          shadowColor: theme.shadow.elevation1.shadowColor,
          shadowOffset: theme.shadow.elevation1.shadowOffset,
          shadowOpacity: theme.shadow.elevation1.shadowOpacity,
          shadowRadius: theme.shadow.elevation1.shadowRadius,
        },
        android: {
          elevation: 1,
        },
      }),
    },
    text: {
      fontSize: theme.fontSize.body,
      lineHeight: theme.lineHeight.body,
      fontFamily: theme.fontFamily.body,
      color: theme.color.fgPrimary,
    },
  });

  return (
    <Box style={styles.container}>
      <Text style={styles.text}>Styled using theme values</Text>
    </Box>
  );
}
```

### Color scheme detection

```tsx
function Example() {
  const theme = useTheme();
  const isDarkMode = theme.activeColorScheme === 'dark';

  return (
    <Box padding={3} background={isDarkMode ? 'bgElevation1' : 'bgAlternate'} borderRadius={300}>
      <Text>This box adapts to {isDarkMode ? 'dark' : 'light'} mode</Text>
      <Text color={isDarkMode ? 'fgMuted' : 'fgPrimary'} font="headline">
        With adaptive text colors
      </Text>
    </Box>
  );
}
```


