Apple UI Theme

A comprehensive Apple-inspired theme for Material-UI React applications, featuring authentic Apple design system colors, typography, and component styling.

Features

- 🎨 Complete Apple Design System color palette
- 🔧 Pre-configured Material-UI theme with Apple styling
- 🌓 Built-in dark/light mode support
- 📱 Apple-style component overrides (buttons, inputs, cards, etc.)
- 🎯 TypeScript support with full type definitions
- 🧩 Modular exports for flexible usage

Installation

``bash
npm install @stuartwisskirchen/apple-ui-theme

or

yarn add @stuartwisskirchen/apple-ui-theme

or

pnpm add @stuartwisskirchen/apple-ui-theme
`

Quick Start

`tsx
import React from 'react';
import { CustomThemeProvider, Button } from '@stuartwisskirchen/apple-ui-theme';

function App() {
return (


Hello Apple UI!


);
}

export default App;
`

Usage

$3

Wrap your app with the CustomThemeProvider to enable Apple styling and theme switching:

`tsx
import { CustomThemeProvider, useTheme } from '@stuartwisskirchen/apple-ui-theme';

function ThemeToggle() {
const { mode, toggleTheme } = useTheme();

return (

Switch to {mode === 'light' ? 'dark' : 'light'} mode

);
}

function App() {
return (


{/ Your app content /}

);
}
`

$3

`tsx
import { colors, getColor } from '@stuartwisskirchen/apple-ui-theme';

// Direct color access
const blueColor = colors.primary[500]; // Apple Blue #007AFF

// Helper function
const greenColor = getColor('success', 400); // Light Apple Green
const defaultGreen = getColor('success'); // Default (500) Apple Green
`

$3

`tsx
import { ThemeProvider } from '@mui/material/styles';
import { muiTheme } from '@stuartwisskirchen/apple-ui-theme';

function App() {
return (

{/ Your app content /}

);
}
`

$3

Instead of importing from @mui/material, import all components directly from the apple-ui-theme package:

`tsx
// ❌ Don't import from MUI directly
import { Button, TextField, Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';

// ✅ Import everything from apple-ui-theme
import { Button, TextField, Box, useMuiTheme } from '@stuartwisskirchen/apple-ui-theme';

function MyComponent() {
const theme = useMuiTheme();

return (


Submit

);
}
`

$3

All Material-UI components and utilities are re-exported:
- All MUI components (Button, TextField, Box, Typography, etc.)
- All MUI icons via Icons namespace: import { Icons } from '@stuartwisskirchen/apple-ui-theme'
- Theme utilities: useMuiTheme, alpha, styled
- Custom theme components: useTheme, CustomThemeProvider

$3

For monorepos, add to your pnpm-workspace.yaml:

`yaml
packages:
- 'your-app'
- 'apple-ui-theme'
`

Then reference in package.json:
`json
{
"dependencies": {
"@stuartwisskirchen/apple-ui-theme": "workspace:*"
}
}
`

API Reference

$3

The theme includes the complete Apple Design System color palette:

- primary - Apple Blue variants (50-900)
- secondary - Apple Gray variants (50-900)
- success - Apple Green variants (50-900)
- warning - Apple Orange variants (50-900)
- error - Apple Red variants (50-900)
- gray - Neutral gray variants (50-900)
- background - Default background colors

$3

All Material-UI components are styled with Apple design principles:

- Buttons: Flat design, no shadows, subtle hover effects
- Text Fields: Rounded corners, clean borders, focused states
- Cards/Papers: Subtle shadows, rounded corners
- Tables: Clean borders, alternating row colors
- Switches: Apple-style toggle switches
- Typography: SF Pro font family with Apple spacing

$3

- useTheme() - Hook to access theme mode and toggle function
- ThemeContextType` - TypeScript interface for theme context

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Stuart Wisskirchen