Skip to main content
NearYou includes a built-in theme system that automatically adapts to the device’s color scheme. This guide explains how the theme system works and how to customize it.

​
Overview

The theme system provides:
  • Automatic light/dark mode switching
  • Consistent color palette across the app
  • Platform-specific font configurations
  • Type-safe theme access
  • Custom color overrides

​
Color Scheme

Colors are defined in src/constants/theme.ts with separate palettes for light and dark modes.

​
Color Definitions

src/constants/theme.ts
const tintColorLight = '#0a7ea4';
const tintColorDark = '#fff';

export const Colors = {
  light: {
    text: '#11181C',
    background: '#fff',
    tint: tintColorLight,
    icon: '#687076',
    tabIconDefault: '#687076',
    tabIconSelected: tintColorLight,
  },
  dark: {
    text: '#ECEDEE',
    background: '#151718',
    tint: tintColorDark,
    icon: '#9BA1A6',
    tabIconDefault: '#9BA1A6',
    tabIconSelected: tintColorDark,
  },
};

​
Available Color Keys

Primary text color
  • Light: #11181C (dark gray)
  • Dark: #ECEDEE (light gray)
Background color for views and containers
  • Light: #fff (white)
  • Dark: #151718 (near black)
Primary accent color for interactive elements
  • Light: #0a7ea4 (blue)
  • Dark: #fff (white)
Default icon color
  • Light: #687076 (medium gray)
  • Dark: #9BA1A6 (light gray)
Unselected tab icon color
  • Light: #687076
  • Dark: #9BA1A6
Selected tab icon color
  • Light: #0a7ea4
  • Dark: #fff

​
Customizing Colors

​
Adding New Color Keys

To add new colors to the theme:
1

Update theme.ts

Add your color to both light and dark palettes:
src/constants/theme.ts
export const Colors = {
  light: {
    // ... existing colors
    success: '#10b981',
    error: '#ef4444',
    warning: '#f59e0b',
  },
  dark: {
    // ... existing colors
    success: '#34d399',
    error: '#f87171',
    warning: '#fbbf24',
  },
};
2

Use in components

Access your new colors with the useThemeColor hook:
import { useThemeColor } from '@/hooks/use-theme-color';

function SuccessMessage() {
  const successColor = useThemeColor({}, 'success');
  
  return (
    <View style={{ backgroundColor: successColor }}>
      <Text>Success!</Text>
    </View>
  );
}

​
Overriding Default Colors

You can override theme colors per-component: 
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';

<ThemedView
  lightColor="#f0f9ff"
  darkColor="#0c4a6e"
  style={styles.container}
>
  <ThemedText
    lightColor="#0369a1"
    darkColor="#7dd3fc"
  >
    Custom colored text
  </ThemedText>
</ThemedView>

​
Font System

The font system provides platform-specific font families:
src/constants/theme.ts
import { Platform } from 'react-native';

export const Fonts = Platform.select({
  ios: {
    sans: 'system-ui',
    serif: 'ui-serif',
    rounded: 'ui-rounded',
    mono: 'ui-monospace',
  },
  default: {
    sans: 'normal',
    serif: 'serif',
    rounded: 'normal',
    mono: 'monospace',
  },
  web: {
    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
    serif: "Georgia, 'Times New Roman', serif",
    rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
  },
});

​
Using Fonts

import { StyleSheet } from 'react-native';
import { Fonts } from '@/constants/theme';

const styles = StyleSheet.create({
  title: {
    fontFamily: Fonts.sans,
    fontSize: 24,
    fontWeight: 'bold',
  },
  code: {
    fontFamily: Fonts.mono,
    fontSize: 14,
  },
});

​
Theme Hooks

​
useColorScheme

Detects the current color scheme:
src/hooks/use-color-scheme.ts
import { useColorScheme } from '@/hooks/use-color-scheme';

function MyComponent() {
  const colorScheme = useColorScheme(); // 'light' | 'dark' | null
  
  return (
    <View>
      <Text>Current theme: {colorScheme ?? 'light'}</Text>
    </View>
  );
}
On web, this hook uses window.matchMedia('(prefers-color-scheme: dark)') to detect the color scheme. On native, it uses React Native’s built-in useColorScheme hook.

​
useThemeColor

Resolves colors based on the current theme:
src/hooks/use-theme-color.ts
import { useThemeColor } from '@/hooks/use-theme-color';

function MyComponent() {
  // Get from theme
  const textColor = useThemeColor({}, 'text');
  
  // With overrides
  const bgColor = useThemeColor(
    { light: '#f3f4f6', dark: '#1f2937' },
    'background'
  );
  
  return (
    <View style={{ backgroundColor: bgColor }}>
      <Text style={{ color: textColor }}>Themed content</Text>
    </View>
  );
}
Function signature: 
function useThemeColor(
  props: { light?: string; dark?: string },
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
): string

​
Themed Components

​
ThemedText

Automatically themed text with predefined styles: 
import { ThemedText } from '@/components/themed-text';

<ThemedText type="title">Large Title</ThemedText>
<ThemedText type="subtitle">Section Heading</ThemedText>
<ThemedText type="defaultSemiBold">Bold Text</ThemedText>
<ThemedText type="link">Link Text</ThemedText>
<ThemedText>Regular Text</ThemedText>

​
ThemedView

Automatically themed view container: 
import { ThemedView } from '@/components/themed-view';

<ThemedView style={styles.container}>
  {/* Content automatically gets themed background */}
</ThemedView>

// With custom colors
<ThemedView
  lightColor="#f9fafb"
  darkColor="#111827"
>
  {/* Content */}
</ThemedView>

​
Theme Provider Setup

The theme is configured in the root layout:
src/app/_layout.tsx
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useColorScheme } from '@/hooks/use-color-scheme';

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* App content */}
    </ThemeProvider>
  );
}
This setup ensures:
  • Navigation elements match the current theme
  • Theme changes propagate throughout the app
  • System preference changes are detected

​
Best Practices

Use Semantic Names

Name colors by purpose (e.g., primary, danger) rather than appearance (e.g., blue, red)

Test Both Themes

Always test your UI in both light and dark modes to ensure readability

Consistent Contrast

Maintain WCAG AA contrast ratios (4.5:1 for normal text)

Use Themed Components

Prefer ThemedText and ThemedView over raw React Native components

​
Alternative Styling Solutions

While NearYou uses a custom theme system, you can also use these popular alternatives:

​
Next Steps

Components

Explore themed components

Navigation

Configure app navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us