Styling

import { StyleSheet, useUnistyles } from 'react-native-unistyles'

function MyComponent() {
  const { theme } = useUnistyles()
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello!</Text>
    </View>
  )
}

const styles = StyleSheet.create((theme) => ({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
    padding: theme.spacing.md,
  },
  title: {
    fontSize: theme.typography.sizes['2xl'],
    fontFamily: theme.typography.fonts.bold,
    color: theme.colors.foreground,
  },
}))

//  DON'T
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    padding: 16,
    color: '#000000',
  }
})

//  DO
const styles = StyleSheet.create((theme) => ({
  container: {
    backgroundColor: theme.colors.background,
    padding: theme.spacing.md,
    color: theme.colors.foreground,
  }
}))

// Works in both light and dark mode
const styles = StyleSheet.create((theme) => ({
  container: {
    backgroundColor: theme.colors.background, // white in light, dark gray in dark
  },
  text: {
    color: theme.colors.foreground, // black in light, white in dark
  },
}))

import { UnistylesRuntime } from 'react-native-unistyles'

// Check current theme
const isDark = UnistylesRuntime.themeName === "dark"

// Change theme programmatically
UnistylesRuntime.setTheme("dark")
UnistylesRuntime.setTheme("light")

// Follow system theme
UnistylesRuntime.setAdaptiveThemes(true)

import { Button, Card, Text, TextField } from '@/components'

<Card preset="elevated">
  <Text preset="heading">Welcome</Text>
  <TextField label="Email" placeholder="you@example.com" />
  <Button variant="filled" onPress={handleSubmit}>
    Continue
  </Button>
</Card>

import { StyleSheet, useUnistyles } from 'react-native-unistyles'
import { Pressable, Text } from 'react-native'

type ButtonVariant = 'filled' | 'outlined' | 'ghost'
type ButtonSize = 'sm' | 'md' | 'lg'

interface ButtonProps {
  variant?: ButtonVariant
  size?: ButtonSize
  onPress: () => void
  children: React.ReactNode
}

function Button({ variant = 'filled', size = 'md', onPress, children }: ButtonProps) {
  return (
    <Pressable 
      style={[
        styles.base,
        styles.variants({ variant, size })
      ]} 
      onPress={onPress}
    >
      <Text style={styles.text({ variant })}>{children}</Text>
    </Pressable>
  )
}

const styles = StyleSheet.create((theme) => ({
  base: {
    borderRadius: theme.radius.md,
    justifyContent: 'center',
    alignItems: 'center',
  },
  variants: {
    variants: {
      variant: {
        filled: {
          backgroundColor: theme.colors.primary,
        },
        outlined: {
          borderWidth: 1,
          borderColor: theme.colors.border,
          backgroundColor: 'transparent',
        },
        ghost: {
          backgroundColor: 'transparent',
        },
      },
      size: {
        sm: { height: 36, paddingHorizontal: theme.spacing.md },
        md: { height: 44, paddingHorizontal: theme.spacing.lg },
        lg: { height: 56, paddingHorizontal: theme.spacing.xl },
      },
    },
  },
  text: {
    variants: {
      variant: {
        filled: { color: theme.colors.primaryForeground },
        outlined: { color: theme.colors.foreground },
        ghost: { color: theme.colors.primary },
      },
    },
  },
}))

const styles = StyleSheet.create((theme, runtime) => ({
  container: {
    flexDirection: 'column',
    padding: theme.spacing.md,
    
    // Tablet and up
    variants: {
      breakpoint: {
        md: {
          flexDirection: 'row',
          maxWidth: 800,
          alignSelf: 'center',
        },
      },
    },
  },
}))

export const lightTheme = {
  colors: {
    primary: '#6366F1',        // Your brand color
    primaryForeground: '#fff',
    background: '#ffffff',
    foreground: '#000000',
    // ... more colors
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  // ... typography, radius, shadows
}

export const darkTheme = {
  colors: {
    primary: '#818CF8',        // Slightly lighter for dark mode
    primaryForeground: '#fff',
    background: '#0a0a0a',
    foreground: '#ffffff',
    // ... matching structure
  },
  // Same spacing, typography, etc.
}