Cupertino Studio
Apple-inspired color themes for Visual Studio Code. Three variants, one seamless experience.
Themes
Cupertino Dark
macOS system dark mode + modern Xcode syntax palette. Warm dark tones, zero eye strain.
Cupertino Light
apple.com aluminum white + native macOS light mode. Clean, spacious, "premium retail" feel.
Cupertino Midnight
M3 MacBook Midnight chassis + visionOS deep space aesthetic. The most immersive variant for late-night coding.
All three themes also include No Italics variants — identical colors with italic styling removed from comments and documentation.
Install
- Open VS Code
- Press
Cmd+Shift+X to open Extensions
- Search for "Cupertino Studio"
- Click Install
- Press
Cmd+K Cmd+T and select your theme
Activation
Cmd+K Cmd+T → Cupertino Dark | Cupertino Light | Cupertino Midnight
What Makes It Different
Seamless UI — No hard borders. Panels are distinguished by tonal separation, not visible lines. Activity bar, sidebar, editor, and terminal merge into a single native-feeling surface.
510+ Workbench Colors — Every VS Code surface is themed: editor, sidebar, terminal, notebook cells, test explorer, merge editor, debug toolbar, settings panel, menus, quick pick, extensions, inline chat, and more.
Xcode-Grade Syntax — 69 TextMate token rules + 39 semantic token rules covering 21+ languages. Optimized for Swift, TypeScript, React, Dart, Python, Go, Rust, Java, Kotlin, Ruby, PHP, C/C++, SQL, and more.
Bracket Pair Colorization — Five levels of Apple-toned bracket colors (Blue → Purple → Pink → Orange → Cyan) with guide lines.
Copilot & Chat Ready — Inline suggestions, inline chat, and Copilot Chat panel are fully themed to match the Apple aesthetic.
Jupyter Notebook — Cell borders, output containers, toolbar, and status icons all themed.
Test Explorer — Pass/fail/error/queued/skipped icons with Apple system colors. Code coverage highlighting included.
Recommended Settings
For the best Apple-native experience, add these to your settings.json:
{
"editor.fontFamily": "'SF Mono', Menlo, Monaco, monospace",
"editor.fontSize": 13,
"editor.lineHeight": 22,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.smoothScrolling": true,
"editor.cursorSmoothCaretAnimation": "on",
"window.titleBarStyle": "custom",
"window.commandCenter": false,
"workbench.layoutControl.enabled": false
}
SF Mono is Apple's official developer font. Download it from developer.apple.com/fonts. Falls back to Menlo if not installed.
Language Support
| Language |
TextMate |
Semantic |
| Swift / SwiftUI |
✅ |
✅ |
| TypeScript / JSX / TSX |
✅ |
✅ |
| JavaScript |
✅ |
✅ |
| Dart / Flutter |
✅ |
✅ |
| Python |
✅ |
✅ |
| Go |
✅ |
✅ |
| Rust |
✅ |
✅ |
| Java |
✅ |
✅ |
| Kotlin |
✅ |
✅ |
| Ruby |
✅ |
— |
| PHP |
✅ |
✅ |
| C / C++ |
✅ |
✅ |
| Shell / Bash |
✅ |
— |
| SQL |
✅ |
— |
| Lua |
✅ |
— |
| HTML / CSS / SCSS |
✅ |
— |
| Markdown |
✅ |
— |
| JSON / YAML |
✅ |
— |
| Regular Expressions |
✅ |
— |
Color Palette
Built from Apple's Human Interface Guidelines system colors:
| Role |
Dark / Midnight |
Light |
| Keywords |
#FF375F (System Pink) |
#D63100 |
| Control Flow |
#BF5AF2 (System Purple) |
#8944AB |
| Strings |
#FF9F0A (System Orange) |
#C7A40A |
| Functions |
#64D2FF (System Cyan) |
#0075B0 |
| Types / Classes |
#30D158 (System Green) |
#04723A |
| Numbers |
#FF9F0A (System Orange) |
#D47600 |
| Comments |
#6C7986 (muted, italic) |
#7F8C98 (muted, italic) |
Theme Variants
| Theme |
Background |
Type |
| Cupertino Dark |
#1E1E2E |
Dark |
| Cupertino Light |
#FFFFFF |
Light |
| Cupertino Midnight |
#0D0D12 |
Dark |
| Cupertino Dark (No Italics) |
#1E1E2E |
Dark |
| Cupertino Light (No Italics) |
#FFFFFF |
Light |
| Cupertino Midnight (No Italics) |
#0D0D12 |
Dark |
Coverage
| Category |
Status |
| Editor core (selection, find, highlights, cursor) |
Complete |
| Inlay Hints |
Complete |
| Inline Suggest / Copilot |
Complete |
| Inline Chat / Copilot Chat |
Complete |
| Jupyter Notebook cells |
Complete |
| Test Explorer + coverage |
Complete |
| Merge Editor |
Complete |
| Multi Diff Editor |
Complete |
| Debug toolbar + breakpoints + inline values |
Complete |
| Terminal (tabs, links, command decorations, symbols) |
Complete |
| Bracket Pair Colorization |
Complete |
| Semantic Tokens |
Complete |
| Diff Editor (inserted/removed/moved/modified/unchanged) |
Complete |
| SCM Graph |
Complete |
| Charts |
Complete |
| Menu / Context Menu / Quick Pick |
Complete |
| Settings Editor (dropdown, checkbox, inputs) |
Complete |
| Extensions Panel |
Complete |
| Comments Widget |
Complete |
| Banner |
Complete |
| Minimap + Overview Ruler |
Complete |
| Breadcrumbs |
Complete |
| Sticky Scroll |
Complete |
| Symbol Icons |
Complete |
| Git Decorations |
Complete |
| Welcome Page |
Complete |
Development
npm run build # Compile all 6 themes
npm run dev # Watch mode (auto-rebuild on changes)
Press F5 in VS Code to open Extension Development Host for live preview.
License
MIT