Apple UIKit Colors

Accurate Apple UIKit color system for iOS and macOS with comprehensive platform support. This monorepo provides native Apple colors for TypeScript, React Native, and Tailwind CSS with automatic light/dark mode switching.

📦 Packages

Package	Description	Platform Support
apple-uikit-colors	Core UIKit colors in TypeScript	Universal
react-native-uikit-colors	React Native bindings with NativeWind integration	iOS, Android, Web
tailwindcss-uikit-colors	Tailwind CSS plugin with v3 & v4 support	Web, React Native Web

✨ Features

• 🎨 Authentic Apple Colors - Pixel-perfect iOS and macOS system colors
• 🌓 Automatic Dark Mode - Colors adapt to system theme preferences
• 🔄 Cross-Platform - Works on iOS, Android, Web, and React Native
• 🎯 TypeScript Ready - Full type safety and IntelliSense support
• ⚡ Multiple Integration Options - Hooks, CSS variables, Tailwind classes
• 🎪 Tailwind CSS v3 & v4 - Support for both current and next-gen Tailwind

🚀 Quick Start

For React Native Projects

npm install react-native-uikit-colors

import { useColor } from 'react-native-uikit-colors'

function MyComponent() {
  const backgroundColor = useColor('systemBackground')
  const textColor = useColor('label')
  
  return (
    <View style={{ backgroundColor }}>
      <Text style={{ color: textColor }}>Hello World</Text>
    </View>
  )
}

For Tailwind CSS Projects

npm install tailwindcss-uikit-colors

// tailwind.config.js
import { withUIKit } from 'tailwindcss-uikit-colors'

export default withUIKit({
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // ... your config
})

/* Import colors CSS */
@import 'tailwindcss-uikit-colors/selector.css';

<div class="bg-system-background text-label">
  <h1 class="text-secondary-label">Hello World</h1>
</div>

For TypeScript Projects

npm install apple-uikit-colors

import { lightPalette, darkPalette } from 'apple-uikit-colors'

const theme = {
  light: lightPalette,
  dark: darkPalette
}

🎨 Available Colors

System Colors

• Background: system-background, secondary-system-background, tertiary-system-background
• Grouped: system-grouped-background, secondary-system-grouped-background, tertiary-system-grouped-background
• Labels: label, secondary-label, tertiary-label, quaternary-label
• Fills: system-fill, secondary-system-fill, tertiary-system-fill, quaternary-system-fill
• Separators: separator, opaque-separator, non-opaque-separator

Semantic Colors

• Core: red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown
• Grays: gray, gray2, gray3, gray4, gray5, gray6
• Interactive: link, placeholder-text

Platform-Specific Colors

• iOS: Complete iOS system color palette
• macOS: Extended macOS colors including vibrant fills, materials, and controls

🔧 Advanced Usage

React Native with NativeWind

import { withUIKit } from 'react-native-uikit-colors/tailwind'
import { useCurrentColorsVariants } from 'react-native-uikit-colors'

// Configure Tailwind
export default withUIKit({
  content: ['./src/**/*.{js,jsx,ts,tsx}']
})

// Use in components
function App() {
  const currentThemeColors = useCurrentColorsVariants()
  
  return (
    <View style={currentThemeColors} className="flex-1">
      <Text className="text-label text-lg">Native + Web</Text>
    </View>
  )
}

Tailwind CSS v4

/* Import v4 colors */
@import 'tailwindcss-uikit-colors/v4/ios.css';
/* or */
@import 'tailwindcss-uikit-colors/v4/macos.css';

Dynamic Color Updates

import { useColor, useColorScheme } from 'react-native-uikit-colors'

function ThemedComponent() {
  const { colorScheme } = useColorScheme()
  const backgroundColor = useColor('systemBackground')
  
  // Colors automatically update when system theme changes
  return (
    <View style={{ backgroundColor }}>
      <Text>Current theme: {colorScheme}</Text>
    </View>
  )
}

🏗️ Architecture

This monorepo uses a clean dependency hierarchy:

apple-uikit-colors (core)
├── react-native-uikit-colors (depends on core + tailwind)
└── tailwindcss-uikit-colors (depends on core)

Colors are stored as space-separated RGB values ("255 59 48") for optimal compatibility with modern CSS color functions and alpha compositing.

📚 Documentation

• React Native Package
• Tailwind CSS Package
• Tailwind CSS v4 Guide
• API Reference

🤝 Contributing

Contributions are welcome! Please read our contributing guide for details on our code of conduct and the process for submitting pull requests.

📄 License

2025 © Innei, Released under the MIT License.

Personal Website · GitHub @Innei