Dark Mode

Reactnatively has first-class dark mode support. The glass engine, semantic colors, diffusion layers, tint values, and border tones all adapt automatically when the color scheme changes. You configure the behavior once at the provider and never branch on colorScheme inside individual components.

colorScheme options

"system"Follows the device / OS color scheme preference. Switches automatically when the user toggles the system setting. Recommended for most apps.

"dark"Forces dark mode regardless of device preference.

"light"Forces light mode regardless of device preference.

Setup

app/_layout.tsx

import { ReactnativelyProvider } from 'reactnatively';

export default function RootLayout() {
  return (
    // Follows system preference automatically
    <ReactnativelyProvider colorScheme="system">
      <Stack />
    </ReactnativelyProvider>
  );
}

Reading the color scheme

ThemeToggle.tsx

1import { useColorScheme, useIsDark } from 'reactnatively';23export function ThemeAwareIcon() {4  const scheme = useColorScheme(); // 'light' | 'dark'5  const isDark = useIsDark();      // true | false67  return (8    <Icon9      name={isDark ? 'moon' : 'sun'}10      color={isDark ? '#fff' : '#000'}11    />12  );13}

Per-scheme colors in createTheme

Override colors per scheme by providing a light and dark variant in your theme definition:

theme.ts

1import { createTheme } from 'reactnatively/theme';23export const theme = createTheme({4  // These apply in both schemes5  colors: {6    primary: '#6366f1',7  },89  // Light-specific overrides10  light: {11    colors: {12      background: '#f8f8fa',13      surface:    '#ffffff',14      text:       '#0a0a0b',15    },16  },1718  // Dark-specific overrides19  dark: {20    colors: {21      background: '#09090b',22      surface:    'rgba(255,255,255,0.06)',23      text:       '#fafafa',24    },25  },26});

Adaptive styles in components

AdaptiveCard.tsx

1import { useTheme, useIsDark } from 'reactnatively';2import { View, Text } from 'react-native';34export function AdaptiveCard({ label }: { label: string }) {5  const { theme } = useTheme();6  const isDark = useIsDark();78  return (9    <View style={{10      backgroundColor: isDark11        ? 'rgba(255,255,255,0.06)'12        : 'rgba(0,0,0,0.04)',13      borderColor: isDark14        ? 'rgba(255,255,255,0.08)'15        : 'rgba(0,0,0,0.08)',16      borderWidth: 1,17      borderRadius: theme.radii.lg,18      padding: theme.spacing[4],19    }}>20      <Text style={{ color: theme.colors.text }}>{label}</Text>21    </View>22  );23}

Glass engine and dark mode

The glass engine reads colorScheme from the theme context and adjusts these values automatically:

Tint colorSlightly cooler / warmer base tint per scheme

Border colorSeparate subtle/medium/strong values per scheme

DiffusionWarm white upper haze / atmospheric-blue lower haze — same structure, tuned per scheme

Shadow colorBlack in dark mode, blue-grey in light mode for softer shadows

BlurView tint hint"dark" tint in dark mode, "default" in light mode

No action is required from you — wrapping your app in ReactnativelyProvider with colorScheme="system" is sufficient for full dark mode support.