:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  /* ... */
}

.dark:root {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  /* ... */
}

colors: {
  background: 'hsl(var(--background))',
  foreground: 'hsl(var(--foreground))',
  primary: {
    DEFAULT: 'hsl(var(--primary))',
    foreground: 'hsl(var(--primary-foreground))',
  },
  // ...
}

import { useColorScheme } from 'nativewind';

function MyComponent() {
  const { colorScheme, setColorScheme, toggleColorScheme } = useColorScheme();
  // colorScheme is 'light' | 'dark'
}

import { useColorScheme } from '~/hooks/useColorScheme';

function MyComponent() {
  const { isDark, toggleColorScheme } = useColorScheme();
}

import { ThemeToggle } from '~/components/ui/theme-toggle';

// In your header or settings
<ThemeToggle />

:root {
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}

import { CHART_COLORS } from '~/components/ui/chart';
import { NAV_THEME } from '~/lib/theme';

// For charting libraries
const color = CHART_COLORS.light.chart1; // 'hsl(12, 76%, 61%)'

import { ThemeProvider, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { useColorScheme } from 'nativewind';
import { NAV_THEME } from '~/lib/theme';

function Layout() {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === 'dark';

  return (
    <ThemeProvider value={isDark ? DarkTheme : DefaultTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

:root {
  --primary: 221 83% 53%;
  --primary-foreground: 210 40% 98%;
}