Apple-inspired UI theme for Material-UI with comprehensive color palette and component styling
npm install mui-applebash
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 (
);
}
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 (
);
}
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 (
);
}
`
$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